Animation total Contact (1): Preliminary Study of animation model

Animation is one of the classic models provided in AjaxControlToolkit, and the various components under this model can be combined to show very rich animation effects. The animation model is also a classic example of the Microsoft AJAX Library client component model, and mastering the animation is almost equivalent to mastering the component model- It even includes the derivation of the component model: The behavior model and the control model. In my opinion, in addition to the "concept" of the difference, from a technical point of view they are almost the same thing.

In addition, the animation source code in the comments even more than the number of code itself, so it is also a very good learning materials.

The Animation model is based on the client AjaxControlToolkit.Animation.Animation class. For programming convenience, AjaxControlToolkit an alias "$AA" for the Ajaxcontroltoolkit.animation namespace, so we can use the animation class with the $AA. Animation "to access it.

The following figure is the UML representation of animation:

The animation class inherits the Sys.Component class, so it also contains all the members and attributes of sys.component, such as the raisePropertyChanged method and the PropertyChanged event. Its main members are as follows:

constructor function:

Animation (target, Duration, fps): Used to construct a Animation object, initialize some values, don't say much.

Property:

TARGET:RW property, Dom element type. A DOM element that represents the role of animation, such as the color-changing object in ColorAnimation.

DURATION:RW property, number type, default value is 1. Indicates the time required for this animation to "play" from one to the beginning, in seconds.

FPS:RW property, number type, must be an integer and the default value is 25. The FPS is the frame per second, and the number of frames in each second. Indicates how many times a second animation needs to be changed.

Animationtarget: Write-only property (Bad Practice), String type. Find target by ID.

IsActive: Read-only property, Boolean type. See if animation is active (play or pause state).

IsPlaying: Read-only property, Boolean type. See if the animation is in playback state.

PercentComplete: Read-only property, number type. View the percentage that animation has played.