第三十九课:requestAnimationFrame详解
大家应该都知道,如果一个页面运行的定时器很多,无论你怎么优化,最后肯定会超过指定时间才能完成动画。定时器越多,延时越严重。
为此,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详解的更多相关文章
- NeHe OpenGL教程 第三十九课:物理模拟
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- Java进阶(三十二) HttpClient使用详解
Java进阶(三十二) HttpClient使用详解 Http协议的重要性相信不用我多说了,HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性(具体区别,日后我们 ...
- 十九、linux--RAID详解
一.什么是RADI Raid是廉价冗余磁盘阵列,简称磁盘阵列. 运维人员就叫RAID.Raid是一种把多块独立的磁盘(物理磁盘)按不同方式组合起来形成一个磁盘组,在逻辑上看起来就是一个大的磁盘,从而提 ...
- shell学习三十四天----printf详解
http://blog.csdn.net/shanyongxu/article/details/46744055
- 潭州课堂25班:Ph201805201 django 项目 第三十九课 后台 文章发布,图片上传到 FastDFS后端实现 七牛云讲解(课堂笔记)
文章发布: # 1,从前台获取参数# 2,校验参数# 3,把数据保存到数据库# 4,返回执行结果到前台,(创建成功或失败) 自定义 froms.py 校验参数 上传图片到七牛云 注册 https:// ...
- python第三十九课——面向对象(二)之初始化属性
设计Car类,初始化属性speed,提供一个run函数 import time class Car: def __init__(self,speed): self.speed=speed #将Road ...
- python第三十九课——面向对象(二)之设计类
1.设计类class 车: #属性 颜色 = red 品牌 = "BMW" 车牌 = "沪A88888" #函数 行驶(): 停止(): 2.实例化车对象 ca ...
- Java并发编程原理与实战三十二:ForkJoin框架详解
1.Fork/Join框架有什么用呢? ------->Fork使用来切分任务,Join是用来汇总结果.举个简单的栗子:任务是1+2+3+...+100这个任务(当然这个任务的结果有好的算法去做 ...
- jQuery 源码解析(三十) 动画模块 $.animate()详解
jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...
随机推荐
- [算法] Manacher算法线性复杂度内求解最长回文子串
参考:http://www.felix021.com/blog/read.php?2040 以上参考的原文写得很好,解析的非常清楚.以下用我自己的理解,对关键部分算法进行简单的描述: 回文的判断需要完 ...
- WEB安全--CSRF剖析
CSRF攻击:攻击者构造合法的HTTP请求,随后利用用户的身份操作用户帐户的一种攻击方式. 一.CSRF攻击原理CSRF的攻击建立在浏览器与Web服务器的会话中:欺骗用户访问URL.二.CSRF攻击场 ...
- 【NOIP提高组2015D2T1】uva 714 copying books【二分答案】——yhx
Before the invention of book-printing, it was very hard to make a copy of a book. All the contents h ...
- ifrog-1028 Bob and Alice are playing numbers(trie树)
题目链接: Bob and Alice are playing numbers DESCRIPTION Bob and his girl friend are playing game togethe ...
- [3D跑酷] UI事件处理系统
在我们的Unity游戏项目中,GUI的表现采用NGUI.记录一下我们的处理方式: 需要解决的问题 1.需要处理大量按钮的点击事件 2.需要处理界面跳转事件 3.需要处理界面元素更新事件 解决方案 GU ...
- TestLink学习七:TestLink测试用例Excel转换XML工具
TestLink对于测试用例的管理来说,是蛮强大的,但是在导入导出这块,功能有点弱,本文针对测试用例的导入,转载了一个Excel转换成xml工具. 1.根据到处的测试用例xml,定义一下我的Excel ...
- emberjs重写补充类之reopen方法和reopenClass方法
无需一次性将类定义完全,你可以使用reopen方法来重新打开(reopen)一个类并为其定义新的属性. Person.reopen({ isPerson: true }); Person.create ...
- docker中清理冗余的image,container
1) 首先进入超级用户模式 [root@docker ~]# sudo su2) 删除container ( container运行时是不能删除的 )首先停止container [root@docke ...
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- VS的代码分析工具
来自:[译]Visual Studio 2008 Code Metrics http://www.cnblogs.com/live41/archive/2010/02/08/1665627.html ...