【原生JS组件】javascript 运动框架

大家都知道JQuerry有animate方法来给DOM元素进行运动，CSS3中也有transition、transform来进行运动。而使用原生的Javascript来控制元素运动，需要写很多运动的细节以及兼容。

然而，当你的BOSS不让你使用庞大的JQ框架，而且你开发的产品也需要在一些不兼容CSS3的浏览器运行的时候，你是否觉得每次都要开个定时器来琢磨运动该怎么进行，是件很费力的事情呢？

那么福利来了，笔者最近总结了两个常用的运动框架，并将其写成组件，
只要按照下面的方法调用，即可方便使用。

1.在你的页面中引入js

<script src="Mover.js"></script>

2.在你的js代码中创建Mover对象

<script>
window.onload=function(){
    
    var mover = new Mover();
};
</script>

3.开始使用mover！
用法说明：笔者写的组件包含了两种运动框架供使用，一种是基于速度的；一种是基于时间的，让我们来先看看基于速度的运动框架的用法

startMoveBySpeed（obj, json, endFn）；

参数obj : 传入要运动的对象

参数json : 以json的形式传入要运动的属性，包括left、top、width、height等以px为单位的属性和透明度opacity，他们的值是运动的终点

参数endFn(可选) : 结束运动后要执行的方法

<script>
//基于速度的运动框架用法
window.onload=function(){
    
    //得到你要运动的元素
    var oDiv = document.getElementsByTagName('div')[0];

    //使用运动框架
    var mover = new Mover();
    oDiv.onclick=function(){
        
        mover.startMoveBySpeed(this,{
   'left':200,'width':300,'opacity':50});
    //使oDiv的left运动到200px,宽度变为300px,透明度变为50%
    }

};
</script>

让我们来看看另外一种基于时间的运动框架

startMoveByTime(obj, json, options, endFn )

参数obj : 传入要运动的对象

参数json : 以json的形式传入要运动的属性，包括left、top、width、height等以px为单位的属性和透明度opacity，他们的值是运动的终点

参数options : 以json的形式传入传入运动的总时间和运动方式，如：
{
‘times’ :