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:
- Lineear
- Discrete
- 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.
Linear
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,
My apologies; I'm unable to get the animations to work on this blog (we're looking into it). I've replicated this post here, where the animations do work. Thanks.
To see the effect, click on the red square, below:
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,
To see the change, click on the red square, below:
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.
To see the discrete key frame effect, click on the red square, below:
Spline
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.
To see the accelearation and decelaration created by the Key Spline, click the red square, below:
Technorati Profile