Detailed explanation and analysis of JavaScript animation and motion algorithms (II. Time Precision of JavaScript animation)

Iii. Time Accuracy

First, we must know the reason for the Time Precision problem.

If you are not familiar with the Javascript single-threaded mechanism or the execution mechanism of setinterval and setTimeout functions, I hope you can take a look at this article.Article: How JavaScript timers work [copy]. Then you can read this article at http://icolin.org/javascript/settimeout-bug-in-ie-with-winxp.html. The first article helps you understand the Javascript single-thread mechanism and the execution mechanism of setinterval and setTimeout functions. In the second article, icolin kids shoes have described in detail the problem of time precision, he and we have the same problem here, so I will not repeat it. Finally, we must look at omiga's article about 16 Ms accuracy in Javascript clock.

(I hope you have read the three articles so that you can better understand the following content)

Now I believe that you have understood the cause of the problem. I will make a summary here:

When JavaScript animation is running in the browser, time errors are generated. The error is caused by the system environment, browser environment,ProgramCalculation time, and other human causes (Here we exclude the error caused by human errors ). Then the system environment includes computer hardware and computer operating systems. The browser environment includes the browser kernel and JavaScript interpretation engine. Although the computing time of the program can be ignored, however, the program may cause time delay due to the Javascript single-threaded mechanism. Therefore, it is very difficult to accurately set the time to milliseconds. jquery also considers this issue, so she uses the message queue mechanism to eliminate this error as much as possible, but the effect is not satisfactory. Because the time precision of the program itself is difficult to control, if you use the program itself to control the time precision, it is like using oil to extinguish the fire... It is caused by many force majeure and external force factors. So we can now set the animation time to seconds.

Here, we will discuss the issue of time accuracy first. If you have a better solution, I hope you can provide guidance. Thank you very much.

 

Here, by the way, we will explain(Why is it explained at a speed of 6 Px/30 ms)This problem.

First, let's talk about tween.AlgorithmI have seen a very detailed explanation from the flash_mx programming and creative implementation by cloudgamer's Coach Robert tpenner. URL: http://www.robertpenner.com/easing. If a friend who wants to make flash creativity and animation recommends this book, I have read a part of it. I have made a good speech and commented on this book online. I have a Chinese version of PDF here, contact me if necessary.

In flash, the animation duration is calculated in frames. Duration of each frame * The number of frames indicates the total animation time. In JavaScript, our frame length is actually the second parameter of setinterval and setTimeout. The number of frames is

 
1:Math. Prototype. lineartween =Function(T, B, C, D ){
 

 
2:ReturnT * C/D + B;
 

 
3:}
 

In the above linear algorithm, D and T (D indicates the total number of frames, and t indicates the number of frames that have passed ).

So if you simply think T is time at the beginning, you may be stuck in the same painful confusion as me and cannot extricate yourself for half a day. Let's review this section.Code.

1:$ =Function(ID ){Return TypeofId ="String"? Document. getelementbyid (ID): Id}
 

 
2: 
 

 
3:/* Des: tween algorithm.
 

 
4:T: The time when the animation has been executed (the actual number of executions/frames)
 

 
5:B: Start position
 

 
6:C: Termination location
 

 
7:D: The elapsed time from the starting position to the ending Position (actual number of executions/frames )*/
 

 
8:Tween = {
 

9:Linear:Function(T, B, C, D ){
 

 
10:ReturnT * C/D + B;
 

 
11:}
 

 
12:}
 

 
13: 
 

 
14:Move = {
 

 
15:Movetype:Function(Mvtp ){ReturnMvtp &&Typeof(Mvtp) = "string" & tween [mvtp]? Mvtp:"Linear"},
 

 
16: 
 

17:Startmove:Function(Mvobj, mvtp, T, B, C, D ){
 

 
18:T? T: T = 0; B? B: B = 0; C? C: c = 300; D? D: D = 50;
 

 
19:$ (Mvobj). style. Position ="Relative"| $ (Mvobj). style. Position ="Absolute" 
 

 
20:? 1: $ (mvobj). style. Position ="Relative";
 

 
21:// Repeat the function to change the element position every 30 milliseconds
 

 
22:Mvtimer = setinterval (Function(){
 

23:// Determine whether the animation execution time (number of times/number of frames) is smaller than the total time. If yes, continue to execute the change position function. Otherwise, clear the interval.
 

 
24:T <= d
 

 
25:?Function() {$ (Mvobj). style. Left = parseint (Tween [move. movetype (mvtp)] (T, B, C, D) +"PX"; T ++ ;}()
 

 
26:: Clearinterval (mvtimer );
 

 
27:}, 30)
 

 
28:}
 

 
29:}
 

 
30: 
 

 
31:Move. startmove ("Movelinear");
 

Here, the number of animation frames is d = 50, and the number of frames passes through is T. When T <= D, the Animation continues to be executed. The interval between frames is 30 milliseconds, this element will be moved from the left margin of the window to the 300 margin (the default margin of the body is ignored here ).

I will first come here today, and next time I will analyze the Tween algorithm. I will try my best to go through this interesting thing.