javaScript交互补充2（动画函数封装）

2.1、简单动画实现

**核心原理：**通过定时器setInterval()不断移动盒子位置

实现步骤：

- 获得盒子当前位置、
- 让盒子在当前位置上加上1个移动距离、
- 利用定时器不断重复这个操作、
- 加一个结束定时器的条件
- 需要给元素加定位，利用left值变化改变元素的位置

javascript 复制代码

    <!-- 需求：小盒子从左向右移动，移动到500px的地方，停下 -->
<script>
      var box = document.querySelector("div");
      var timer = setInterval(function () {
        if (box.offsetLeft === 500) {
          clearInterval(timer);
          return;
        }
        box.style.left = box.offsetLeft + 10 + "px";
      }, 30);
    </script>

2.2、简单动画函数封装

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>02.封装简单动画函数</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        position: relative;
        left: 0;
      }
      span {
        background-color: pink;
        position: relative;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div>动画1</div>
    <span>动画2</span>
    <!-- 封装函数，传入不同的对象，目标停止值，都可以调用动画 -->
    <script>
      function animation(obj, target) {
        var timer = setInterval(function () {
          if (obj.offsetLeft === target) {
            clearInterval(timer);
            return;
          }
          obj.style.left = obj.offsetLeft + 10 + "px";
        }, 30);
      }
      var box = document.querySelector("div");
      var s1 = document.querySelector("span");

      animation(box, 500);
      animation(s1, 300);
    </script>
  </body>
</html>

2.3、优化动画函数

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

如果多个元素都使用这个动画函数，每次都要var 声明定时器，我们可以给不同元素使用不同的定时器（自己用自己的定时器）

核心原理：利用js是一门动态语言，可以很方便的给当前对象添加属性

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>03.优化动画函数</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        position: relative;
        left: 0;
      }
      span {
        background-color: pink;
        position: relative;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div>动画1</div>
    <br />
    <button>点击按钮，执行动画函数</button><br />
    <span>动画2</span>
    <!-- 优化1:根据传入的不同对象，将timer作为属性添加给不同的对象，减少开辟的空间 -->
    <!-- 优化2:保证只有一个定时器在执行 -->
    <script>
      function animation(obj, target) {
        //在开启动画前，先关闭前一个定时器，保证只有一个定时器在执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
          if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
            //优化3:当达到目标值后，再点击也不会执行了
            return;
          }
          obj.style.left = obj.offsetLeft + 10 + "px";
        }, 30);
      }
      var box = document.querySelector("div");
      var s1 = document.querySelector("span");
      var btn = document.querySelector("button");

      btn.addEventListener("click", function () {
        animation(s1, 300);
      });
      animation(box, 500);
    </script>
  </body>
</html>

2.4、缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

让盒子每次移动的距离慢慢变小，速度就会慢慢落下来

核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长

停止的条件是：让当前盒子位置等于目标位置就停止定时器

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>04.缓动画实现</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: relative;
        left: 0;
      }
    </style>
  </head>
  <body>
    <button>点击按钮，执行动画函数</button><br />
    <div>动画2</div>
    <script>
      function animation(obj, target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
          // 定义step，来代表每次移动的距离值，（目标值-现在的位置）/10
          var step = (target - obj.offsetLeft) / 10;
          if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            return;
          }
          obj.style.left = obj.offsetLeft + step + "px";
        }, 30);
      }

      var s1 = document.querySelector("div");
      var btn = document.querySelector("button");
      btn.addEventListener("click", function () {
        animation(s1, 500);
      });
    </script>
  </body>
</html>

2.5、动画函数优化

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>05.优化缓动动画动画函数</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        left: 0;
      }
    </style>
  </head>
  <body>
    <button id="btn01">点击按钮，执行动画函数 500</button><br />
    <button id="btn02">点击按钮，执行动画函数 800</button><br />

    <div>丹洋其</div>
    <script>
      //优化三  加回调函数，可以在执行动画后，再执行其他内容
      function animation(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
          // 定义step，来代表每次移动的距离值
          // 优化一：对于step会涉及到小数，将小数向上取整
          // var step = Math.ceil((target - obj.offsetLeft) / 10);
          // 优化二：动画还是会涉及到往回走，如果往回走，则step会是负值，要向小取整
          var step = (target - obj.offsetLeft) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            // 如果传入了回调，则执行回调，否则，就不执行
            if (callback) {
              callback();
            }
          } else {
            // console.log(222);
            obj.style.left = obj.offsetLeft + step + "px";
          }
        }, 15);
      }

      var s1 = document.querySelector("div");
      var btn01 = document.querySelector("#btn01");
      var btn02 = document.querySelector("#btn02");

      btn01.addEventListener("click", function () {
        animation(s1, 500);
      });
      btn02.addEventListener("click", function () {
        animation(s1, 800, function () {
          alert("111");
        });
      });
    </script>
  </body>
</html>

2.6、animation.js文件并使用

animation.js

javascript 复制代码

function animation(obj, target, callback) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    var step = (target - obj.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if (obj.offsetLeft == target) {
      clearInterval(obj.timer);
      if (callback) {
        callback();
      }
    } else {
      console.log(222);
      obj.style.left = obj.offsetLeft + step + "px";
    }
  }, 15);
}

简单使用

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .nav {
        width: 30px;
        height: 30px;
        background-color: blueviolet;
        position: fixed;
        text-align: center;
        line-height: 30px;
        right: 0px;
        top: 40%;
      }
      .con {
        position: absolute;
        left: 0px;
        top: 0;
        width: 200px;
        height: 30px;
        background-color: blueviolet;
        z-index: -1;
      }
    </style>
    <script src="./animation.js"></script>
  </head>
  <body>
    <div class="nav">
      <span>⬅️</span>
      <div class="con">移入弹出</div>
    </div>
    <script>
      var s1 = document.querySelector("span");
      var nav = document.querySelector(".nav");
      var con = document.querySelector(".con");
      nav.addEventListener("mouseenter", function () {
        animation(con, -170, function () {
          s1.innerHTML = "➡️";
        });
      });
      nav.addEventListener("mouseleave", function () {
        animation(con, 0, function () {
          s1.innerHTML = "⬅️";
        });
      });
    </script>
  </body>
</html>