requestanimationframe用法一二

Posted 2020-08-20 mycoke

基本语法

可以直接调用，也可以通过window来调用，接收一个函数作为回调，返回一个ID值，通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。

 

1	requestAnimationFrame(callback)//callback为回调函数

一个简单的例子

模拟一个进度条动画，初始div宽度为1px,在step函数中将进度加1然后再更新到div宽度上，在进度达到100之前，一直重复这一过程。

为了演示方便加了一个运行按钮（看不到例子请刷新）。

<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>

<input type="button" value="Run" id="run"/>

 

复制代码

 

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var start = null;

var ele = document.getElementById("test");

var progress = 0;

 

function step(timestamp) {

    progress += 1;

    ele.style.width = progress + "%";

    ele.innerhtml=progress + "%";

    if (progress < 100) {

        requestAnimationFrame(step);

    }

}

requestAnimationFrame(step);

document.getElementById("run").addEventListener("click", function() {

    ele.style.width = "1px";

    progress = 0;

    requestAnimationFrame(step);

}, false);

下面是由Paul Irish及其他贡献者放在GitHub Gist上的代码片段，用于在浏览器不支持requestAnimationFrame情况下的回退，回退到使用setTmeout的情况。当然，如果你确定代码是工作在现代浏览器中，下面的代码是不必的。

(function() {     var lastTime = 0;     var vendors = [‘ms‘, ‘moz‘, ‘webkit‘, ‘o‘];     for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {         window.requestAnimationFrame = window[vendors[x] + ‘RequestAnimationFrame‘];         window.cancelAnimationFrame = window[vendors[x] + ‘CancelAnimationFrame‘] || window[vendors[x] + ‘CancelRequestAnimationFrame‘];     }     if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {         var currTime = new Date().getTime();         var timeToCall = Math.max(0, 16 - (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);     }; }());