关于JS动画

一、匀速动画

1.实现原理

通过定时器setInterval() 不断移动盒子位置

步骤：
● 获取盒子当前位置
● 让盒子在当前位置加上1个移动距、
● 利用定时器不断重复这个操作
● 加一个结束定时器的条件
● 元素需要添加定位，才能使用element.style.left

    <script>
      /* 
      - 获取盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 元素需要添加定位，才能使用element.style.left
      */

      var oDiv = document.querySelector('div')

      var timer = setInterval(function () {
   
        if (oDiv.offsetLeft >= 400) {
   
          // 停止定时器  停止动画
          clearInterval(timer)
        }
        oDiv.style.left = oDiv.offsetLeft + 1 + 'px'
      }, 50)
    </script>

2.简单动画函数封装

    <script>
      // 简单动画函数封装
      /* 
       目标对象 obj  target目标位置  time毫秒值
      */

      function animate(obj, target, time) {
   
        var timer = setInterval(function () {
   
          if (obj.offsetLeft >= target) {
   
            // 停止定时器  停止动画
            clearInterval(timer)
          }
          obj.style.left = obj.offsetLeft + 1 + 'px'
        }, time)
      }

      var oDiv = document.querySelector('div')
      animate(oDiv, 300, 50)
      var oSpan = document.querySelector('span')
      animate(oSpan, 500, 20)
    </script>

3.动画函数给不同元素记录不同的定时器

如果多个元素都使用这个动画函数，每次都要var声明这个定时器，我们可以给不同的元素声明不同的定时器（自己专门用自己的定时器）
原理：我们可以很方便的给当前的对象添加属性

 <button>按钮<