Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College

Key frame-based animation

Key frame-based animation

In the case of Key frame-based animations the control can be carried out with using keyframes different from the previously known types. Due to the key frames we can create not only linear curved, or constant rate- changing animations. The Key frame-based animation format: <Type>AnimationUsingKeyFrames as we have already discussed above.

Before we go on, here is a new feature appear to be acquainted KeyTime. The key dates format: hours:minutes:seconds. But that is not the only way to enter, it can be expressed in a percentage and in a written form aswell. You must have the animation duration too if the KeyTime was given in a percentage.

The duration of the animation is divided evenly between the keyframes when the KeyTime property is adjusted to Uniform, but in the case of scheduled (Paced) signing the WPF tries to cope with keyframes achieving a constant rate.

Key frame-based animation syntax:




In the following child elements interpolations are available:

Linear interpolation

<LinearDoubleKeyFrame Value="" KeyTime="" />

Discrete interpolation

<DiscreteDoubleKeyFrame Value="" KeyTime="" />

Spline interpolation

<SplineDoubleKeyFrame Value="" KeyTime="" KeySpline="" />

All in all, LinearDoubleKeyFrame is a double-valued keyframe using linear interpolation method for insertion.

In the case of the KeySpline property, a cubic Bezier curve has to be parameterized. The starting (0,0) and the final point (1.1) is given, we need to select two conrol point. The first control point effect to the first segment of the curve, the second to the second one. The resulting curve can describe the rate of change can be used to describe very different physical movements (e.g falls, bouncing balls, etc.).

Example XI.4KeySpline 1

Control points (0.0, 1.0) and (1.0, 0.0).

XI.2. KeySpline 1

<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />

Example XI.1 KeySpline 2

Control points (0.25, 0.5) and (0.75, 1).

XI.3. KeySpline 2

<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />

Example XI.5 Linear interpolation

<Canvas Width="300" Height="300">

     <Ellipse x:Name="Ball" Width="30" Height="30" Fill="Red" >


             <EventTrigger RoutedEvent="MouseDown">






                        <LinearDoubleKeyFrame KeyTime="0:0:2" />

                        <LinearDoubleKeyFrame Value="100"  KeyTime="0:0:8" />

                        <LinearDoubleKeyFrame Value="200"  KeyTime="0:0:10" />








Example XI.6 Discrete interpolation

XI.4. Discrete interpolation

<StackPanel HorizontalAlignment="Center">

<Label Name="animLabel" Margin="200"

    FontFamily="Verdana">Kattints ide!


       <EventTrigger RoutedEvent="Label.MouseDown">






                Duration="0:0:9" FillBehavior="HoldEnd">

                 <DiscreteStringKeyFrame Value="Discrete " KeyTime="0:0:0" />

                 <DiscreteStringKeyFrame Value="Discrete i" KeyTime="0:0:1" />

                 <DiscreteStringKeyFrame Value="Discrete in" KeyTime="0:0:1.5" />

                 <DiscreteStringKeyFrame Value="Discrete int" KeyTime="0:0:2" />

                 <DiscreteStringKeyFrame Value="Discrete inte" KeyTime="0:0:2.5" />

                 <DiscreteStringKeyFrame Value="Discrete inter" KeyTime="0:0:3" />

                 <DiscreteStringKeyFrame Value="Discrete interp" KeyTime="0:0:3.5" />

                 <DiscreteStringKeyFrame Value="Discrete interpo" KeyTime="0:0:4" />

                 <DiscreteStringKeyFrame Value="Discrete interpol" KeyTime="0:0:4.5" />

                 <DiscreteStringKeyFrame Value="Discrete interpola" KeyTime="0:0:5" />

                 <DiscreteStringKeyFrame Value="Discrete interpolat" KeyTime="0:0:5.5" />

                 <DiscreteStringKeyFrame Value="Discrete interpolati" KeyTime="0:0:6" />

                 <DiscreteStringKeyFrame Value="Discrete interolatio" KeyTime="0:0:6.5" />

                 <DiscreteStringKeyFrame Value="Discrete interpolation" KeyTime="0:0:7" />

                <DiscreteStringKeyFrame Value=" Discrete interpolation!" KeyTime="0:0:7" />" KeyTime="0:0:7.5" />








Example XI.7 Spline interpolation

XI.5. Spline interpolation


       <Storyboard x:Key="sbBounce" RepeatBehavior="Forever">    

            <ParallelTimeline BeginTime="0:0:0" AutoReverse="True">




                    <SplineDoubleKeyFrame KeyTime="0:0:1"

                                    KeySpline="0.5,0 1,1"






                    <SplineDoubleKeyFrame KeyTime="0:0:1"

                                    KeySpline="0.5,0 1,1"






You can create more complex animations with using ParalellTimeline – more than one child animation is embed into the Storyboard.

Example XI.8 The control of animations with Triggers

Animations can also be controlled by triggers (BeginStoryBoard – starting Storyboard, PauseStoryBoard – pausing StoryBoard, ResumeStoryBoard – continuing Storyboard, StopStoryBoard – stopping StoryBoard).

XI.6. The control of animations with Triggers

<EventTrigger RoutedEvent="Button.Click" SourceName="btnStart">


        <BeginStoryboard Name="begSbBounce" Storyboard="{StaticResource sbBounce}"/>



<EventTrigger RoutedEvent="Button.Click" SourceName="btnPause">


        <PauseStoryboard BeginStoryboardName="begSbBounce"/>



<EventTrigger RoutedEvent="Button.Click" SourceName="btnResume">


       <ResumeStoryboard BeginStoryboardName="begSbBounce"/>



<EventTrigger RoutedEvent="Button.Click" SourceName="btnStop">


         <StopStoryboard BeginStoryboardName="begSbBounce"/>



<EventTrigger RoutedEvent="Button.Click" SourceName="btnRemove">


        <RemoveStoryboard BeginStoryboardName="begSbBounce"/>