缓动的小球
缓动的实现原理:通过定时器连续的修改当前DOM元素的某个样式值,达到一个动态的特效。
缓动动画公式:
计算每次缓动的步长 step = ( target - leader ) / 10
计算下次的起始点 leader = leader + step
target 表示目标点。
leader 表示起始点。
step 表示从起始点到目标点每次缓动的步长。而缓动特效在实现时,随着距离 target 越来越近,step 步长值逐渐变小,从而达到非常逼真的缓动效果。
利用
<div>
设计小球,并用 CSS 设置小球的定位。为小球绑定单击事件,在处理函数中调用自定义的 animate() 实现小球的缓动。
编写 animate() 动画函数,在函数中利用定时器,根据缓动公式完成缓动动画。
CSS页面代码:
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 150px;
height: 150px;
background-color:#ddd;
border-radius: 50%;
position: absolute;
left: 500px;
top: 200px;
}
</style>