- Animation timer setInterval uniform implementation Why not uniform?
- window.requestAnimationFrame()
First, to achieve uniform animation timer setInterval Why not uniform?
The above question is not to calculate the motion of each frame by calculating the time stamp, but directly superimposed on each movement distance using a timer in accordance with established intervals way, this is mainly intended to resolve the browser redrawing the page timer and lead to inaccurate sex, first look at an example:
1 <style> 2 #a{ 3 width: 100px; 4 height: 100px; 5 background-color:#faf; 6 position: absolute; 7 } 8 </style> 9 <div id="a"></div> 10 <script> 11 var aDom = document.getElementById('a'); 12 function move(){ 13 aDom.style.left = aDom.offsetLeft + 100 + 'px'; 14 if(aDom.offsetLeft > 800){ 15 clearInterval(timer); 16 } 17 } 18 var timer = setInterval(move,10); 19 </script>
Example 10 ms timer 100px every mobile element, in the sense of this timer, the motion is uniform, but only 10 milliseconds, the timer function is executed every movement of the execution queue every add, and modify elements performing property value, but the actual rendered to the page is refreshed 60 times a second to complete redrawing, what problems this time difference would it have?
If you do not understand the browser js thread, the proposal is necessary to understand: to understand multi-threaded and single-threaded operating mechanism of JavaScript browser UI
Continuing with the following analysis:
The first moving point: 100px - actual motion time (to render pages): 16.667 ms - actually modifies the element attribute values of time 10 ms;
The second movement point: 300px by - actual motion (to render the page) time: 33.334 ms - actually modifies the attribute value of the element time 20 ms (200px), the actual modification time element attribute values of 30 milliseconds (300px by);
Third moving point: 500px - actual motion (to render the page) time: 50.001 ms - actually modifies the attribute value of the element of time 40 milliseconds (400px), the actual modification time element attribute values of 50 milliseconds (500px);
Fourth moving point: 600px - actual motion (to render the page) time: 66.668 ms - actually modifies the attribute value of the element of time 60 ms (600px);
Fifth moving point: 800px - actual motion (to render the page) time: 83.335 ms - actually modifies the attribute value of the element time 70 ms (700px), the actual modification time element attribute values 80 ms (800px);
Through the above analysis, had to perform logic timers, motion eight times the animation should be uniform to reach the end, in fact, we used five times a non-uniform manner to reach the end.
For these reasons we have adopted in the realization of the animation is the execution time ratio of ways to implement elements of the movement:
. 1 var H = ( new new a Date ()) the getTime ();. // record the initial time stamp 2 var ratio = null ; . 3 var Speed = null ; . 4 var T = the setInterval ( function () { . 5 var performH = ( new new a Date . ()) the getTime (); // get the current time stamp . 6 ratio = (performH -H) / 80; // currently used time / animation execution implementation . 7 Speed ratio * = 800; // use this calculated time ratio element moving position . 8 IF (ratio <. 1 ) { . 9 aDom.style.left = speed + "px"; 10 }else{ 11 aDom.style.left = 800 + "px"; 12 clearInterval(t); 13 } 14 },1000/60);
This approach is theoretically closest to the uniform motion, but still be affected by js execution stack and browser rendering redraw rate, provided window.requestAnimationFrame in HTML5 () API to solve this problem, since it is bound to HTML5 there are compatibility issues, specific analysis in the next section.
二、window.requestAnimationFrame()
MDN Manual: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame#Notes
window.requestAnimationFrame () tells the browser wants to perform once the animation and ask the browser calls the specified callback function updates the animation before the next redraw.
//语法 window.requestAnimationFrame(callback);
callback (callback): the browser to redraw before the next execution, when the callback execution window.requestAnimationFrame () callback function will pass internal DOMHighResTimeStampparameters, DOMHighResTimeStamp parameter indicates the currently requesAnimationFrame sort callback function is triggered time. Can be understood as a time stamp, ms (milliseconds) units.
1 //上面的示例基于requestAnimationFrame实现 2 var startA = null; 3 function a(timestamp){ 4 if(!startA) startA = timestamp; 5 var progress = timestamp - startA; 6 console.log(progress); 7 aDom.style.left = Math.min(progress / 80 * 800, 800) + 'px'; 8 if(progress < 80){ 9 window.requestAnimationFrame(a); 10 } 11 } 12 window.requestAnimationFrame(a);
window.requestAnimationFrame () is an HTML5 API that is bound to have compatibility issues:
Package compatibility window.requestAnimationFrame ():
1 window.requestAnimFrame = (function(){ 2 return window.requestAnimationFrame || 3 window.webkitRequestAnimationFrame || 4 window.mozRequestAnimationFrame || 5 function(callback){ 6 window.setTimeout(callback, 1000/60); 7 } 8 })();
Even with setInterval () to achieve compatibility, but does not represent comprising requestAnimationFrame () accuracy. After performing window.requestAnimationFrame to () returns a long integer, the request ID, callback list unique identifier. A non-zero value, this value can be used to give window.cancelAnimationFrame () to cancel the callback function.
Compatible window.cancelAnimationFrame ():
1 window.cancelAnimFrame = (function(){ 2 return window.cancelAnimationFrame || 3 window.webkitCancelAnimationFrame || 4 window.mozCancelAnimationFrame || 5 function(id){ 6 window.clearTimeout(id); 7 } 8 })();