JavaScript动画2-缓冲运动

系列文章导航

JavaScript动画1-速度动画
JavaScript动画2-缓冲运动
JavaScript动画3-多物体运动
JavaScript动画4-任意属性值
JavaScript动画5-链式运动
JavaScript动画6-同时运动
所有源代码

缓冲运动

上一篇文章中，我们说的动画效果中速度都是恒定的，一直保持不变。但现实生活中，物体运动的速度往往是变化的，比如火车进站的时候，速度越来越慢，最终速度降为0才停下来。

这在动画中叫做缓冲。

那么在JavaScript中怎么实现缓冲呢？很简单，只要每次运动的时候把速度变化一下就可以了。这种变化可以有一个参考，比如我们这里就是根据元素与目标终点的距离来变化速度的，距终点越近，速度越慢。

还是跟上一节同样的HTML结构，只不过元素的id换了一下：

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

JS动画演示1

//缓冲运动
(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动画演示4

是不是很简单呢？

赶快自己动手做一下吧！