requestanimationframe用法一二

基本语法

可以直接调用,也可以通过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);
     };
}());

 

转载于:https://www.cnblogs.com/mycoke/p/6080492.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值