系列文章導(dǎo)航

JavaScript動(dòng)畫1-速度動(dòng)畫
JavaScript動(dòng)畫2-緩沖運(yùn)動(dòng)
JavaScript動(dòng)畫3-多物體運(yùn)動(dòng)
JavaScript動(dòng)畫4-任意屬性值
JavaScript動(dòng)畫5-鏈?zhǔn)竭\(yùn)動(dòng)
JavaScript動(dòng)畫6-同時(shí)運(yùn)動(dòng)
所有源代碼

緩沖運(yùn)動(dòng)

上一篇文章中，我們說的動(dòng)畫效果中速度都是恒定的，一直保持不變。但現(xiàn)實(shí)生活中，物體運(yùn)動(dòng)的速度往往是變化的，比如火車進(jìn)站的時(shí)候，速度越來越慢，最終速度降為0才停下來。

這在動(dòng)畫中叫做緩沖。

那么在JavaScript中怎么實(shí)現(xiàn)緩沖呢？很簡單，只要每次運(yùn)動(dòng)的時(shí)候把速度變化一下就可以了。這種變化可以有一個(gè)參考，比如我們這里就是根據(jù)元素與目標(biāo)終點(diǎn)的距離來變化速度的，距終點(diǎn)越近，速度越慢。

還是跟上一節(jié)同樣的HTML結(jié)構(gòu)，只不過元素的id換了一下：

<div id="div3">
    <span id="share3">分享</span>
</div>

JS動(dòng)畫演示1

//緩沖運(yùn)動(dòng)
(function () {
    var div3 = document.getElementById("div3");
    var timer = null;

    div3.onmouseover = function () {
        startMove(0);
    };
    div3.onmouseout = function () {
        startMove(-200);
    };
    function startMove(targetPosition) {
        clearInterval(timer);

        timer = setInterval(function () {
            var speed = (targetPosition - div3.offsetLeft) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (div3.offsetLeft == targetPosition) {
                clearInterval(timer);
            } else {
                div3.style.left = div3.offsetLeft + speed + 'px';
            }
        }, 20);
    }
})();

演示效果如下：

JS動(dòng)畫演示4

是不是很簡單呢？

趕快自己動(dòng)手做一下吧！