requestAnimationFrame 实现更流畅，高效的动画效果

来源：互联网发布：unity3d安卓联机调试编辑：程序博客网时间：2024/05/23 11:51

学习笔记：requestAnimationFrame()

requestAnimationFrame() 是浏览器提供的一个统一帧管理、提供监听帧的API。这个方法原理跟setTimeout/setInterval差不多，setTimeout/setInterval都是要指定好间隔时间，而requestAnimationFrame 在运行时，浏览器会自动检测性能，实现最优的动画帧频率。

简单的浏览器兼容

window.requestAnim<span style="line-height: 25.6px; font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif;">ation</span>Frame = (function() {    return window.requestAnimationFrame ||

<span style="white-space:pre"></span>   window.webkitRequestAnimationFrame ||

<span style="white-space:pre"></span>   window.mozRequestAnimationFrame ||

           window.oRequestAnimationFrame ||

<span style="white-space:pre"></span>   window.msRequestAnimationFrame ||           function(callback) {            <span style="white-space:pre"></span> return window.setTimeout(callback, 30);           };})();

一般用法递归循环：

function loop(){

requestAnimationFrame(loop);

/* .... */

}
可以通过 window.cancelAnimationFrame() 来取消动画。

var raf = requestAnimationFrame(callback); cancelAnimationFrame(raf);

0 0