jQuery’s animate function learning record_jquery

I have been very interested in the implementation of jQuery animate for a long time, but I was very busy some time ago and did not have time to study it until the Dragon Boat Festival holiday a few days ago.

Each animation transition effect of jQuery.animate is achieved through the easing function. There are two such functions 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 vaguely inferred from the parameter name that firstNum is the initial value. If you are good at mathematics, you can find that the linear function is a straight line equation; if you are good at physics, you can find that it is the displacement equation of uniform motion (I am not good at mathematics and physics, but someone else reminded me of……). Then diff and p are speed and time.

Look at the prototype of jQuery.animate again:

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

The description of each parameter is as follows:

prop: A set containing style properties and their values ​​as animation properties and final values.
speed: animation duration.
easing: The name of the erasure effect to use.
callback: function executed when the animation is completed.

The current style value (firstNum) of the

element can be obtained, the animation duration (p) is duration, and the final style value is prop. Theoretically, the animation speed (diff) can be calculated. But this necessarily requires another function to perform calculations. This is obviously unwise. Let’s take a look at the relevant code for calling the easing function (located 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);

It can be found that the value of the p parameter is also the value of this.state. From the context, we know that it is actually the time progress of the animation. The parameter values ​​of firstNum and diff are hard-coded, which are 0 and 1 respectively. Now the secret of the easing function is completely revealed. p, firstNum, and diff are all percentages rather than actual values. The return value of the easing function is the progress of the displacement. The value of diff is 1, which means the animation runs at 1x speed. After calculating the displacement progress, the current displacement value can be calculated by "initial value (final value - initial value) × progress":

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

Use setInterval to perform a displacement operation every certain time (13ms in jQuery) until the difference between the current time and the initial time is greater than the animation duration. This is the execution process of jQuery.animate.

According to the conventional idea, the animation is implemented as follows: using setInterval to increase a certain value by a specific value at a certain time until the value reaches the limit value. The main problem with this is that different browsers run at different speeds, resulting in differences in animation speeds. Generally, IE is slower and Firefox is faster. jQuery.animate determines the displacement value based on the current time. The displacement value at a certain moment is always fixed, so there will be no difference in animation speed.