WPF realizes animation effects (II) From/To/By animation

WPF animation effect series

Basic concept of WPF to achieve animation effects (1)

WPF realizes animation effect (three) timeline (TimeLine)

WPF implements animation effect (four) easing function

WPF realizes keyframe animation of animation effect (five)

WPF implements animation effect (VI) path animation

WPF achieves animation effects (7) demonstration board

text

A large part of the animation we implement is to make a property change between the start and the end value, for example,Previous articleThe animation of changing width implemented in:

    var widthAnimation = new DoubleAnimation()
    {
        From = 0,
        To = 320,
        Duration = (2),
        RepeatBehavior = ,
    };

    (WidthProperty, widthAnimation);

This animation implements the change of width between 0 and 320. Since the width is a double type, DoubleAnimation is used here. For some other common types, such as Byte, Color, Int32, Size, Point, etc.There are corresponding transition animation implementations below, and the naming rule is "data structure type + Animation" I will not introduce it here.

This kind of transition animation is generally a From/To/By animation because they determine the starting value and end value of the target attribute through the three attributes From, To, and By. First, let’s take a look at the meanings represented by these three attributes:

From: Start value, set the target attribute to this value at the beginning of the animation
To: End value, the animation ends with the target attribute as the change value
By: Offset value: At the end of the animation, the target attribute is "initial value + offset value"

It is obvious that the effects of To and By may conflict. In fact, these three attributes are optional, and when To and By are set, the By attribute will be ignored. Next, I will introduce how these three attributes are combined and used through some simple scenarios.

Change from 0 to 320: From = 0, To = 320
Change from initial value to 320: To = 320
Change from 0 to initial value: From = 0
Increased by 0 by 150: From = 0, By = 150
Increased by 150 by initial value: By = 150

After reading these use cases, I believe everyone has roughly understood the use of these three parameters.

Why is this designed

In the first grade of junior high school, the three parameters of From, To and By are designed too complex. They can be determined by using the two parameters From and To. They need to be obtained through calculations where By is needed. Even From and To can force assignment, so that there will be no illegal situation where neither From nor To assign assignment. Why do you need to design this way? I think there are two reasons:

This more flexible method can facilitate separation of animations and specific objects, and can be convenient for reuse and combination.
Convenient to use in XAML. If you do it like I mentioned above, you often need to take the initial value of the object, and when writing complex animations in XAML, this operation is not very convenient.

Time control

Here we only introduce how to set the start and end states of transition animations. Another important part of the animation is time control, such as the length of the animation time period, the start time, the number of repetitions, the speed of the progress, the end notification, etc. These are controlled in its base class TimeLine, which will be described separately in the next chapter.

References

/zh-cn/library/aa970265(v=vs.110).aspx

This is all about this article about From/To/By animation that implements animation effects in WPF. I hope it will be helpful to everyone's learning and I hope everyone will support me more.