最近寫到無縫輪播，所以用到了運動框架，就自己寫了一個簡單的勻速運動框架

需求

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;
})()