Ball moves following spline key frames : Frame Animation « Windows Presentation Foundation « C# / CSharp Tutorial






  1. C# / CSharp Tutorial
  2. Windows Presentation Foundation
  3. Frame Animation
<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>
WPF Ball Moves Following Spline Key Frames




24.111.Frame Animation
24.111.1.Animation with Discrete Key FramesAnimation with Discrete Key Frames
24.111.2.Animation with Mixed Key Frames.xamlAnimation with Mixed Key Frames.xaml
24.111.3.Discrete Double Key FrameDiscrete Double Key Frame
24.111.4.Ball moves following spline key framesBall moves following spline key frames
24.111.5.Use ColorAnimationUsingKeyFrames to animate GradientStopUse ColorAnimationUsingKeyFrames to animate GradientStop
24.111.6.Use StringAnimationUsingKeyFrames to ColorUse StringAnimationUsingKeyFrames to Color
24.111.7.Using DiscreteStringKeyFrameUsing DiscreteStringKeyFrame
24.111.8.Use ColorAnimationUsingKeyFrames to animate the foreground color of a TextBlockUse ColorAnimationUsingKeyFrames to animate the foreground color of a TextBlock
24.111.9.Use StringAnimationUsingKeyFrames to animate the text value of a TextBlockUse StringAnimationUsingKeyFrames to animate the text value of a TextBlock