Shulou(Shulou.com)06/03 Report--

So far, all the animations you've seen use linear interpolation from the start to the end. But if you need to create animations with multiple segments and irregular movements. For example, you might want to create an animation that slides an element quickly into view and then slowly moves it to the correct position. You can achieve this effect by creating two consecutive animations and using the BeginTime property to start the second animation after the first. However, there is an easier way--keyframe animation can be used.

A keyframe animation is an animation made up of many shorter segments. Each segment represents an initial, final, or intermediate value in the animation, which moves smoothly from one value to another as the animation runs.

For example, consider the following Point animation that moves the center point of the RadialGradient Brush from one location to another:

Instead of this PointAnimation object, an equivalent PointAnimationUsingKeyFrames object can be used, as follows:

copy code

copy code

This animation consists of two keyframes. The first keyframe when the animation first starts sets the Point value (you can omit this keyframe if you want to use the current value set in the RadialGradient Brush). The second keyframe defines the end value, which is reached after 10 seconds. The PointAnimationUsingKeyFrames object performs linear interpolation. Smoothes from the first keyframe to the second, just as PointAnimation objects do with From and To values.

A series of keyframes can be used to create more interesting examples. The animation below experiences the center point through a series of positions reached at different times. The speed at which the center point moves varies depending on the duration between keyframes and the distance it needs to move.

copy code

copy code

This animation is not reversible, but can be repeated. To ensure that there is no jump between the last data of one iteration and the start value of the next iteration, make the end and start points of the animation at the same center point.

I. Discrete keyframe animation

The keyframe animation in the example above uses linear keyframes. So, it transitions smoothly between keyframe values, another option is to use discrete keyframes. In this case, no interpolation is performed. When the critical time is reached, the attribute suddenly changes to a new value.

Linear keyframe classes are named using the form Linear+ DataType +KeyFrame. Discrete keyframe classes are named using the form "Discrete+ Data Type +KeyFrame." The following is a modified version of the RadialGradient Brush example, in which discrete keyframes are used:

copy code

copy code

When running this animation, the center point jumps from one position to the next at the right time. This is dramatic (but uneven).

All keyframe animation classes support discrete keyframes, but only some keyframe animation classes support linear keyframes. It all depends on the data type. Data types that support linear keyframes also support linear interpolation and provide corresponding DataTypeAnimation classes, such as Point, Color, and double. Data types that do not support linear interpolation include strings and objects.

II. Slow key frames

Through the "[WPF Learning] Chapter 51 Animation Slow" learning, I saw how to use slow function to improve ordinary animation. Although the keyframe animation is split into segments, each segment still uses the common, boring linear interpolation.

If this is not the desired result, you can use the ease function to add acceleration and deceleration effects to each keyframe. However, ordinary linear interpolation keyframe classes and discrete keyframe classes do not support this feature. Instead, you need to use a slow keyframe, such as EasingDoubleKeyFrame, EasingColorKeyFrame, or EasingPointKeyFrame. Each easing keyframe class works the same way as its corresponding linear interpolation keyframe class, but provides an additional EasingFunction attribute.

The following example applies acceleration to the first 5 seconds of keyframe animation using animation easing:

copy code

copy code

Using keyframes in combination with animation easing is an easy way to build complex animated models, but it may not provide the control you need. Instead of using animation easing, you can create mathematical formulas that indicate the progress of the animation.

III. Spline keyframe animation

There is also a keyframe type: spline keyframes. Every class that supports linear keyframes also supports spline keyframes, which are named in the form "Spline+ Data Type +KeyFrame."

Like linear keyframes, spline keyframes use interpolation to move smoothly from one key value to another. The difference is that each spline keyframe is a KeySpline attribute. You can use this attribute to define cubic Bezier curves that affect how interpolation is performed. Although this is cumbersome to do to get the desired effect, this technique creates more consistent acceleration and deceleration and more realistic animation effects.

As you learned in the previous chapter, Bezier curves are defined by a start point, an end point, and two control points. For key splines, the start point is always (0,0) and the end point is always (1,1). The user only needs to provide two control points. The curve created describes the relationship between time (X axis) and animation values (Y values).

The following example demonstrates a keyframe spline animation by comparing the movement of two ellipses on the Canvas panel. The first ellipse moves slowly and uniformly across the window using the Double Animation animation. The second ellipse uses DoubleAnimationUsKeyFrames animation with two SplineDoubleKeyFrame objects. The two ellipses arrive at the same time (10 seconds later), but the second ellipse will accelerate and decelerate significantly during its motion, decelerating faster than the first ellipse and falling behind the first ellipse when decelerating.

copy code

copy code

The fastest acceleration occurs shortly after 5 seconds, when the second SplineDoubleKeyFrame is entered. The first control point of the Bezier curve matches the larger Y-axis value representing animation progress (0.8) with the smaller X-axis value representing time. So the ellipse increases speed for a short distance before slowing down again.

The following figure graphically shows two curves that control elliptical motion. To understand these curves, remember that they describe the animation process from top to bottom. Looking at the first curve, you can see that it drops relatively evenly, with short pauses at the beginning and a gentle drop at the end. However, the second curve drops rapidly, travels a large distance, and then drops slowly for the rest of the animation.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.