Expression Blend Example Chinese tutorial (10)

With the development of rich Internet application (RIA) application technology, companies pay more and more attention to the user experience of the project, on the basis of ensuring its function is perfect and running stably, the gorgeous UI and humanized operation design will bring the user comfortable experience effect. We have learned blend design simple animation, you can use storyboard quickly create an animation effect, but the animation effect seems to lack the natural effect, so that users feel too mechanized, greatly reducing the user experience. To make the animation more humane and to look more natural, we can solve the following two ways:

Method 1. Using the frame animation technique mentioned above, in order to be more natural animation, you can add more frames in the key details of the animation, shorten the interval between each frame effect, which can improve the animation effect, but for large projects, such a design will cost a lot of energy design, after the project is completed, the project maintenance is relatively complex, Once the design changes, it is necessary to completely modify its animation effect code, so, relatively speaking, this method is not very practical;

Method 2. In Silverlight 3, Microsoft introduced a new feature-animation easing, also known as Buffering animation. Microsoft encapsulates 11 popular animation effects that developers and designers can easily invoke to create more natural animation effects through animation easing. This article will detail the basics of animation easing buffering animation and how to use blend design easing.

Understanding animation easing (buffered animation)

Each feature in Silverlight inherits from the different base classes and implements different functional effects, as does the Animation easing (buffered animation), which inherits from the Easingfunctionbase base class, in which a property is provided Easingmode , which allows the control to buffer the animation effect mode. The Animation easing (buffered animation) effect pattern is encapsulated as an enumeration type, respectively, the effect pattern of the easein,easeout,easeinout.animation easing (buffered animation) is an important concept that directly Determines when the animation easing (buffered animation) will produce effects. I don't want to explain these three patterns in an overly official way, according to my experience, the concept of these three animation modes is described in my own language, Easein, it can be understood simply to apply the buffering animation effect to the beginning of the animation instance, that is, to start the animation and execute the animation immediately. Easing (buffering animation) effect;

Easeout, simple can be understood as the Buffering animation effect applied to the end of the animation instance, that is, to end the animation, immediately execute the animation easing (buffering animation) effect;

Easeinout, simple can be understood as the whole process of animation is divided into two parts, the buffering animation effect applied in the first part, the Easein application in the first part of the beginning, easeout application in the end of the second part. For example, with a 10-second animation that is applied in easeinout mode, Silverlight divides the animation into two 5-second animations, applies easein to the beginning of the first 5-second animation, and then applies the easeout before the second 5-second animation ends.

For the understanding of the three effect patterns, we will demonstrate in a later instance that there is only one basic concept for animation easing (buffering animation). As software designers and developers, it should be understood that the so-called animation effect, in fact, the computer for the graphics run the trajectory of the calculation of different, resulting in different visual effects. and animation easing (buffering animation) is also the same, in Microsoft's 11 kinds of animation easing (buffering animation) animation, ran 11 different equations, resulting in 11 animation effects. In order to better understand these 11 kinds of animation easing (buffering animation) effect, first need to understand the most basic equations, through the equation graph, you can probably understand the animation operation effect.

The T in the figure above represents the time, and F (t) represents the animation target object property, and the curve represents the animation trajectory effect, different time periods, and different object properties.

Take a look at an example to illustrate that the equation graphic effect