Key frame spline animation : Frame Animation « Windows Presentation Foundation « VB.Net Tutorial






  1. VB.Net Tutorial
  2. Windows Presentation Foundation
  3. Frame Animation
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<Canvas>
  <Rectangle Fill="Red" Width="20" Height="20">
    <Rectangle.Triggers>
      <EventTrigger RoutedEvent="Rectangle.Loaded">
        <BeginStoryboard>
          <Storyboard>

            <DoubleAnimation From="0" To="800" Duration="0:0:10"
                Storyboard.TargetProperty="(Canvas.Left)"
                RepeatBehavior="Forever" AutoReverse="True" />

                
                <DoubleAnimationUsingKeyFrames Duration="0:0:2" RepeatBehavior="Forever"
                        Storyboard.TargetProperty="(Canvas.Top)">
                  <DoubleAnimationUsingKeyFrames.KeyFrames>
                    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
                    <SplineDoubleKeyFrame Value="50" KeyTime="0:0:0.5"
                                          KeySpline="0.4,0 0.7,0.7" />
                    <SplineDoubleKeyFrame Value="200" KeyTime="0:0:1"
                                          KeySpline="0.2,0.2 0.7,0.4" />
                    <SplineDoubleKeyFrame Value="0" KeyTime="0:0:2"
                                          KeySpline="0.25,0.25 0.6,1" />
                  </DoubleAnimationUsingKeyFrames.KeyFrames>
                </DoubleAnimationUsingKeyFrames>
                

          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Rectangle.Triggers>
  </Rectangle>
</Canvas>

</Page>
WPF Key Frame Spline Animation




16.110.Frame Animation
16.110.1.Simple Key Frame AnimationSimple Key Frame Animation
16.110.2.KeyFrame Point AnimationKeyFrame Point Animation
16.110.3.Use DiscreteDoubleKeyFrame to switch textUse DiscreteDoubleKeyFrame to switch text
16.110.4.Use SplineDoubleKeyFrame to rotate a ButtonUse SplineDoubleKeyFrame to rotate a Button
16.110.5.Key frame animationKey frame animation
16.110.6.Key frame spline animationKey frame spline animation
16.110.7.Animated Button With Discrete Key FramesAnimated Button With Discrete Key Frames
16.110.8.SplineDoubleKeyFrame and KeySplineSplineDoubleKeyFrame and KeySpline
16.110.9.Limit the Frame Rate for All Animations in an ApplicationLimit the Frame Rate for All Animations in an Application
16.110.10.Frame RatesFrame Rates
16.110.11.String Animation Using Key FramesString Animation Using Key Frames