JQuery-1.9.1 source code analysis series (15) animation processing-easing animation core Tween, jquery-1.9.1tween

JQuery-1.9.1 source code analysis series (15) animation processing-easing animation core Tween, jquery-1.9.1tween

In the jQuery internal function Animation, createTweens () is called to create a easing Animation group. After the Animation group is created, the result is:

　　

The above animation group contains four atomic animations. The information of each atomic animation is included.

The createTweens function is actually a function in the array that calls tweeners ["*"] (actually there is only one element ).

    function createTweens( animation, props ) {        jQuery.each( props, function( prop, value ) {            var collection = ( tweeners[ prop ] || [] ).concat( tweeners[ "*" ] ),            index = 0,            length = collection.length;            for ( ; index < length; index++ ) {                if ( collection[ index ].call( animation, prop, value ) ) {                    // we're done with this property                    return;                }            }        });    }

Check the tweeners ["*"] [0] function again. The main code is as follows:

Function (prop, value) {var end, unit, // gets the animation structure tween = this based on the css feature value.CreateTween(Prop, value), parts = rfxnum.exe c (value), target = tween. cur (), start = + target | 0, scale = 1, maxIterations = 20; if (parts) {end = + parts [2]; unit = parts [3] | (jQuery.css Number [prop]? "": "Px"); // non-pixel unit attribute if (unit! = "Px" & start) {// starts iteration from a non-zero start point, // for the current attribute, if it uses the same unit, this process will be insignificant // The backup is end, or a simple constant start = jQuery.css (tween. elem, prop, true) | end | 1; do {// if the previous iteration is zero, double until we get * things * // use the string multiplier, so we will not accidentally see that scale does not change scale = scale | ". 5 "; // adjust and run start = start/scale; jQuery. style (tween. elem, prop, start + unit); // update the scale. The default value is 0 or NaN from tween. cur () Get // jump out of the loop. If the scale is not changed or completed, or we already think it is enough} while (scale! = (Scale = tween. cur ()/target) & scale! = 1 & -- maxIterations );}Tween. unit= Unit; tween. start = start;// If + =/-= mark is provided, it indicates that we are making a relative animation.Tween. end = parts [1]? Start + (parts [1] + 1 )*End: end;} Return tween;}]};

We can see that all animations except the hide/show animation are passed through the tweeners ["*"] [0] function, which encapsulates the animation group. There are several key Arrays: start/end/unit. In particular, it takes some effort to obtain the animation start value of a non-pixel unit.

Another key point is that this. createTween is used to obtain the basic animation features of a single css feature. In animation. createTween, jQuery. Tween is called directly for processing. Next we will explain in detail.

　　

A. jQuery. Tween

The structure of jQuery. Tween is similar to that of jQuery.

function Tween( elem, options, prop, end, easing ) {    return new Tween.prototype.init( elem, options, prop, end, easing );}jQuery.Tween = Tween;Tween.prototype = {    constructor: Tween,    init: function( elem, options, prop, end, easing, unit ) {        this.elem = elem;        this.prop = prop;        this.easing = easing || "swing";        this.options = options;        this.start = this.now = this.cur();        this.end = end;        this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );    },    cur: function() {...},    run: function( percent ) {...}};Tween.prototype.init.prototype = Tween.prototype;

Is there a familiar catch.

The cur function is used to obtain the current css feature value.

Cur: function () {var hooks = Tween. propHooks [this. prop]; return hooks & hooks. get? Hooks. get (this): Tween. propHooks. _ default. get (this );},View Code

　　

The run function processes each feature value of an ongoing animation at each animation time point.

There are two steps:

1. Calculate the current animation progress pos and current animation position now

// Use jQuery if there is an animation duration. easing calculates the easing animation progress eased. Otherwise, the Progress eased is percent // and the current animation position nowif (this. options. duration) {this. pos = eased = jQuery. easing [this. easing] (percent, this. options. duration * percent, 0, 1, this. options. duration);} else {this. pos = eased = percent;} this. now = (this. end-this. start) * eased + this. start;

2. Set the css feature value based on the current progress

// Set the css feature value if (hooks & hooks. set) {hooks. set (this);} else {Tween. propHooks. _ default. set (this);} return this;

　　

It can be seen that this step is the core of the entire animation:

Creates a easing animation group. Each atomic animation contains various necessary parameters and animation functions for each atomic css attribute animation.

　　

The difference is that hide/show directly creates this easing animation group in defaultPrefilter (all attributes are px units by default). Other animations create a easing animation group when createTweens is called.

Remember that there is a tick function when creating an animation. This tick function will be called at every step.

        tick = function() {            ...                length = animation.tweens.length;            for ( ; index < length ; index++ ) {                animation.tweens[ index ].run( percent );            }　　　　　　　...        }

No. Each atomic animation has its own run function to execute its own animation, which was created when the animation group was created.

 

Now, let's sort out the entire core animation process:

　　1. Call jQuery. speed according to the parameters to obtain the animation-related parameters and obtain an object similar to the following. The animation execution function doAnimation is generated and pushed to the queue using. queue and executed immediately.

Opt = {complete: fnction (){...}, // callback duration for animation execution completion: 400, // animation execution duration easing: "swing", // animation effect queue: "fx", // animation queue old: false/fnction (){...},}

2. in doAnimation, call to create a delayed object, use the promise method of the delayed object to Construct an animation object animation (delayed object + animated feature list), and add the callback function after the animation is executed to the animation.

3. Call the jQuery internal function proFilter to correct the css feature name so that it can be recognized by the current browser and break down some composite css features (such as padding into paddingTop/Right/Bottom/Left ).

4. Calling the jQuery internal function defaultPrefilter for animation can be used to perform normal operation of the precondition for condition correction: for example, a specific value is required for the height/width animation display and overflow. Note that

For show/hide animations, genFx was previously called to extract the css features of the animations to be executed, and the animation object animation was directly called in the defaultPrefilter function. createTween adds a corresponding easing animation object (including animation Parameters and animation functions such as run) to each CSS animation attribute to the animation group animation. tweens

5. call the jQuery internal function createTweens to use animation for each css animation feature in addition to show/hide. createTween creates a easing animation object (including animation Parameters and animation functions such as run), and pushes it into the animation group animation. tweens

6. Start the animation timing and execute it at each time point.TickFunction to set the moving value for the corresponding css feature value.

The progress percentage of css feature value movement is

remaining = Math.max( 0, animation.startTime + animation.duration - currentTime ),temp = remaining / animation.duration || 0,percent = 1 - temp

The obtained percent is time-based. Set the correct css feature value to the percent to refresh the animation display.

8. Call the callback after the animation is completed.

　　

If you think this article is good, click [recommendation] in the lower right corner ]!