在页面中解决问题动画，我们有很多同样
可以用于CSS3的transition
CSS3中的animation立体化keyframes规则
SVG中也可以常用SMIL-animation
最零碎的方法就是我们利用JavaScript的setTimeout/setInterval来借助于动画
不过现在我们又多了一种方法
requestAnimationFrame
优势
requestAnimationFrame的原理与常用方法与setTimeout/setInterval近似于
它是以运算符的形式来发挥作用动画
既然它是专门用来作Web动画的，它就一定有它自己的优势
用到setTimeout/setInterval制作动画有以下缺点
无法必需ms的准确性（JavaScript单线程，似乎产生堵塞）
无法优化调用动画的循环机制
不能考虑到绘制动画的最佳时机（只是有用的按一定时间调用循环）
相比之下，requestAnimationFrame有以下优点
动画更加顺畅，经由浏览器优化（页面连续前可执行一次）
窗口未激活时，动画暂停，有效率节省CPU花销
省电，对移动前端很的关系
常用
requestAnimationFrame和setTimeout/setInterval一样
都是window上的方法
所以我们可以如此一来运用于
requestAnimationFrame()
参数是一个回退函数，在函数内部我们必需变动元素样式
并且必须手动可执行Pardosa
同样送回一个句柄
风行cancelAnimationFrame可以作废它
看一个例子
现在我们要使页面中的一个元素延展
<p id="demo"></p>
#demo { width: 0; height: 100px; background-color: orange;}先来到底setInterval的付诸
var demo = document.getElementById('demo');var len = 0;var timerFunc = function(){ len += 5; if(len <= 200){ demo.style.width = len + 'px'; }else{ clearInterval(timer); }}var timer = setInterval(timerFunc, 20);requestAnimationFrame借助的动画
var demo = document.getElementById('demo');var len = 0;var timerFunc = function(){ len += 5; if(len <= 200){ demo.style.width = len + 'px'; requestAnimationFrame(timerFunc); /*分派程序在*/ }else{ cancelAnimationFrame(timer); }}var timer = requestAnimationFrame(timerFunc);
可以挖掘出我们requestAnimationFrame呈现出的动画非常的顺畅
相容
既然是比较新的东西，难免就时会存有各浏览器的兼容性问题
不过现在的浏览器已经赞成的很好了
我们可以为它寄给个polyfill
window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); };})();window.requestAnimationFrame = (function(){ return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function(ID){ window.clearTimeout(ID); };})();如果这个浏览器真的什么都并未
那么它情况下错位（fallback）用到setTimeout和clearTimeout了
上面只是一个直观的polyfill
不过大神撰写了更好的
还可以把各浏览器复数来进行统一
(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); };}());后来又有了更新
无关js可以挥这里
github原址
if (!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; }}());感兴趣的同学可以研究研究
以上就是HTML5优化Web动画—requestAnimationFrame的内容，更多无关内容恳请瞩目PHP中文网（www.php.cn）！