Learn to record the animate function of jquery

It was a long time since the implementation of jquery animate was very interesting, but the previous period was very busy, until a few days ago the Dragon Boat Festival holiday only time 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 your math is better, you can see that the linear function is a straight line equation; If your physics is better, you can see that it is the displacement equation of uniform motion (I didn't learn maths and physics well, I was reminded by others ...). ）。 Then diff and P are speed and time. Front-End UI sharing

And look at Jquery.animate's prototype:

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

The parameters are described as follows:

• Prop: A set of style properties and their values that are included as animated and final values.
• Speed: The length of the animation.
• Easing: The name of the erase effect to use.
• Callback: The function that is executed when the animation finishes.

The current style value of the element (Firstnum) can be obtained, the animation duration (p) is duration, and the final style value is prop. In theory, animation speed (diff) can be calculated. But this inevitably requires another function to perform the operation. It is obviously unwise to do so. Then look at the associated 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);

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

this.now = this.start + ((this.end - this.start) * this.pos);Front-End UI sharing

This is the execution of jquery.animate by SetInterval every time (13ms in jquery) to perform a displacement operation until the difference between the current time and the initial time is greater than the length of the animation.

According to the general idea, the animation is implemented in such a way: by setinterval each time at a certain value to add a certain number of values until the value reaches the limit value. The main problem is that different browsers run at different speeds, resulting in animation speed differences , usually under IE slow, Firefox faster. Jquery.animate is the current time to determine the displacement value, the displacement value of a certain moment is always fixed, so the animation speed will not be different.