Animations in WPF--(v) Keyframe animations

Similar to from/to/by animations, Keyframe Animations can also animate the target property values in an animated form. Unlike from/to/by animations, from/to/by animations only control changes between two states, while keyframe animations can vary between states, for example, for the previous example of changing the width of a button, if we want to achieve the following effect:

• Change width from 0 to 350 in 2 seconds
• Change width to 50 in 7 seconds
• Change its width to 200 in 9 seconds.

Although we can use three from/to/by animation combinations to achieve similar effects, but this trouble, and second to perceive animation completion events, inconvenient to use in XAML. At this point we can use key-frame animations to quickly implement this process.

VarWidthanimation =New DoubleAnimationUsingKeyFrames();
VarKeyFrames = Widthanimation.keyframes;

Keyframes.add (NewLinearDoubleKeyFrame(0,TimeSpan. FromSeconds (0)));
Keyframes.add (newlineardoublekeyframe< Span style= "color:black;" > (timespan     keyframes.add (lineardoublekeyframe (timespan     keyframes.add (lineardoublekeyframetimespan
    button. BeginAnimation (Widthproperty, widthanimation);

As you can see, key-frame animations make each state a keyframe, the Keyframe animation timeline automatically joins each keyframe, and calculates the transition state to complete the animation. So, in a way, we can also think of from/to/by animation as a special Keyframe animation with only two states.

Built-in key-frame animations

As with from/to/by animations, there are a number of key-frame animations built into the namespace System.Windows.Media.Animation, and their naming conventions are:

< type > AnimationUsingKeyFrames

For example, the doubleanimationusingkeyframes used here, other types see MSDN: Keyframe Animation overview, not listed here.

Interpolation algorithm

In key-frame animations, in addition to defining keyframes, we need to define an interpolation algorithm between two keyframes so that the system can generate intermediate states based on keyframes and interpolation algorithms. There are three interpolation algorithms built into the WPF system:

• Linear: Evenly varying between two keyframes
• Discrete: Mutation between two keyframes (hard switching at point of arrival, no transition)
• Spline: Achieve more precise acceleration and deceleration control with Bezier curves

In summary, the linear algorithm is most commonly used, the spline algorithm can achieve precise acceleration and deceleration control. This hard-switching effect of discretization, while seemingly not animated, is often used to connect keyframes. In addition, it can be used in some hard transition places, for example, to achieve flicker effect.

The specific effect of the three algorithms here does not do more introduction, interested friends can look at the following two links in the description and examples:

• http://msdn.microsoft.com/zh-cn/library/ms742524 (v=vs.110). aspx
• Http://msdn.microsoft.com/zh-cn/library/System.Windows.Media.Animation.LinearDoubleKeyFrame (v=vs.110). aspx

It is worth mentioning that not all key-frame animations support the three algorithms, see MSDN: Keyframe Animation overview for specific support scenarios. Of course, for unsupported can also be implemented manually.

KeyFrames (Ikeyframe)

As mentioned earlier, a key frame is composed of two parts, the time point and the interpolation algorithm, in WPF, different keyframe animations correspond to the same Keyframe objects, which inherit from the Ikeyframe interface, and the naming rules are:

< type > Keyframe

For example, doubleanimationusingkeyframes corresponds to DoubleKeyFrame, but since this class does not have an interpolation algorithm, it is just an abstract base class, plus the corresponding key-frame class naming specification after the interpolation algorithm:

< interpolation algorithms >< types > Keyframe

For example, the key frames for the three interpolation algorithms that correspond to DoubleKeyFrame are: LinearDoubleKeyFrame, DiscreteDoubleKeyFrame, SplineDoubleKeyFrame. These Keyframe objects are used in much the same way, and are not described here.

Keyframe Point in time (KeyTime)

The point in time for keyframes is specified by the Ikeyframe.keytime property. It is a keytime type, and it has the following types of values:

• Time-point TimeSpan: Depending on the timespan, the time point can be directly determined by the function KeyTime. Fromtimespan() is created, or can be implicitly converted directly with a timespan.
• Relative Time percent: Specifies a percentage that is combined to determine the corresponding point in time through the duration of the timeline. Through the function KeyTime. Frompercent() created.
• Special Value Uniform: the time that the timeline takes to evenly distribute each keyframe. Through the function KeyTime. Uniform created .
• Special value paced: the time required for the inter-line to be allocated at a fixed frame rate, in which case the key frame with a large change in allocation time is long and the keyframe is assigned a time period of small change. Through the function KeyTime. Paced created .

The way the code was created here is not an example, just a few examples of how these times are represented in XAML:

<LinearDoubleKeyFrame Value=" KeyTime " ="0:0:3" />
<lineardoublekeyframeValue="KeyTime" ="30%" />
<lineardoublekeyframeValue="KeyTime" ="Uniform" / >
<lineardoublekeyframeValue="KeyTime" ="Paced" / >

Resources:

Key frame Animations Overview

Animations in WPF--(v) Keyframe animations