web动画深入理解-requestAnimationFrame方法
2016-12-16 11:35
453 查看
现在实现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()方法不会对隐藏的元素进行回流和重绘。
兼容性测试：
（以上图片来自网络，资源有限并没有做过多的测试）
实例代码如下：
<!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();
c
4000
ontext.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>
了。在这里我们着重讨论JS的动画。
首先先讲一个简单的知识点。何为动画？动画就是一系列图片在一定速度下播放产生的运动视觉效果。
说到JS动画大家都会想起setTimeout()和setInterval()这两个方法。但是这两种方法制作动画会发生【跳帧】问题。【跳帧】是指当【帧频】超过【60帧/S】的时候，会跳过某些图片不播放。而动画的【帧频】至少是60帧/S，这样我们才能看到流畅的动画效果。
在这里我们就需要引出JS的另一个方法了requestAnimationFrame()。该方法的特点如下：
1.它有固定的帧频【60帧/S】（我目前没有找到能改变它【帧频】的方法，有知情者请告知。）
2.它会把每一帧中的所有DOM操作在一次重绘或回流中就完成，节省CPU的开销。
【附录：当DOM元素的规模尺寸，布局，隐藏等法神改变时而需要重新构建。这称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染DOM结构树中受到影响的部分失效，并重新构造这部分渲染DOM结构树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。注意：重绘不一定引起回流，回流一定会引起重绘】。
3.requestAnimationFrame()方法不会对隐藏的元素进行回流和重绘。
兼容性测试：
（以上图片来自网络，资源有限并没有做过多的测试）
实例代码如下：
<!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();
c
4000
ontext.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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 深入理解requestAnimationFrame的动画循环
- 深入理解requestAnimationFrame的动画循环
- HTML5 Canvas 教程 2.4.2 使用 requestAnimationFrame 方法创建动画
- requestAnimationFrame，Web中写动画的另一种选择
- 深入理解requestAnimationFrame
- 深入理解requestAnimationFrame
- HTML5探秘：用requestAnimationFrame优化Web动画
- 深入理解 requestAnimationFrame
- 深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame
- requestAnimationFrame，Web中写动画的另一种选择
- 转: requestAnimationFrame，Web中写动画的另一种选择
- 深入理解requestAnimationFrame
- requestAnimationFrame做游戏or动画时限定帧数的解决方法
- HTML5 Canvas 绘图方法整理 【十八、Canvas动画/ requestAnimationFrame() 兼容】
- requestAnimationFrame，Web中写动画的另一种选择
- 深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame
- requestAnimationFrame，Web中写动画的另一种选择
- webvr动画函数requestAnimationFrame
- requestAnimationFrame，Web中写动画的另一种选择
- requestAnimationFrame，Web中写动画的另一种选择