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

This article introduces the relevant knowledge of "how to achieve Keyframe animation in WPF". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The difference between animation and keyframes ordinary animation

In the basic WPF animation, we are familiar with From/To/By-driven animation, which mainly creates a transition effect between two values, as shown below:

The following is an animation of the beating of love created using ordinary ThicknessAnimation

Key frame

For Keyframe animation, Keyframe animation does not have the attribute of From/To/By, while the value of Keyframe animation is described by frame objects, so it is called Keyframe animation, as follows:

The following is an animation of a rectangular displacement created using Keyframe animation

Note: it can be noticed that the lower left corner describes the whole animation process:

1. Within five seconds, the rectangle changes from position 0-> 500: LinearDoubleKeyFrame Value= "500" KeyTime= "0:0:5"

two。 From 5 to 10 seconds, the rectangular position is 500-> 200: SplineDoubleKeyFrame KeySpline= "0.25, 0.75, and 1" Value= "200" KeyTime= "0:0:10".

3. From 10 to 12 seconds, rectangle position 200-> 290: LinearDoubleKeyFrame Value= "290" KeyTime= "0:0:12"

4. From 12 to 13.5 seconds, the rectangle position is 290-> 300: LinearDoubleKeyFrame Value= "300" KeyTime= "0ambiguo 13.5"

5. From 13.5 to 15 seconds, the rectangle position is 300-> 0: SplineDoubleKeyFrame KeySpline= "0.25, 0.75, 1" Value= "0" KeyTime= "0:0:15"

Note: the Keyframe object (Frame) mainly contains two parameters. Value is the target value, and KeyTime represents time.

So far, we should be able to understand the difference between ordinary animation and Keyframe animation. For frame animation, it lies in controlling the expression of each frame. Unlike ordinary animation, we can only control the whole animation from beginning to end, while frame animation can control the whole process from beginning to end.

Introduce Keyframe animation

Next, we show how to create a simple Keyframe animation.

1. The following code creates a rectangle and adds a click time trigger animation to it, which is defined and triggered in Storyboard:

Note: the above creates a DoubleAnimation type frame animation, binds a target and its animation dependent attribute "Y", Duration sets a frame animation duration, defines multiple linear keyframes (LinearDoubleKeyFrame) in the collection of Keyframe animation, and sets the Value target value and KeyTime duration for it.

One of the types of linear keyframes mentioned here will be described in more detail later.

Keyframe animation typ

Keyframe animation belongs to the System.Windows.Media.Animation command space, and the naming convention is

AnimationUsingKeyFrames

Type: for the value type of the animation, for example, in the above animation, you need to move the X axis. The value of X belongs to the double precision type, so the defined type is: DoubleAnimationUsingKeyFrames.

List of animation types for Keyframe

Type of frame object

Just as we create different types of animation, we need to define them according to the convention, such as DoubleAnimation, ColorAnimation, and so on.

For frame animation, it is mainly composed of one or N frame objects (Frame). Frame objects also have different types, so frame objects follow the following naming convention:

Interpolation method: it is the interpolation method used by frame objects, such as Discrete, Linear, Spline and so on.

Type: is the value type of the animation, such as Double, Decimal, and so on.

KeyFrame: fixed frame object syntax ends

The main purpose of keyframes is to specify and provide these two attributes for each Keyframe type of KeyTime and Value.

The property Value specifies the target value for the Keyframe.

This KeyTime property specifies when the Keyframe is reached (in the Duration of the animation). Value

When a Keyframe animation begins, its keyframes are traversed in the order defined by its KeyTime attribute.

If there is no Keyframe at time 0, the animation converts between the current value of the target attribute and a Keyframe of the value; otherwise, the output value of the animation becomes the value of the first Keyframe.

The animation creates a transition between the first and second keyframes using the Value interpolation method specified by the second Keyframe. The conversion starts the KeyTime at the first Keyframe and ends when the second Keyframe KeyTime is reached.

The animation continues, which creates a transition between each subsequent Keyframe and the Keyframe in front of it.

Finally, the animation is converted to a Keyframe value whose maximum key time is equal to or less than the animation's value Duration.

If the Duration or Automatic of the animation has a Duration equal to the time of the last Keyframe, the animation ends. Otherwise, if the animation is greater than the key time of the last Keyframe of the Duration, the animation retains the Keyframe value until it reaches the end of its Duration. As with all animations, Keyframe animation uses its FillBehavior attribute to determine whether the final value is retained when the end of the active cycle is reached.

Interpolation method

There are three different types of interpolation methods: linear, discrete, and curvilinear.

Linear interpolation

With linear interpolation, the animation plays at a fixed speed for a period of time. For example, if the Keyframe segment transitions from 0 to 10 for a duration of 5 seconds, the animation outputs the following values at a specified time:

Discrete interpolation

With discrete interpolation, the animation function jumps from one value to the next without interpolation. If the Keyframe segment transitions from 0 to 10 for a duration of 5 seconds, the animation outputs the following values at the specified time:

Note: by observing the linear and discrete insertion comparison, we can clearly see that the offline type of insertion mode, in the execution of the animation, we can not observe its change effect within a specified time, directly to the end of time, to the specified target value.

Curve interpolation

Curve interpolation can be difficult to understand; experience with different settings helps. Through the master curve animation example, you can change the main curve value, and view the resulting animation results, you can view the top video to understand.

Combinatorial interpolation

You can use keyframes with different interpolation types in a Keyframe animation. If two Keyframe animations with different interpolation follow each other, the interpolation method for the second Keyframe is used to create a transition from the first value to the second value.

