使用 window.requestAnimationFrame 实现动画效果(2)

该方法返回一个长整型非 0 值，作为唯一的标识符。可以像停止定时器 clearTimeout() 一样，将返回值传递到 window.cancelAnimationFrame() 中，取消一个先前通过调用 window.requestAnimationFrame() 方法添加到计划中的动画帧请求。

下面是一个旋转动画的例子，元素每一帧旋转 1 度，为了快速查找页面元素及绑定事件处理，使用了 jQuery：

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		// 点击按钮，开启旋转动画
		$("#btn").click(function(){
			update();
		});
		
		// 角度
		var degrees = 0;
		
		// 动画方法
		function update() {
			if (degrees >= 360) return;
			$("#box").css("transform","rotate("+ (++degrees) +"deg)");
			window.requestAnimationFrame(update); // 递归调用实现动画效果
		}
	});
</script>

按钮

再举一个模拟进度条的例子，点击按钮后进度从 0 增长到 100%：

<script type="text/javascript">
	$(function(){
		$("#btn2").click(function(){
			update();
		});

		// 当前进度
		var progress = 0;
		// 动画方法
		function update() {
			if (progress >=  100) return;
			$("#progressbar").css("width",++progress * 2).text(progress+"%");
			window.requestAnimationFrame(update); // 递归调用实现动画效果
		}
	});
</script>

按钮

3. 浏览器兼容问题

更为具体的兼容性大家可以通过 caniuse 查询。

由上图可以看出，在老版本的浏览器中，requestAnimationFrame() 方法不被支持，为了让代码能够有更好的浏览器兼容性，即在旧版本的浏览器上也能运行不报错，我们可以写一段代码让浏览器在不支持 requestAnimationFrame() 的情况下使用 setTimeout() 以达到类似效果，把这样的代码称为 Polyfill（垫片），通俗点来说，就是代码备胎的意思。

以下借鉴 paulirish 发布在 GitHub Gist 上的代码片段 requestAnimationFrame polyfill，用于在不支持 requestAnimationFrame 的浏览器中回退到 setTimeout 来实现：

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik M?ller. fixes from Paul Irish and Tino Zijdel

// MIT license

(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);
        };
}());

4. 小结

虽然 CSS3 中的 transition 或 animation 动画也能实现与 requestAnimationFrame 一样的绘制原理，但 CSS3 动画也不是适用于所有的属性，如 scrollTop 值，CSS3 就无能为力了。同时，CSS3 支持的动画效果有限，如果要实现某些特殊的缓动效果，还得使用 requestAnimationFrame 或 setTimeout 来实现。而 setTimeout 又可能存在过度绘制问题，浪费 CPU 资源或消耗更多额外的电池电能，所以使用 requestAnimationFrame 来优化是很有必要的。

参考：

基于脚本的动画的计时控制（“requestAnimationFrame”）

网页性能管理详解：浅谈chrome-Timeline及window.requestAnimationFrame()方法

MDN window.requestAnimationFrame

requestAnimationFrame for Smart Animating

CSS3动画那么强，requestAnimationFrame还有毛线用？

原文:大专栏 ?使用 window.requestAnimationFrame 实现动画效果

（编辑：ASP站长网）