14-第十四章 运动（上）

一、requestAnimationFrame()

当然最原始的你还可以使用 window.setTimout() 或者 window.setInterval() 通过不断更新元素的状态位置等来实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。
现在又多了一种实现动画的方案，那就是 window.requestAnimationFrame() 方法。

1、基本方法使用

        var num = 0;
        function fn() {
            num++;
            document.title = num;
            //在内部根据用户浏览器(电脑性能)情况,重复调用 fn，
            requestAnimationFrame(fn);
        }
        
        //requestAnimationFrame(fn);调用一次fn;

        //也可以如下
        fn();

2、cancelRequestAnimationFrame( timer )

添加 manage 定时管理器

        var num = 0;
        var timer;
        function fn() {
            num++;
            document.title = num;
            //在内部根据用户浏览器情况,重复调用 fn，
            timer = requestAnimationFrame(fn);
            if (num == 250) {
                cancelAnimationFrame(timer);
            }
        }
        // requestAnimationFrame(fn); 调用一次fn;
        //也可以如下
        fn();

把 requestAnimationFrame(fn) 赋值给 timer，timer 就是定时管理器

3、RequestAnimationFrame( )兼容

        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (fn) {
            setTimeout(fn, 1000 / 60);
        };

4、cancelAnimationFrame( ) 兼容

        window.cancelAnimationFrame = window.cancelAnimationFrame || window.mozCanceltAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || clearTimeout;

二、速度版运动框架

1.    var Obox = document.getElementById('box');
   

2.    move(Obox,'left',20,-6);//调用move函数,指定传递实参
   

3.    function move(obj,attr,target,speed){//指定接受形参
   

4.        target = parseFloat(target);//转化为number
   

5.        var init = parseFloat( getStyle(obj,attr));//获取初始样式值
   

6.        var time;//动画管理器
   

7.        (function rQAF(){
   

8.            init+= speed;
   

9.            time =  window.requestAnimationFrame(rQAF);//调用requestAnimationFramerQAF函数
   

10.            if( Math.abs(target-init)<=Math.abs(speed) ){//用绝对值判断是否到达目标值
    

11.               init = target;//
    

12.                window.cancelAnimationFrame(time);//删除requestAnimationFrame动画
    

13.            }
    

14.            obj.style[attr] = init+'px';//设置样式
    

15.        })()
    

18.    }
    

19.    function getStyle(obj,attr){//定义获取样式函数
    

20.        return window.getComputedStyle? window.getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    

21.    }
    

三、时间版运动框架

1.    move(Obox,'left','800px',1000);//调用move函数,指定传递实参
   

2.    function move(obj,attr,target,tar_t){//指定接受形参
   

3.        target = parseFloat(target);//转化为number
   

4.        var init = parseFloat( getStyle(obj,attr));//获取初始样式值
   

5.        var init_t = new Date();//获取开始时间
   

6.        var style_val;
   

7.        (function rQAF(){
   

8.            var cur_t = new Date()- init_t;//获取动画时长
   

9.            var prop =cur_t/tar_t;//获取动画执行时长与动画预设总时间比值
   

10.            if( prop>=1 ){//动画执行时长与动画预设总时间比值大于等于1时,
    

11.               prop=1;
    

12.            }else{
    

13.                window.requestAnimationFrame(rQAF);
    

14.            }
    

15.            style_val = (target-init)*prop;//根据时间比例获取运动路程比例
    

16.            obj.style[attr] = init+style_val+'px';//设置样式
    

17.        })()
    

20.    }
    

21.    function getStyle(obj,attr){//定义获取样式函数
    

22.        return window.getComputedStyle? window.getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    

23.    }