The following example demonstrates an example of using DoubleAnimationUsingKeyFrames to create using linear, stitching, and discrete interpolation:

Duration and KeyTime

Like other animations, Keyframe animation has the property Duration. In addition to specifying the Duration of the animation, you also need to specify which part of the duration of each Keyframe. To do this, you can describe the key KeyTime frames for each animation. Each Keyframe specifies the end time of the KeyTime Keyframe.

The property KeyTime does not specify when the key time is played. The playback length of the Keyframe is determined by the end time of the Keyframe, the end time of the previous Keyframe, and the duration of the animation. Critical time can be specified as a time value, percentage, or special value Uniform or Paced.

TimeSpan

The following example shows an animation with a duration of 10 seconds and four keyframes whose key time is specified as a time value.

In the first 3 seconds, the first Keyframe is animated between the base value and 100, with an end time of 0:0:03.

The second Keyframe is animated between 100 and 200. It starts after the end of the first Keyframe (start time = 3 seconds), plays for 5 seconds, and ends at 0:0:8.

The third Keyframe is animated between 200 and 500. It starts at the end of the second Keyframe (start time = 8 seconds), plays for 1 second, and ends at 0:0:9.

The fourth Keyframe is animated between 500 and 600. It starts at the end of the third Keyframe (start time = 9 seconds), plays for 1 second, and ends at 0:0:10.

Percentage

Percentage value specifies that the Keyframe ends with some Duration percentage of the animation. In XAML, specify the percentage as the number after the% sign. In the code, use the FromPercent method and pass a method that Double indicates the percentage. The value must be greater than or equal to 0 and less than or equal to 100%. The following example shows an animation with a duration of 10 seconds and four keyframes whose key time is specified as a percentage.

In the first 3 seconds, the first Keyframe will be animated between the base value and 100, with an end time of 0:0:3.

The second Keyframe is animated between 100 and 200. It starts after the end of the first Keyframe (start time = 3 seconds), plays for 5 seconds, and ends at 0:0:8 (0.8 * 10 = 8).

The third Keyframe is animated between 200 and 500. It starts at the end of the second Keyframe (start time = 8 seconds), plays for 1 second, and ends at 0:0:9 (0.9 * 10 = 9).

The fourth Keyframe is animated between 500 and 600. It starts at the end of the third Keyframe (start time = 9 seconds), plays for 1 second, and ends at 0:0:10 (1 * 10 = 10).

Uniform

Use timing when you Uniform want each Keyframe to take the same amount of time.

Uniform key time divides the available time by the number of keyframes averagely to determine the end time of each Keyframe. The following example shows an animation with a duration of 10 seconds and four keyframes with a key time specified as Uniform.

In the first 2.5 seconds, the first Keyframe is animated between the base value and 100, with an end time of 0 / 0 / 0 / 0 / 2. 5.

The second Keyframe is animated between 100 and 200. It starts after the end of the first Keyframe (start time = 2.5s), plays for about 2.5s, and ends at 0:0:5.

The third Keyframe is animated between 200 and 500. It starts at the end of the second Keyframe (start time = 5 seconds), plays for 2.5 seconds, and ends with a time of 0 / 0 / 0 / 0 / 7. 5.

The fourth Keyframe is animated between 500 and 600. It starts at the end of the second Keyframe (start time = 7.5 seconds), plays for 2.5 seconds, and ends at 0:0:1.

Paced

If you want Paced to animate at a constant rate, use timing.

Paced key time allocates available time based on the length of each Keyframe to determine the duration of each frame. In this way, the speed or speed of the animation will remain the same. The following example shows an animation with a duration of 10 seconds and three keyframes with a key time specified as Paced.

Key frame time and sequence

You can use keyframes with different KeyTime value types in the same animation. Although it is recommended that keyframes be added in the actual playback order of keyframes, this is not necessary. Animation and timing systems can handle out-of-order keyframes. Keyframes with invalid key times are ignored.

The following table describes the process of parsing the key time for keyframes of a Keyframe animation.

1 parse the TimeSpanKeyTime value.

2 determine the total interpolation time of the animation, that is, the total time it takes for the Keyframe animation to complete the forward iteration.

If the Duration of the animation is not Automatic or Forever, the total interpolation time is the value of the animation Duration property.

Otherwise, the total interpolation time is the maximum specified between its keyframes (TimeSpanKeyTime if any).

Otherwise, the total interpolation time is 1 second.

(3) the PercentKeyTime value is parsed with the total interpolation time value.

4 if the last Keyframe has not been parsed in the previous step, the Keyframe is parsed. If the last KeyTime Keyframe is Uniform or Paced, its parsing time will be equal to the total interpolation time.

If the Keytime is Paced for one Keytime frame and there are more animations than keyframes, its KeyTime value is resolved to zero; if there is only one Keytime frame and its KeyTime value is Paced, it is resolved to the total interpolation time, as described in the previous step.

5 parse the remaining UniformKeyTime values: each value is given an equal share of the available time. During this process, PacedKeyTime, unresolved values are temporarily treated as UniformKeyTime values, and time for temporary parsing is obtained.

6 use the Keyframe closest to the declared KeyTime that has the resolved KeyTime value to resolve the value of the Keyframe for which the key time is not specified.

7 parse the remaining PacedKeyTime values. PacedKeyTime uses the values of adjacent KeyTime keyframes to determine its parsing time. The goal is to ensure that the animation speed remains constant during the parsing time of this Keyframe.

8 sorts keyframes by parsing time (primary key) and declaration order (secondary key), that is, using stable sorting based on resolved KeyTime values.

This is the end of the content of "how to realize Keyframe Animation in WPF". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.