HTML5 requestAnimationFrame( ) 动画API

简介

当用JS做动画效果时，一般用setTimeout()或setInterval()来进行动画效果的制作，现在好了，出现了一个专门用于处理动画的API——requestAnimationFrame()，表意为“请求动画帧”。

用法

基本语法：

requestAnimationFrame(callback)//callback为回调函数
cancelAnimationFrame(id) //requestAnimationFrame的返回值

requestAnimationFrame参数为一个回调函数，返回ID值。
cancelAnimationFrame用于取消requestAnimationFrame。

可以看到和setTimeout/setInterval的用法差不多。

var globalID; //requestAnimationFrame的返回ID//动画处理函数
function animate() {//动画相关的操作...globalID=requestAnimationFrame(animate);//参数为函数回调
}//使用这个函数进行动画停止操作
cancelAnimationFrame(globalID);

优势

浏览器进行优化，动画更流畅；

按浏览器的时间间隔绘制，动画不会掉帧；

窗口没激活时或标签页不可见时，动画将暂停，省计算资源，减少CPU和内存的压力；

更省电，尤其是对移动终端。

兼容性

各浏览器对于API的兼容性：

可以看到，除了IE9-、OpearMini和AndroidBrowser4.3-之外全部都支持，支持率为91.71%，总体还不错。

封装代码

requestAnimationFrame兼容封装代码：

(function() {var lastTime = 0;var vendors = ['webkit', 'moz'];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);};
}());

代码源于：Paul Irish requestAnimationFrame for Smart Animating

参考文档

Timing control for script-based animations

Using requestAnimationFrame

MDN window.requestAnimationFrame()

博客名称：王乐平博客

博客地址：http://blog.lepingde.com

CSDN博客地址：http://blog.csdn.net/lecepin

HTML5 requestAnimationFrame( ) 动画API相关推荐

android 三维动画效果,9款令人惊叹的HTML5 3D动画应用
原标题:9款令人惊叹的HTML5 3D动画应用之前我们已经向大家分享了很多HTML5动画应用了,大部分都非常炫酷,也有一小部分是很实用的.今天我们要向各位HTML5动画爱好者介绍更多的HTML5 3 ...
《HTML5+JavaScript动画基础》——2.4　JavaScript对象
本节书摘来自异步社区<HTML5+JavaScript动画基础>一书中的第2章,第2.4节,作者:[美]Billy Lamberta , Keith Peters著,更多章节内容可以访问云 ...
html5 游戏动画设计,HTML5 Canvas 动画实例
原标题:HTML5 Canvas 动画实例在开发在线游戏时,绘制动画是非常重要的.本节介绍一个使用 Canvas API 实现的动画实例--游戏人物的跑步动画. 动画的概念及原理 1．动画动画是通 ...
classlist使用方法_如何通过使用HTML5的classList API在没有jQuery的情况下操作类
classlist使用方法 by Ayo Isaiah 通过Ayo Isaiah 如何通过使用HTML5的classList API在没有jQuery的情况下操作类 (How to manipulat ...
Web动画API教程：可爱的运动路径（Motion Path)
这是介绍浏览器中web动画API的系列教程的第五篇.如果你有什么问题/想法,或者发现我理解错了规范的内容,或是希望我在接下来的文章中对某部分内容进行探讨的话,请在Twitter给我留言吧~@dancw ...
HTML5 Canvas动画效果实现原理
在线演示使用HTML5画布能够帮助我们快速实现简单的动画效果,基本原理如下: 每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearRect(0, 0, x, ...
HTML5 Audio标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
视觉盛宴 HTML5 3D动画应用赏析
以下是一些很棒的HTML5 3D动画应用,值得一看. 1.3D HTML5 Logo动画 HTML5多视角3D旋转动画 HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是 ...
html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

HTML5 requestAnimationFrame( ) 动画API

简介

用法

优势

兼容性

封装代码

参考文档

HTML5 requestAnimationFrame( ) 动画API相关推荐

最新文章

热门文章