缓冲运动的特性
- 逐渐变慢,最后停止
- 距离越远速度越大
- 速度由距离决定
- 速度=(目标值-当前值)/缩放系数
距离大,速度大。
距离小,速度小。
速度和距离成正比。
缓冲运动的时候速度一定要取整,如果速度0.9的话,不取整会直接变成0;速度大于0应向上取整,小于0应向下取整。
下面我们就来做一个div从0移动到300的缓冲运动,做一个div从600移动到300的缓冲运动。
代码实现缓冲运动
<!DOCTYPE html>
<html><head><title>缓冲运动</title><style>#div1{width: 100px;height: 100px;background: red;position: absolute;/* left: 0; */left: 600px;top: 50px;}#div2{/* 300位置的参考线 */width: 1px;height: 300px;position: absolute;left: 300px;top: 0;background: #000;}</style><script>window.onload=function(){var oBtn=document.getElementById("btn1");oBtn.onclick=function(){startMove();}}function startMove(){var oDiv=document.getElementById("div1");setInterval(function(){var speed=(300-oDiv.offsetLeft)/10;speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整oDiv.style.left=oDiv.offsetLeft+speed+"px";},30);}</script></head><body><input id="btn1" type="button" value="开始运动" /><div id="div1"></div><div id="div2"></div></body>
</html>