15-第十五章 运动(中)

---

四、时间加速版运动框架

加速度

例：假如两辆汽车开始静止，均匀地加速后，达到10m/s的速度，A车花了10s，而B车只用了5s。它们的速度都从0变为10m/s，速度改变了10m/s。所以它们的速度变化量是一样的。但是很明显，B车变化得更快一些。我们用加速度来描述这个现象：B车的加速度（a=Δv/Δt，其中的Δv是速度变化量）>A车的加速度。
显然，当速度变化量一样的时候，花时间较少的B车，加速度更大。也就是说B车的启动性能相对A车好一些。因此，加速度是表示物体速度变化快慢的物理量。

S是距离，Vf终速度，t是加速的时间。Vf=at，a是加速度，替换可得这是匀加速运动距离的通常表达式

image.png

1.    move(Obox,'left','800px',1500);//调用move函数,指定传递实参
2.        function move(obj,attr,target,tar_t){//指定接受形参
3.            target = parseFloat(target);//转化为number
4.            var init = parseFloat( getStyle(obj,attr));//获取初始样式值
5.            var init_time = new Date();//获取开始时间
6.            var sty_v;
7.            var a = 2*(target-init)/Math.pow(tar_t,8);//获取加速度
8.            (function rQAF(){
9.                var cur_t = new Date()- init_time;//获取动画时长
10.                if( cur_t>=tar_t ){//动画执行时长与动画预设总时间比值大于等于1时,
11.                   //style_val = target;//
12.                   cur_t=tar_t;
13.                   // window.cancelAnimationFrame(time);//删除requestAnimationFrame动画
14.                }else{
15.                    window.requestAnimationFrame(rQAF);
16.                }
17.                sty_v = a*Math.pow(cur_t,8)/2;//根据时间比例获取运动路程比例
18.                obj.style[attr] = init+ sty_v+'px';//设置样式
19.            })()
20.
21.
22.        }
23.        function getStyle(obj,attr){//定义获取样式函数
24.            return window.getComputedStyle? window.getComputedStyle(obj)[attr]:obj.currentStyle[attr];
25.        }

---

五、多值时间版运动框架

1.    move(Obox,{ width : '200px',
2.                    height : "200px",
3.                    left : "800px",
4.                    opacity : 1},2000,function(){ console.log('ok')});//调用move函数,指定传递实参
5.
6.        function move(obj,json,targ_t,callback){//指定接受形参
7.            var target = {}/*目标值*/,init ={}/*初始值*/,styleV/*样式*/;
8.            for(var attr in json){
9.                target[attr] = parseFloat( json[attr] );//目标值转化为number类型
10.                init[attr] = parseFloat( getStyle(obj,attr));//获取初始样式值并转化为number类型
11.            }
12.            var init_t = new Date();//获取开始时间
13.            (function rQAF(){
14.                var cur_t = new Date()-init_t;//获取当前时间与开始时间的差值--动画执行时长
15.                if( cur_t>=targ_t){//判断动画执行时长是否大于预设目标
16.                       cur_t=targ_t;//让动画执行时长等于预设目标
17.                }else{
18.                    window.requestAnimationFrame(rQAF);//调用rQAF函数一次
19.                }
20.
21.                for(var attr in json){
22.                    var a = 2*(target[attr]-init[attr])/Math.pow(targ_t,2);//获取对象属性的加速度
23.                    styleV = a*Math.pow(cur_t,2)/2;//根据动画时长设置样式
24.
25.
26.                     if(attr=='opacity'){//
27.                        obj.style[attr] = init[attr]+styleV;//设置样式
28.                        obj.style.filter = 'alpha(opacity='+styleV*100+')';//opacity兼容
29.
30.                     }else{
31.                        obj.style[attr] = init[attr]+styleV+'px';//设置样式
32.                     }
33.
34.                }
35.                cur_t==targ_t?callback&&callback.call(obj):'';//根据动画时长是否等于了预设目标，true执行回调函数，并绑定this
36.
37.            })()
38.
39.
40.        }
41.        function getStyle(obj,attr){//定义获取样式函数
42.            return window.getComputedStyle? window.getComputedStyle(obj)[attr]:obj.currentStyle[attr];
43.        }