Ball moves following spline key frames

image_pdfimage_print


   
      

<Window x:Class="SplineKeyFrameAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Spline Key Frame Animation" Height="250" Width="400">
  <Canvas Margin="5">
    <Ellipse Name="ball2" Canvas.Left="10" Canvas.Top="160" Width="20" Height="20">
      <Ellipse.Fill>
        <RadialGradientBrush>
          <GradientStop Color="Gold" Offset="0" />
          <GradientStop Color="DarkGoldenrod" Offset="1" />
        </RadialGradientBrush>
      </Ellipse.Fill>
    </Ellipse>
    <Canvas.Triggers>
      <EventTrigger RoutedEvent="StackPanel.Loaded">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="ball2"
                Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:10"
                RepeatBehavior="Forever">
                <SplineDoubleKeyFrame Value="160"
                  KeyTime="0:0:5" KeySpline="0.25,0.5,0.75,1" />
                <SplineDoubleKeyFrame Value="310"
                  KeyTime="0:0:10" KeySpline="0.25,0.0 0.75,0.5" />
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </Canvas.Triggers>
  </Canvas>
</Window>