用JS实现缓动的小球的效果。

缓动的小球

• 缓动的实现原理：通过定时器连续的修改当前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>