Did You Know… There are 3 Versions of Keyframe Animation?

This is, as you may have guessed, the follow up to the previous Tip of the Day on Animation.In today's Tip of the Day I'd like to distinguish between three types of KeyFrame Animation:

  1. Lineear
  2. Discrete
  3. Spline

Keyframe Vs "From,To"

The main feature that distinguishes all three of these from the "From-To" animation considered previously is that previously we identified a target property and changed it from one value to a new value over a specific duration.

With KeyFrame animation you have far greater control, because you name each discrete time and the value to correspond to that time for the selected value. You can have as many discrete value/time combinations as you like, and you do not have to distribute them evenly.


Let's start with the most directly comparable keyframe animation: Linear.  This is defined by filling your storyboard with a DoubleAnimationUsingKeyFrames, which you name and to which you assign both a TargetName (the object you wish to animate) and a TargetProperty, much as you do with From,To. Within this element, however, you may put as many LinearDoubleKeyFrame sub-elements as you choose. Each one has its own KeyTime property along with a value, and the animation will move from one KeyTime to the next, spreading the animation evenly between sequential keytimes (thus the name Linear). As a first attempt, let's add four times, making the distribution of time and distance equal,

We are temporarily unable to have streaming applications work from within my blog. To see this working, please click here


Of course, if you change the relative time between KeyTimes, you will see the box move at a varying rate as it adjusts to the demands to arrive at a particular value at a particular time, but the speeed between each specific LinearDoubleKeyFrame and the next will be evently distributed,



Discrete Key Frames

With Discrete key frames, the value is not changed at all until the time for the next key frame is reached. In the case of animation, the box will not move from its current position to its next position until the time of the next keyframe.



Spline animations are based on piecewise polynomial parametric curves, most notably the Bezier curve.

The SplineDoubleKeyFrame has a KeySpline property that specifies the cubic Bezier curve that defines the progress of the key frame. A cubic Bezier curve is defined by a start point, an end point and two control points. The coordinates in the KeySpline define the two control points. The curve controls the rate of change in the animation over the time allowed.

The net effect is that by specifying the start, end and control points of the curve, you actually specify the "acceleration" or "decelration" of the animation; providing the ability to crate much more "real world" realistic animation, as demonstrated (feebly) below.



Technorati Profile




About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen Pluralsight & LinkedIn Learning courses. He was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in z Silverlight Archives and tagged . Bookmark the permalink.