使用requestAnimationFrame做动画效果一
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用requestAnimationFrame做动画效果一相关的知识，希望对你有一定的参考价值。
最近学习了requestAnimationFrame，看了张鑫旭直白易懂，但是某些地方语言过于裸露的文章http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/，文章里的例子：http://www.zhangxinxu.com/study/201309/requestanimationframe-tween-easeoutbounce.html让我觉得这个requestAnimationFrame很厉害，虽然我对动画的接触还不多，但是我会努力的。
requestAnimationFrame是什么么？
requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API：
说简单点
-
- setInterval、setTimeout是开发者主动要求浏览器去绘制，但是由于种种问题，浏览器可能会漏掉部分命令
- requestAnimationFrame 就是浏览器什么要开始绘制了浏览器自己知道，通过requestAnimationFrame 告诉开发者，这样就不会出现重复绘制丢失的问题了
- requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧
- 隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
- requestAnimationFrame也会像setTimeout一样有一个返回值ID用于取消，可以把它作为参数传入cancelAnimationFrame函数来取消requestAnimationFrame的回调
下面是一个简单的例子：
我做了个练习：
每隔1s长生一个小方块，让其匀速下落，落到底部消失，如果碰到底部中间的方块，小方块消失，分数加1，这个例子还有很多不足的地方，我会继续完善：
1 <script> 2 window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 3 var h=0;
var timer=setInterval(function(){ 4 if(h>40){ 5 clearInterval(timer);return; 6 }else{ 7 h+=1; 8 var isSucceed; 9 var isOnBelow; 10 var isStillOn; 11 var dotX; 12 var dot=new Dot(); 13 dotX=dot.getName(); 14 isStillOn=true; 15 animate(dot.dom, { 16 top: window.innerHeight-dot.dom.offsetHeight, 17 duration: 3000 18 }); 19 function animate(elem, options){ 20 //动画初始值 21 var start = 0 22 //动画结束值 23 var end = options.top 24 var createTime = function(){ 25 return (+new Date) 26 } 27 //动画开始时间 28 var startTime = createTime(); 29 var timerId; 30 //开始动画 31 var startAnim = function() { 32 timerId = requestAnimationFrame(tick,15); 33 } 34 //停止动画 35 var stopAnim = function() { 36 cancelAnimationFrame(timerId) 37 } 38 var number=0; 39 var isRemove=true; 40 function tick(){ 41 number++; 42 //每次变化的时间 43 var remaining = Math.max(0, startTime + options.duration - createTime()) 44 var temp = remaining / options.duration || 0; 45 var percent = 1 - temp; 46 var setStyle = function(value){ 47 elem.style[‘top‘] = value + ‘px‘; 48 var centerW=center.offsetLeft; 49 var centerH=center.offsetTop; 50 if(value>=(centerH-42)){ 51 isOnBelow=true; 52 }else{ 53 isOnBelow=false; 54 } 55 if(dotX>=(centerW-50)&&dotX<=(centerW+200)){ 56 isSucceed=true; 57 }else{ 58 isSucceed=false; 59 } 60 } 61 if(isRemove&&isOnBelow&&isSucceed){ 62 isRemove=false; 63 stopAnim() ; 64 document.getElementById("view").removeChild(elem); 65 isStillOn=false; 66 count++; 67 document.getElementById("count").innerHTML="总分为:"+count+"分"; 68 } 69 //移动的距离 70 var now = (end - start) * percent + start; 71 if(percent === 1){ 72 setStyle(now); 73 if(isStillOn){ 74 document.getElementById("view").removeChild(elem); 75 } 76 stopAnim() ; 77 }else{ 78 setStyle(now); 79 startAnim(tick); 80 } 81 } 82 //开始执行动画 83 startAnim(tick); 84 } 85 }},1000) 86 document.getElementById("center").addEventListener("touchmove",function(e){ 87 var touch=e.targetTouches[0].pageX; 88 // if(touch<0){touch=100;} 89 // if(touch>(document.body.clientWidth-center.clientWidth)){touch=document.body.clientWidth-center.clientWidth+100} 90 document.getElementById("center").style.left=touch+"px"; 91 }); 92 93 </script>
以上是关于使用requestAnimationFrame做动画效果一的主要内容，如果未能解决你的问题，请参考以下文章
详解Web API requestAnimationFrame