JQuery's animate function learning record

Interest in the implementation of jQuery animate has been high for a long time, but it was a busy time until the Dragon Boat Festival holiday a few days ago.

Each of the animation transitions in jQuery. Animate is implemented using the easing function. Two such functions are preset in query1.4.2:

easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
}

From the parameter name, you can vaguely infer that firstNum is the initial value. If you're good at math, you can see that linear functions are linear equations; If you are good at physics, you will find that it is the displacement equation of uniform motion. . So diff and p are speed and time.

And then there's jQuery. Animate:

Animate: function(prop, speed, easing, callback)

The description of each parameter is as follows:

Prop: a collection of style properties and their values as animation properties and final values.
Speed: animation duration.
Easing: the name of the erasure effect to use.
Callback: a function that executes when the animation is complete.

The current style value of the element (firstNum) can be obtained, the animated duration (p) is duration, and the final style value is prop. Theoretically, the animation speed (diff) can be calculated. But that's going to require another function. This is clearly unwise. Now look at the code that calls the easing function (in jQuery. Fx. Prototype.step) :

Var t = now();
.
Var n = t-this.starttime;
This.state = n/this.options.duration;
.
This. Pos = jQuery. Much [specialEasing | | defaultEasing] (this state, n, 0, 1, enclosing the options. The duration).

You can see that the value of the p parameter, which is the value of this.state, is actually the timeline of the animation from the context. The parameters of firstNum and diff are both dead, 0 and 1, respectively. The easing function's secret is completely unlocked. P, firstNum, and diff are all percentages rather than actual values, and the return value of the easing function is the progress of the displacement. The value of diff is 1, which means that the animation runs twice as fast. After the displacement progress is calculated, the current displacement can be calculated by "initial value + (final value - initial value) x progress" :

This. Now = this. Start + ((this. End - this. Start) * this.pos);

The execution of jquery.animate is performed every time (13ms in jQuery) through setInterval until the difference between the current time and the initial time is greater than the animation time.

As a general idea, animation works like this: add a specific value to a value at regular intervals through setInterval until it reaches the limit value. The main problem with this is that different browsers run at different speeds, resulting in different animation speeds, which are generally slower in IE and faster in Firefox. The displacement value of jQuery. Animate is determined by the current time, and the displacement value at a certain time is always fixed, so there is no difference in animation speed.