Analysis on the implementation principle of Javascript animation and javascript Animation

Analysis on the implementation principle of Javascript animation and javascript Animation

Assume that an animation function is required to change the width of a div from 100px to 200px. The written code may be as follows:
Copy codeThe Code is as follows:
<Div id = "test1" style = "width: 100px; height: 100px; background: blue; color: white;"> </div>
Function animate1 (element, endValue, duration ){
Var startTime = new Date (),
StartValue = parseInt (element. style. width ),
Step = 1;

Var timerId = setInterval (function (){
Var nextValue = parseInt (element. style. width) + step;
Element. style. width = nextValue + 'px ';
If (nextValue> = endValue ){
ClearInterval (timerId );
// Time used to display the animation
Element. innerHTML = new Date-startTime;
}
}, Duration/(endValue-startValue) * step );
}

Animate1 (document. getElementById ('test1'), 200,100 0 );

The principle is to increase 1px at intervals until 200px. However, it takes more than 1 s to display the animation after the animation ends (generally about 1 5s ). The reason is that setInterval does not strictly guarantee the execution interval.

Is there any better way? Let's take a look at a primary school math question:
Copy codeThe Code is as follows:
The distance between building A and Building B is 100 meters. A person walks from building A to Building B at A constant speed and reaches the destination in five minutes. How far is he from building A in 3rd minutes?

The formula for calculating the distance at a certain time in a constant speed is: distance * Current Time/time. The answer should be 100*3/5 = 60.

This question is inspired by the fact that the distance at a certain time point can be calculated using a specific formula. Similarly, the value at a certain time point in the animation process can also be calculated by formula, rather than accumulating:

Copy codeThe Code is as follows:
<Div id = "test2" style = "width: 100px; height: 100px; background: red; color: white;"> </div>
Function animate2 (element, endValue, duration ){
Var startTime = new Date (),
StartValue = parseInt (element. style. width );

Var timerId = setInterval (function (){
Var percentage = (new Date-startTime)/duration;

Var stepValue = startValue + (endValue-startValue) * percentage;
Element. style. width = stepValue + 'px ';

If (percentage> = 1 ){
ClearInterval (timerId );
Element. innerHTML = new Date-startTime;
}
}, 13 );
}

Animate2 (document. getElementById ('test2'), 200,100 0 );

After this improvement, we can see that the animation execution time is limited to a maximum error of 10 ms. However, the problem has not been completely solved yet. Check the test2 element in the browser development tool to find that the final width of test2 may not exceed PX. Check the code of the animate2 function and you will find that:

1. The percentage value may be greater than 1, which can be solved by the maximum value of Math. min.
2. even if the percentage value is not greater than 1, as long as endValue or startValue is a decimal number, the value of (endValue-startValue) * percentage may also produce errors because the Javascript decimal operation is not accurate enough. In fact, we only need to ensure the accuracy of the final value, so when the percentage is 1, you can directly use endValue.

Therefore, the code of the animate2 function is changed:
Copy codeThe Code is as follows:
Function animate2 (element, endValue, duration ){
Var startTime = new Date (),
StartValue = parseInt (element. style. width );

Var timerId = setInterval (function (){
// Ensure the percentage is not greater than 1
Var percentage = Math. min (1, (new Date-startTime)/duration );

Var stepValue;
If (percentage> = 1 ){
// Ensure the accuracy of the final value
StepValue = endValue;
} Else {
StepValue = startValue + (endValue-startValue) * percentage;
}
Element. style. width = stepValue + 'px ';

If (percentage> = 1 ){
ClearInterval (timerId );
Element. innerHTML = new Date-startTime;
}
}, 13 );
}

Another question is: Why is the setInterval interval set to 13 ms? The reason is that the current display update rate generally does not exceed 75Hz (that is, 75 refresh times per second, that is, refresh once every 13 ms), and the synchronization effect between the interval and the update rate is better.