以往JS控制的动画大多使用setInterval
或者setTimeout
每隔一段时间刷新元素的位置,来达到动画的效果,但是这种方式并不能准确地控制动画帧率,尽管主流的浏览器对于这两个函数实现的动画都有一定的优化,但是这依然无法弥补它们性能问题。主要原因是因为JavaScript的单线程机制使得其可能在有阻塞的情况下无法精确到毫秒触发。
requestAnimationFrame()
方法正是为了满足高性能动画的需求而提供的API,通过setInterval
方法控制的动画其调用的间隔由程序员设置,而requestAnimationFrame()
无须设置调用间隔, 它自动紧跟浏览器的绘制的帧率(一般浏览器的显示帧率是60fps,差不多每帧间隔16.7ms)
关于过去的setInterval
控制的动画与requestAnimationFrame()
的效果的对比,这里引用‘艾伦’的帖子中的栗子。原帖地址?动画requestAnimationFrame
setInterval动画DEMO
requestAnimationFrame动画DEMO
点击预览以上两个demo可以明显感受到前者有点卡顿,后者更为流畅。
另外requestAnimationFrame()
在隐藏或不可见的元素中将不会进行重绘或回流,大大降低了开销。关于该方法的其他细节见MDN文档? window.requestAnimationFrame
以上都是废话,多写才能体会。这里我尝试用该方法写了个晃动动画(点击黑盒晃动,个人练习并没有考虑兼容性):
JS代码:
//从网页中获取一个元素
var box = document.getElementById('box')
shake(box, 500, 15)
//接受三个参数:动画元素,持续时间,晃动距离
function shake(elm, dur, distance) {
if (elm) {
var dur = dur || 500
var distance = distance || 10
//保存原样式
var original_css = elm.style.cssText
elm.addEventListener('click', ani, false)
} else {
return 'no param'
}
function ani() {
var start = null
requestAnimationFrame(act)
//requestAnimationFrame每次调用向callback中传入一个时间戳,时间戳为每次调用的时间点
function act(time_stamp) {
if(start === null) start = time_stamp
var elapsed = time_stamp - start
if ((elapsed / dur) < 1) {
//乘以4PI,来回往复两次, 使用正弦函数得到比例
elm.style.transform = 'translateX(' + distance * Math.sin((elapsed / dur) * 4 * Math.PI) + 'px' + ')'
//调用该方法将返回一个ID值用于结束调用
var time_id = requestAnimationFrame(act)
} else {
//恢复原样式,停止动画
elm.style.cssText = original_css
cancelAnimationFrame(time_id)
}
}
}
}
在实际开发中, 当然尽量使用css动画, 毕竟css动画性能更优。但是对于一些复杂的动画,比如有暂停,继续等复杂交互等动画还是需要requestAnimationFrame
,在张鑫旭大神的这篇文章中CSS3动画那么强,requestAnimationFrame还有毛线用? 深入浅出的阐释了该方法, 另外他的demo中也有一个很直观的栗子?
该方法其他参考资料mark下:
性能更好的js动画实现方式——requestAnimationFrame
HTML5探秘:用requestAnimationFrame优化Web动画
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。