使用 window.requestAnimationFrame 实现动画效果

该方法返回一个长整型非 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>

按钮

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!