Simple Analysis of jQuery. animate

I was very interested in implementing jQuery. animate a long time ago, but I was very busy some time ago. I didn't have time to study it until the last day of the Dragon Boat Festival holiday.

Each animation transition effect of jQuery. animate is achieved throughEasing 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 have a good knowledge in mathematics, you can find that the linear function is a linear equation. If you have a good physics, you can find that it is a displacement equation of constant speed motion (I have not learned well in mathematics and physics, and someone else reminded me of it ......). Then diff and p are the speed and time.

Let's 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 serve as animation attributes and end values.
• Speed: Specifies the animation duration.
• Easing: the name of the erased effect to be used.
• Callback: The 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. However, this requires another function to perform operations. It is obviously unwise to do so. Let's look at the code for calling 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);

We can find that the value of p is the value of this. state, and it is known from the context that it is actually the time progress of the animation. The firstNum and diff parameter values are all written to death, respectively, 0 and 1. The secret of the easing function is completely unlocked,P, firstNum, and diff are percentages.Instead of actual values,The Return Value of the easing function is the displacement progress.. The diff value is 1, which means the animation is run at a speed of 1 times. After calculating the displacement progress,Initial Value + (final value-Initial Value) x progress"To calculate the current displacement value:

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

Use setIntervalA displacement operation is performed at a certain time (13 ms 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.

The conventional approach is to add a specific value to a value through setInterval until the value reaches the limit value. The main problem is that different browsers run at different speeds, resulting inThere are differences in animation speedIn general, IE is slower, and Firefox is faster. JQuery. animate determines the displacement value based on the current time. The displacement value at a certain time point is always fixed, so there is no difference in the animation speed.

Source: http://www.ued163.com