系列文章导航
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
是不是很简单呢？
赶快自己动手做一下吧！
