web动画深入理解-requestAnimationFrame方法

来源：互联网发布：淘宝店招页头尺寸编辑：程序博客网时间：2024/05/28 22:09

现在实现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>

0 0