JavaScript自定义匀速运动框架

最近写到无缝轮播，所以用到了运动框架，就自己写了一个简单的匀速运动框架

---

需求

1. 接受对象、对象需要改变的属性值、改变过程使用的时间等参数
2. 实现 在一定的时间内，把对象指定的属性，改变对应的变化量（这里是变化量不是目标量），比如使用1s的事件让div的height增加100px
3. 匀速：不管改变的值大小，小号的时间要一致

思路

1. 记录改变对象的初始值
2. 记录改变时候的初始时间
3. 利用定时器不断去更新对象当前的状态
   
   1. 利用初始时间和当前时间的差值，与规定的时间的比值，来获得当前运动完成的比例
   2. 根据比例获得当前应该改变过的值
   3. 对象的初始值加上目前应该完成的变化值得到当前对象的对应属性值
4. 封装好的运动对象绑定在window上

代码

(function () {
    //兼容性准备
    //1.requestAnmiationFrame兼容
    var requestAnimationFrame = window.requestAnimationFrame || function(callBack){return setTimeout(callBack,1000/60);}
    //2.内部样式兼容
    function getStyle(obj) {
        return obj.currentStyle || getComputedStyle(obj)
    }
    //匀速运动
    function unifromMotion(ele, data, time) {
        /*   
        *   ele对象的*属性要在time时间内增加data[*]
        *
        *       ele --- 需要运动的对象
        *       data --- 对象需要改变的参数们和对应的变化值（json）
        *       time --- 完成一次运动花费的总时间
        */
        let startData = {},         //当前对象初始属性
            armDate = {},             //保存对象各个属性的目标值
            startTime = new Date(),   //开始运动的起始时间
            eleStyle = getStyle(ele); //运动开始时对象的所有style属性值

        for (const key in data) {
            startData[key] = parseFloat(eleStyle[key]);      //填充startData
        }

        function move() {
            let timeExpend = new Date() - startTime;    //已经运动了多久
            let proportion = timeExpend / time;        //已经运行的时间占总时间的比例
             proportion >= 1 ? proportion = 1 : requestAnimationFrame(move);
            for (const key in data) {       //遍历需要改变的属性
                ele.style[key] = startData[key]+ data[key] * proportion + 'px'; 
            }
        }
        move()
    }
    window.unifromMotion = unifromMotion;
})()