requestAnimationFrame动画控制详解
前端开发whqet,csdn,王海庆,whqet,前端开发专家
还在使用setInterval吗,你out了,requestAnimationFrame可以实现更为经济、更加准确的控制动画,今天来看看它的来龙去脉。
以往
在web动画、app动画中,我们经常通过setInterval或setTimeout定时修改DOM、CSS实现动画,如下面代码所示。
var timer=setInterval(function(){//一些动画
},1000/60)
//清除动画
clearInterval(timer);
不过如此动画的方式极为耗费资源,经常是这样的结果,刚开始比较流畅,5分钟之后动画就卡住了,于是“大家”都看不下去了,开始想各种办法。
简介
2011年左右,Paul Irish的《requestAnimationFrame for Smart Animating》首先介绍了requestAnimationFrame的使用,然后经过大家的努力《Timing control for script-based animations》在2013年成为了w3c的候选标准。
requestAnimationFrame的方式的优势如下:
1.经过浏览器优化,动画更流畅
2.窗口没激活时,动画将停止,省计算资源
3.更省电,尤其是对移动终端
requestAnimationFrame的使用方式,简单调用代码如下。
function animate() {// Do whateverrequestAnimationFrame(animate);// Do something animate}
//go->
requestAnimationFrame(animate);
有的时候我们必须要加一些控制,requestAnimationFrame也可以像setInterval一样返回一个句柄,然后我们可以取消它。控制动画代码如下。
var globalID;
function animate() {// Do whateverglobalID=requestAnimationFrame(animate);// Do something animate}
//when ot startglobalID=requestAnimationFrame(animate);
//when to stopcancelAnimationFrame(globalID);
好了,介绍完了吧。
呃,先别走,对于一个前端开发者,我们不能如此“单纯”,因为浏览器太任性,谁知道这些浏览器都是怎么“想的”,我们要看看浏览器兼容情况。
来,上CanIUse。
桌面端除了万恶的IE系列低版本9-,移动端除了Opera Mini和Android Browser4.3-其他都支持。总支持率83.38%,不加前缀支持率81.98%,支持率不错。作为一个富有极客精神的前端er,我们还得继续,拯救那些“手里没钱、手里有权却榆木疙瘩,还在使用低版本浏览器”的同胞,来个polyfill。
补丁
Paul Irish的简化版的补丁,补丁和使用如下代码所示。
// 补丁
window.requestAnimationFrame = (function(){return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ){window.setTimeout(callback, 1000 / 60);};
})();// 使用(function animate(){requestAnimationFrame(animate);//动画
})();
这个补丁可以较好的兼容支持该特性的浏览器,但是对于不支持的呢?这里讲了怎么添加,如何停止呢?于是我们的补丁还得继续……
(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); };
}());
有后来,又有了新更新,大家到github查看详情,代码贴过来,大家研究。
// requestAnimationFrame polyfill by Erik Möller.
// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon// MIT licenseif (!Date.now)Date.now = function() { return new Date().getTime(); };(function() {'use strict';var vendors = ['webkit', 'moz'];for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {var vp = vendors[i];window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']|| window[vp+'CancelRequestAnimationFrame']);}if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy|| !window.requestAnimationFrame || !window.cancelAnimationFrame) {var lastTime = 0;window.requestAnimationFrame = function(callback) {var now = Date.now();var nextTime = Math.max(lastTime + 16, now);return setTimeout(function() { callback(lastTime = nextTime); },nextTime - now);};window.cancelAnimationFrame = clearTimeout;}
}());
当然,实战的时候我们把这些代码单独放到一个文件中,到这里下载。
案例
最后,我们来个粒子案例,体会体会requestAnimatonFrame的使用。
参考文献和深入阅读
1. Paul Irish, requestAnimationFrame for Smart Animating
2. MDN, Window.requestAnimationFrame()
3. Chris Coyier, Using requestAnimationFrame
4. Matt West, Efficient Animations with requestAnimationFrame
5. W3C CR, Timing control for script-based animations
6. Polyfill for requestAnimationFrame/cancelAnimationFrame
7. 张鑫旭, CSS3动画那么强,requestAnimationFrame还有毛线用?
8. 朱永盛, 理解WebKit和Chromium: 渲染主循环(main loop)和requestAnimationFrame
感谢您耐心读完,如果对您有帮助,请支持我
----------------------------------------------------------
前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------
requestAnimationFrame动画控制详解相关推荐
- T4M插件放入unity后怎么找不到_Unity动画系统详解4:如何用代码控制动画?
摘要:通过上一篇咱们知道了播放动画需要使用Animator,那么如何用代码控制动画呢? 洪流学堂,让你快人几步.你好,我是跟着大智学Unity的萌新,我叫小新,这几周一起来复(yu)习(xi)动画系统 ...
- Unity动画系统详解4:如何用代码控制动画?
摘要:通过上一篇咱们知道了播放动画需要使用Animator,那么如何用代码控制动画呢? 洪流学堂,让你快人几步.你好,我是跟着大智学Unity的萌新,我叫小新,这几周一起来复(yu)习(xi)动画系统 ...
- Android 动画框架详解,第 1 部分
2019独角兽企业重金招聘Python工程师标准>>> Android 平台提供了一套完整的动画框架,使得开发者可以用它来开发各种动画效果,本文将向读者阐述 Android 的动画框 ...
- Unity动画系统详解10:子状态机是什么?
摘要:除了使用Layer还有没有更好的组织状态的方式呢?感觉一个Layer里面状态多的时候,还是很显得很乱. 洪流学堂,让你快人几步.你好,我是跟着大智学Unity的萌新,我叫小新,这是复(yu)习( ...
- Unity动画系统详解9:Target Matching是什么?
摘要:在游戏中,经常有这种情况:角色的手或者脚需要在特定时间放在特定的位置.比如角色需要用手撑着跳过一个石头或一堵墙,或者跳起抓住房梁.Target Match就是让动画的特定片段去匹配特定的位置. ...
- Unity动画系统详解5:BlendTree混合树是什么?
摘要:"Animator中有一个功能,用来解决多个动画之间的混合,经常用于移动动画之间的混合,这个功能叫做BlendTree,混合树." 洪流学堂,让你快人几步.你好,我是跟着大智 ...
- unity velocity_Unity动画系统详解5:BlendTree混合树是什么?
摘要:"Animator中有一个功能,用来解决多个动画之间的混合,经常用于移动动画之间的混合,这个功能叫做BlendTree,混合树." 洪流学堂,让你快人几步.你好,我是跟着大智 ...
- 拐道交叉的css3动画,CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- CSS3动画特效详解
大家都知道网页的3大组成部分,分别是结构,表现和行为.就像我们要盖一座房子,要地基要打的扎实,房子的架构要稳固,而我们网页当中的地基和架构就是Html,当我们盖好了房子,最终的美观度还是看我们的装修风 ...
最新文章
- Orchard模块开发全接触3:分类的实现及内容呈现(Display)
- mysql 目录武沛齐_MySQL数据表中的数据操作
- Python中的Pandas(1.pandas概述和Series的概述和相关操作)
- /dev/null脚本中作用
- 【M10】在构造方法内阻止资源泄漏
- 《高翔视觉slam十四讲》学习笔记 第五讲 相机与图像
- php 返回的缓存数据,php 部分缓存数据库返回数据的例子
- matlab:绘制box函数和高斯函数曲线并进行傅里叶变换
- PLSQL 11破解码
- Ajaxsubmit表单提交
- 光电信息科学与工程学c语言吗,2019光电信息科学与工程专业怎么样、学什么、前景好吗...
- 修改迅雷下载中“边下边播”的默认播放器
- 1698无法登录mysql服务器_一,问题描述:MysqlERROR1698(28000)解决,新装了mysql-server-5.7,登录为这一问题,普通用户不能进mysql,只有root用...
- 论文理解:“Designing and training of a dual CNN for image denoising“
- java论文答辩老师会问什么,毕业论文答辩老师一般会问什么问题
- python爬取pubmed的文献_爬虫获取pubmed中文献的标题和摘要
- 齐二TK6916/20/26/32系列数控落地铣镗床简介3
- Multisim # 数字逻辑仿真实验一些基础的tips
- 英语不好可以学JAVA吗?来听大咖的建议
- java 广告插件_谷歌提议 Chrome 限制广告插件