使用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

requestAnimationFrame 使用小记

requestAnimationFrame简介

秀才提笔忘了字:javascript使用requestAnimationFrame实现动画

使用requestAnimationFrame做动画效果一

移动端滑屏全应用requestAnimationFrame的兼容与使用