码迷,mamicode.com
首页 > 其他好文 > 详细

第三十九课:requestAnimationFrame详解

时间:2015-01-08 17:10:55      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:

大家应该都知道,如果一个页面运行的定时器很多,无论你怎么优化,最后肯定会超过指定时间才能完成动画。定时器越多,延时越严重。

为此,YUI,kissy等采用中央队列的方式,将定时器减少至一个。浏览器厂商也因此原生支持了requestAnimationFrame方法,此方法基本上能保证每秒刷新60次。但是此方法在还没形成标准之前,很多低版本浏览器是不支持的,比如:IE9以及以下版本,不过谷歌和火狐都用私有的方法名实现了requestAnimationFrame方法。比如:谷歌:webkitRequestAnimationFrame,,火狐:mozRequestAnimationFrame。形成标准后,IE10才开始支持,由于IE10支持的是标准的requestAnimationFrame方法,因此它没有私有前缀,所以并不存在msRequestAnimationFrame。

我们先来看一下requestAnimationFrame方法是如何使用的?

var startTime,duration = 3000,requestID;

function animate(now){   //webkitRequestAnimationFrame方法会给回调函数中传入一个当前时间的参数。

  var per = (now - startTime) / duration;

  if(per >=1){

    //动画结束

  }else{

    div.style.left = Math.round(600*per) + "px";

    window.webkitRequestAnimationFrame(animate);   //此方法调用一次只会重绘一次动画,如果需要连续的动画,则需要重复调用

  }

}

function start(){

  startTime = Date.now();

  requestID = window.webkitRequestAnimationFrame(animate);  //此方法可以传入两个参数,第一个是回调,第二个是执行动画的元素节点(可选),返回一个ID。

}

div.onclick = start;

上面的这个例子,是针对chrome浏览器实现的。

那么,我们如何来写出兼容性的写法呢?

第一个版本:

window.requestAnimationFrame = (function(){

  return window.requestAnimationFrame ||    //IE10以及以上版本,以及最新谷歌,火狐版本

      window.webkitRequestAnimationFrame ||   //谷歌老版本

       window.mozRequestAnimationFrame ||   //火狐老版本

        function(callback){    //IE9以及以下版本

          window.setTimeout(callback , 1000/60);  //这里强制让动画一秒刷新60次,这里之所以设置为16.7毫秒刷新一次,是因为requestAnimationFrame默认也是16.7毫秒刷新一次。

        }

})();

上面这个兼容性写法,有几个问题,第一个:没有解决cancelAnimationFrame方法的兼容性写法。第二个:强制让IE9-浏览器,动画绘制间隔为16.7ms,但是这些浏览器的绘制间隔并不都是这个值。第三个:火狐老版本的mozRequestAnimationFrame方法跟标准的requestAnimationFrame方法实现有些出入,比如:早期火狐的此方法,不支持传参。第四个:老版本的webkit,在有些版本下,此方法不会返回id,还有一些版本没有给回调函数传当前时间的参数。

我的理解:至于老版本的火狐和老版本的webkit,我个人觉得没有必要去兼容,只要兼容IE9-浏览器就OK了。因此以上的4个问题,只存在前面两个。那如果你想兼容第三个和第四个问题的话,请去看司徒正美基于网友屈屈与月影的版本改进而来的版本:https://github.com/wedteam/qwrap-components/blob/master/animation/anim.frame.js。

第二个版本,解决上面的第一个问题和第二个问题:

(function() {
  var lastTime = 0;
  var version = [‘webkit‘, ‘moz‘];
  for(var i = 0; i < version.length && !window.requestAnimationFrame; i++) {   //如果此浏览器不支持requestAnimationFrame方法,就循环遍历version数组
    window.requestAnimationFrame = window[version[i] + ‘RequestAnimationFrame‘];
    window.cancelAnimationFrame = window[version [i] + ‘CancelAnimationFrame‘] ||         // 有一些Webkit版本中,此方法的名字改变了
      window[version [i] + ‘CancelRequestAnimationFrame‘];
  }

  if (!window.requestAnimationFrame) {   //如果是IE9-浏览器
    window.requestAnimationFrame = function(callback, element) {      //我们使用上一个例子来讲解这段代码。当我们点击div时,就会触发start方法,我们假设当前时间为11111,设置startTime=11111, 调用requestAnimationFrame(animate)方法,这时,当前时间,我们假设是currTime = 11112,lastTime = 0,这时timeToCall = 0,因此调用setTimeout(function(){},0),把lastTime = 11111,返回id。过了浏览器的最小时间后,我们假设是4ms,就会立即执行animate(11112)。这时就会继续执行requestAnimationFrame。假设当前时间是11118,timeToCall = 9.7,这时lastTime = 11127.7,当前时间为11127.7时,就执行animate(11127.7),per = 16.7 / 3000,继续执行requestAnimationFrame....
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));   //timeToCall的值为0-16.7之间。

      var id = window.setTimeout(function() {
        callback(currTime + timeToCall);
      }, timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  }
  if (!window.cancelAnimationFrame) {   
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
  }
})();

当然,requestAnimationFrame不是没有缺点,它不能控制fps(60),我们在以下场景下就不能使用。比如:做一些慢放动作,fps<60的情况下;还有在动作,枪战,飞车等场景下,fps需要>60的情况下,像这种场景下,如果帧数不高,画面会模糊。利用setTimeout(IE9,10,Firefox,chrome等,它的最短时间间隔已经压缩至4ms了)我们可以轻松跑到100帧以上的动画,能让画面更清楚,细节更逼真。

另外,postMessage这个异步方法,能实现超高度的动画,有人做过实验:

setTimeout                      平均帧数200                               

requestAnimationFrame    平均帧数60           

loop(循环)                     平均帧数200-300                         

postMessage                    平均帧数900-1000

var testing = true;   //用来停止动画的,也就是停止代码执行的

function main(){

  //记录两次执行时间的间隔

}

function run1(){       //点击按钮1,执行run1方法,然后使用setTimeout方法不断的执行main方法,main方法会记录每次执行的时间,求出两次执行时间的间隔。

  main();

  if(testing){

    setTimeout(run1, 1);

  }

}

function run2(){    //点击按钮2,执行run2方法

  main();

  if(testing){

    window.requestAnimationFrame(run2);

  }

}

function run3(){   //点击按钮3,执行run3方法

  var count = 15;

  while(count--){         //利用while循环执行main方法,记录两个循环操作之间的时间间隔。

    main();

  }

  if(testing){

    setTimeout(run3,1);    //当然这里会有一点点的误差,因为用到了setTimeout方法,这样我们可以设置testing=false,停止循环调用main,如果直接用while(true),那么无法停止此循环。

  }

}

window.addEventListener("message",run4,false);   //绑定message事件,只要调用postMessage方法,就会触发message事件。

function run4(){

  main();

  if(testing){

    window.postMessage("","*");

  }

}

IE10也有一个高效的异步方法setImmediate。

在现实中,尤其是游戏开发,我们要结合多种异步API。比如:作为背景的树木,流水等用requestAnimationFrame方法,玩家角色,由于需要速度的变化,那么用setTimeout比较合适,一些非常炫的动画,可能就需要postMessage,setImmediate,Image.onerror等API了。

 

 

 

加油!

第三十九课:requestAnimationFrame详解

标签:

原文地址:http://www.cnblogs.com/chaojidan/p/4210472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!