使用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的回调

 下面是一个简单的例子：


    此处不用点了，因为我无法向页面添加js代码，可是，为什么我看到别人的博客中可以呢，伤心。

      function runCode(cod1) {
        var cod = window.document.all(cod1)
        var code = cod.value;
        var newwin = window.document.open('', '', '');
        newwin.opener = null
        newwin.document.write(code);
        newwin.document.close();
    }

 

      我做了个练习：

      每隔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>

 

posted @ 2016-01-28 14:37  北倍  阅读(635)  评论(0)  编辑  收藏  举报