web动画深入理解-requestAnimationFrame方法

现在实现web动画效果主流的都是CSS3了，而且一些主流的浏览器对它也有比较好的支持。但是CSS3动画的运动轨迹比较少，有很大的局限性。这时候我们一般会用JS或者Jquery
了。在这里我们着重讨论JS的动画。
首先先讲一个简单的知识点。何为动画？动画就是一系列图片在一定速度下播放产生的运动视觉效果。
说到JS动画大家都会想起setTimeout()和setInterval()这两个方法。但是这两种方法制作动画会发生【跳帧】问题。【跳帧】是指当【帧频】超过【60帧/S】的时候，会跳过某些图片不播放。而动画的【帧频】至少是60帧/S，这样我们才能看到流畅的动画效果。
在这里我们就需要引出JS的另一个方法了requestAnimationFrame()。该方法的特点如下：
1.它有固定的帧频【60帧/S】（我目前没有找到能改变它【帧频】的方法，有知情者请告知。）
2.它会把每一帧中的所有DOM操作在一次重绘或回流中就完成，节省CPU的开销。
【附录：当DOM元素的规模尺寸，布局，隐藏等法神改变时而需要重新构建。这称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染DOM结构树中受到影响的部分失效，并重新构造这部分渲染DOM结构树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。注意：重绘不一定引起回流，回流一定会引起重绘】。

3.requestAnimationFrame()方法不会对隐藏的元素进行回流和重绘。

兼容性测试：
web动画深入理解
（以上图片来自网络，资源有限并没有做过多的测试）

实例代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>requestAnimationFrame动画效果</title>
<script type="text/javascript">
	function animaFuns(){
		var requestAnimFrame = (function(){
			return window.requestAnimationFrame ||
			window.webkitRequestAnimationFrame ||
			window.mozRequestAnimationFrame ||
			window.oRequestAnimationFrame ||
			window.msRequestAnimationFrame || setAnimationFuns;
		})();
		console.log(requestAnimFrame);
		//备胎函数，主要用于不兼容requestAnimationFrame方法的函数
		function setAnimationFuns(callback){
			window.setTimeout(callback,5);
		}
		//定义变量canvas，context;
		var canvas=null,context=null,i=0,R=180,int=null;
		//初始化canvas画布
		function init(){
			canvas=document.createElement("canvas");
			canvas.width=456;
			canvas.height=456;
			context=canvas.getContext("2d");
			document.body.appendChild(canvas);
		}
		//绘制canvas小球
		function draw(){
			i+=0.02;
			if(i<2){
				var PI=Math.PI*i;
			}else if(i>=2){
				i=0;
			}
			var x = Math.sin(PI)*R+225;
      		var y = Math.cos(PI)*R+225;
      		context.fillStyle='#eee';
      		context.fillRect(0,0,456,456);
      		context.fillStyle='rgb(255,0,0)';
      		context.beginPath();
      		context.arc(x,y,20,0,Math.PI*2,true);
      		context.closePath();
      		context.fill();
		}
		//定义动画函数
		function animate(){
			draw();
			init=requestAnimFrame(animate);
		}
		//定义开始，暂停动画
		var stopDom=document.getElementById("stopAnimation");
		var startDom=document.getElementById("startAnimation");
		stopDom.onclick=function(){
			cancelAnimationFrame(init);
		}
		startDom.onclick=function(){
			cancelAnimationFrame(init);    //清除动画行为，类似于clearInterval()方法。
			init=requestAnimationFrame(animate);
		}
		init();
		animate();
	}
	window.onload=function(){
		animaFuns();
	}
</script>
<style type="text/css">
	canvas {
		display: block;
		margin:0 auto;
	}
	#box {
		margin-top: 100px;
		margin-bottom: 20px;
		text-align: center;
	}
</style>
</head>

<body>
<div id="box">
	<button type="button" id="startAnimation">开始动画</button>
	<button type="button" id="stopAnimation">停止动画</button>
</div>
</body>
</html>

web动画深入理解-requestAnimationFrame方法

猜你喜欢