動畫函式簡單封裝

主義函式需要傳遞2個引數，動畫物件和移動到的距離

function animate(obj, target, pos = undefined) {
    // obj是動畫物件，target是目標距離，pos是定位方式。
    if (obj.style.position != '' && pos == undefined);
    else if (pos == undefined) obj.style.position = 'relative';
    else obj.style.position = pos;

    var timer = setInterval(function() {
        if (obj.offsetLeft >= target) {
            clearInterval(timer);
        }
        obj.style.left = obj.offsetLeft + 1 + 'px';
    }, 10);
}
 

動畫函式給不同元素記錄不同定時器

如果多個元素都使用這個動畫函式，每次都要var宣告定時器。我們可以給不同的元素使用不同的定時器（自己專門用自己的定時器）。
核心原理：利用js是一門動態語言，可以很方便的給當前物件新增屬性。
可以利用這一規則，優化上面的程式碼，如下所示:

function animate(obj, target, pos = undefined) {
    ...
    obj.timer = setInterval(function() {
        if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
        }
        ...
    }, 10);
}
 

function animate(obj, target, pos = undefined) {
    ...
    clearInterval(obj.timer);
    ...
}

緩動效果原理

緩動動畫就是讓元素運動速度有所變化，最常見的是讓速度慢慢停下來
思路：

1. 讓盒子每次移動的距離慢慢變小，速度就會慢慢落下來。
2. 核心演算法：$(目標值-現在的位置)/10$ 作為移動距離的步長。