JS 动画效果原理

1. 原理：

（1）获取需要添加动画的元素

（2）为此元素设置一个定时器

（3）动画效果代码书写

（4）当达到某种条件后，取消定时器

实例：一个方块盒子左移到一定位置停止.

  <style>
    .box { 
      position: absolute;
      left: 50px;
      margin-top: 30px;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>

  <div class="box"></div>
  <script>
    window.addEventListener("DOMContentLoaded", function () {
      let box = document.querySelector('.box');
      let timer = setInterval(function (e) {
        if (box.offsetLeft === 600){
          clearInterval(timer);
        }
        box.style.left = box.offsetLeft + 2 + 'px';
      }, 5)
    })
  </script>

2. 函数封装，便于复用

  <script>
    window.addEventListener("DOMContentLoaded", function () {
      let box = document.querySelector('.box');
      function moveAnimate(element, distance) {
        let timer = setInterval(function () {
          if (element.offsetLeft === distance){
            clearInterval(element.timer);
          }
          element.style.left = element.offsetLeft + 2 + 'px';
        }, 5)
      }
      moveAnimate(box, 1000);
    })
  </script>

3. 性能优化改进

问题：

（1）每次调用函数都需要声明一个timer，开辟一块内存空间使用.

（2）不同元素的定时器名称都是timer，容易引起混淆.

解决方案：

利用JS动态语言机制，为不同元素对象声明不同定时器，代码如下.

function moveAnimate(element, distance) {
// 将 let timer 改为 element.timer
        element.timer = setInterval(function () {
          if (element.offsetLeft === distance){
            clearInterval(element.timer);
          }
          element.style.left = element.offsetLeft + 2 + 'px';
        }, 5)
      }

4. 使用按钮点击事件触发动画效果时，多次点击bug问题.

在函数第一行添加一行代码【作用】：清除上次点击的动画效果，防止多次点击效果累计，造成bug.

  clearInterval(element.timer);

 5. 实现动画随着运行减速效果

      function moveAnimate(element, distance) {
        clearInterval(element.timer);
        element.timer = setInterval(function () {
// step 控制每次移动距离，为防止小数导致移动不到最终目的地，分情况取整：向左移动向下取整，向右移动向上取整
          let step = (distance - element.offsetLeft) / 100;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          if (element.offsetLeft === distance){
            clearInterval(element.timer);
          }
          element.style.left = element.offsetLeft + step + 'px'; // 这里固定值改为动态变化的 step
        }, 15)
      }

6. 回调函数的简单试用

【链接转载仅作为个人学习使用】

https://www.bilibili.com/video/BV1Sy4y1C7ha?p=316