jquery's animate function learning record _jquery

A long time ago I was very interested in the implementation of the jquery animate, but I was very busy until a few days before the Dragon Boat Festival holiday to study.

Each animation transition effect of jquery.animate is achieved through the easing function. Two such functions are preset in jQuery1.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;
}
}

It can be inferred from the parameter name that Firstnum is the initial value. If you are better at math, you can see that the linear function is a straight line equation; If you have a better physics, you can see that it is the displacement equation of uniform motion (I am not good at math and physics, I am reminded of ...). ）。 So diff and P are speed and time.

And look at the prototype of Jquery.animate:

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

The parameters are described as follows:

Prop: A set of style attributes and their values that are included as animation properties and end values.
Speed: Animation time length.
Easing: The name of the erase effect to use.
Callback: The function that is executed when the animation completes.

The current style value (firstnum) of the element can be obtained, and the animation length (p) is duration, and the final style value is prop. In theory, animation speed (diff) can be calculated. This, however, necessarily requires another function to perform the operation. It is obviously unwise to do so. Then 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.easing[specialeasing | | defaulteasing] (this.state, N, 0, 1, this.options.duration);

You can see that the value of the P parameter, which is the value of this.state, is actually the time schedule of the animation from the context. The parameters of Firstnum and diff are all written dead, respectively, 0 and 1. The secret of the easing function is completely untied, p, Firstnum, diff are percentages rather than actual values, and the return value of the easing function is the progress of the displacement. The diff value is 1, which means that the animation runs at 1 time times the speed. After calculating the displacement progress, the current displacement value can be calculated by the "Initial value + (final value-initial value) x progress":

This.now = This.start + ((this.end-this.start) * this.pos);

A displacement operation is performed at a certain time (in jquery, 13ms), until the difference between the current time and the initial time is greater than the length of the animation, which is the jquery.animate of the setinterval process.

As a general idea, the animation is implemented by adding a specific number to a value at a certain time by setinterval until the value reaches the limit. The main problem is that different browsers run at different speeds, resulting in a difference in the speed of the animation, is generally more slow under IE, Firefox faster. And Jquery.animate is the current time to determine the displacement value, a moment of displacement is always fixed, so the animation speed will not be different.