BOM Series II timer requestAnimationFrame, Mitsubishi q Series Timer

BOM Series II timer requestAnimationFrame, Mitsubishi q Series Timer

Introduction

Timers have always been the core technology of javascript animation. The key to writing an animation loop is to know how long the latency is. On the one hand, the cycle interval must be short enough to make different animations appear smooth and smooth; on the other hand, the cycle interval must be long enough to ensure that the browser has the ability to render changes.

Most computer monitors refresh at a frequency of 60Hz, which is about 60 times a second. Most browsers impose restrictions on the repainting operation, which does not exceed the repainting frequency of the display, because the user experience will not be improved even if it exceeds that frequency. Therefore, the optimal cycle interval of the smoothest animation is lOOOms/60, which is about 16.6 ms.

The problem with setTimeout and setInterval is that they are not accurate. Their internal Running Mechanism determines that the time interval parameter only specifies the time for adding the animation code to the browser UI thread queue to wait for execution. If other tasks have been added before the queue, the animation code will be executed after the previous task is completed.

RequestAnimationFrame adopts the system time interval to maintain the optimal rendering efficiency. It does not overdraw or increase overhead because of the short interval. It does not slow down the animation because the interval is too long, allows a unified refresh mechanism for various webpage animation effects, which saves system resources, improves system performance, and improves visual effects.

Features

[1] requestAnimationFrame gathers all DOM operations in each frame and completes the re-painting or backflow. The re-painting or backflow interval closely follows the refreshing frequency of the browser.

[2] in hidden or invisible elements, requestAnimationFrame will not be repainted or reflux, which of course means less cpu, gpu, and memory usage.

[3] requestAnimationFrame is an API provided by the browser for animation. When running, the browser automatically calls the optimization method. If the page is not activated, the animation will be automatically paused, effectively saves CPU overhead

Use

The use of requestAnimationFrame is similar to that of settimeout, but you do not need to set the time interval. RequestAnimationFrame uses a callback function as the parameter, which is called before the browser repainting. It returns an integer indicating the timer number. This value can be passed to cancelAnimationFrame to cancel the execution of this function.

RequestID = requestAnimationFrame (callback); // The console outputs 1 and 0var timer = requestAnimationFrame (function () {console. log (0) ;}); console. log (timer); // The cancelAnimationFrame method is used to cancel the timer // The console does not output var timer = requestAnimationFrame (function () {console. log (0) ;}); cancelAnimationFrame (timer );

You can also use the return value to cancel the cancellation.

var timer = requestAnimationFrame(function(){console.log(0);}); cancelAnimationFrame(1); 

Compatible

IE9-the browser does not support this method. You can use setTimeout for compatibility.

if(!window.requestAnimationFrame){var lastTime = 0;window.requestAnimationFrame = function(callback){var currTime = new Date().getTime();var timeToCall = Math.max(0,16.7-(currTime - lastTime));var id = window.setTimeout(function(){callback(currTime + timeToCall);},timeToCall);lastTime = currTime + timeToCall;return id;}} if (!window.cancelAnimationFrame) {window.cancelAnimationFrame = function(id) {clearTimeout(id);};} 

Application

Now we use the setInterval, setTimeout, and requestAnimationFrame methods to create a simple inbound effect.

[1] setInterval

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div><button id="btn">run</button><script>var timer;btn.onclick = function(){clearInterval(timer);myDiv.style.width = '0';timer = setInterval(function(){if(parseInt(myDiv.style.width) < 500){myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%'; }else{clearInterval(timer);} },16);}</script> 

[2] setTimeout

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div><button id="btn">run</button><script>var timer;btn.onclick = function(){clearTimeout(timer);myDiv.style.width = '0';timer = setTimeout(function fn(){if(parseInt(myDiv.style.width) < 500){myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%';timer = setTimeout(fn,16);}else{clearTimeout(timer);} },16);}</script> 

[3] requestAnimationFrame

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div><button id="btn">run</button><script>var timer;btn.onclick = function(){myDiv.style.width = '0';cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){if(parseInt(myDiv.style.width) < 500){myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%';timer = requestAnimationFrame(fn);}else{cancelAnimationFrame(timer);} });}</script> 

Now, the code is introduced here. Next we will introduce the timer application (clock, countdown, stopwatch, and alarm clock) in the third part of the BOM series)

The above section describes the timer requestAnimationFrame in the second part of BOM series. I hope it will help you. If you have any questions, please leave a message and I will reply to you in time. Thank you very much for your support for the help House website!