动画函数封装

fifi家

于 2022-05-08 00:00:57 发布

阅读量228

点赞数

分类专栏： JavaScript学习笔记文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_51010474/article/details/124639340

版权

JavaScript学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

案例：从500到800 再从800到500

4、动画函数添加回调函数

案例：到达500之后背景颜色由skyblue变成pink

总结

案例：滑动效果

实现原理

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

一、匀速动画

1、实现步骤：

获得盒子当前位置
让盒子在当前位置加上一个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
注意此元素需要添加定位，才能使用element.style.left

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        position: absolute;
        top: 0;
        left: 0;
        height: 100px;
        width: 100px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      var div = document.querySelector("div");
      var timer = setInterval(function () {
        if (div.offsetLeft >= 400) {
          //停止动画 本质是停止定时器
          clearInterval(timer);
        } else {
          div.style.left = div.offsetLeft + 1 + "px";
        }
      }, 30);
    </script>
  </body>
</html>

2、动画函数的封装

function animate(obj, target) {
        // 清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        // 给不同的元素指定不同的定时器
        obj.timer = setInterval(function () {
          if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
          } else {
            obj.style.left = obj.offsetLeft + 1 + "px";
          }
        }, 30);
      }

      animate(obj, target);

问题：当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器

解决方案：先清除以前的定时器，只保留当前的一个定时器执行

clearInterval(obj.timer);

完整代码：

  <head>
    <style>
      div {
        position: absolute;
        top: 50px;
        left: 0;
        height: 100px;
        width: 100px;
        background-color: pink;
      }
      span {
        position: absolute;
        top: 200px;
        left: 0;
        height: 200px;
        width: 200px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <button>点击skyblue开始动画</button>
    <div></div>
    <span></span>
    <script>
      // obj是目标对象 target是目标位置
      function animate(obj, target) {
        // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
        // 解决方案：先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        // 给不同的元素指定不同的定时器
        obj.timer = setInterval(function () {
          if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
          } else {
            obj.style.left = obj.offsetLeft + 1 + "px";
          }
        }, 30);
      }
      var div = document.querySelector("div");
      var span = document.querySelector("span");
      var btn = document.querySelector("button");

      animate(div, 300);
      btn.addEventListener("click", function () {
        animate(span, 200);
      });
    </script>
  </body>
</html>

二、缓动效果

1、原理：

让元素运动速度有所变化，常见：让速度慢慢停下来

2、步骤：

让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
核心算法：每次移动的距离步长=（目标值-现在的位置）/ 10
停止定时器条件：当前盒子位置=目标位置

注意：步长值需要取整

function animate(obj, target) {
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        // 给不同的元素指定不同的定时器
        obj.timer = setInterval(function () {
          // 因为是动态变化的 所以步长值写到定时器的里面
          var step = (target - obj.offsetLeft) / 10;
          if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
          } else {
            // 步长公式：(目标值 - 现在的位置) / 10
            obj.style.left = obj.offsetLeft + step + "px";
          }
        }, 15);
      }

3、使动画在多个目标值之间移动

判断步长是正值还是负值——正值往大取，负值往小取

var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);

案例：从500到800 再从800到500

  <head>
    <style>
      span {
        position: absolute;
        top: 200px;
        left: 0;
        height: 200px;
        width: 200px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <button class="btn500">点击走到500</button>
    <button class="btn800">点击走到800</button>
    <span></span>
    <script>
      // obj是目标对象 target是目标位置
      function animate(obj, target) {
        // 先清除以前的定时器，只保留当前的一个定时器执行
        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);
          } else {
            // 步长公式：(目标值 - 现在的位置) / 10
            obj.style.left = obj.offsetLeft + step + "px";
          }
        }, 15);
      }
      var span = document.querySelector("span");
      var btn500 = document.querySelector(".btn500");
      var btn800 = document.querySelector(".btn800");

      btn500.addEventListener("click", function () {
        animate(span, 500);
      });
      btn800.addEventListener("click", function () {
        animate(span, 800);
      });
    </script>
  </body>
</html>

4、动画函数添加回调函数

回调函数原理

函数可以作为一个参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。

案例：到达500之后背景颜色由skyblue变成pink

  <head>
    <style>
      span {
        position: absolute;
        top: 200px;
        left: 0;
        height: 200px;
        width: 200px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <button class="btn500">点击走到500</button>
    <span></span>
    <script>
      // obj是目标对象 target是目标位置
      function animate(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 {
            // 步长公式：(目标值 - 现在的位置) / 10
            obj.style.left = obj.offsetLeft + step + "px";
          }
        }, 15);
      }
      var span = document.querySelector("span");
      var btn500 = document.querySelector(".btn500");

      btn500.addEventListener("click", function () {
        animate(span, 500, function () {
          span.style.backgroundColor = "pink";
        });
      });
    </script>
  </body>
</html>

总结

匀速动画=盒子当前位置-固定的值
缓动动画=盒子当前的位置+变化的值[（目标值-现在的位置）/10]

案例：滑动效果

此处将动画函数直接封装成了animate.js文件。

滑动.html

  <head>
    <style>
      .sliderbar {
        position: fixed;
        right: 0;
        bottom: 100px;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        color: #fff;
      }
      .con {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 40px;
        background-color: purple;
        z-index: -1;
      }
    </style>
    <script src="animate.js"></script>
  </head>
  <body>
    <div class="sliderbar">
      <span>←</span>
      <div class="con">问题反馈</div>
    </div>
    <script>
      var sliderbar = document.querySelector(".sliderbar");
      var con = document.querySelector(".con");
      sliderbar.addEventListener("mouseenter", function () {
        animate(con, -160, function () {
          sliderbar.children[0].innerHTML = "→";
        });
      });
      sliderbar.addEventListener("mouseleave", function () {
        animate(con, 0, function () {
          sliderbar.children[0].innerHTML = "←";
        });
      });
    </script>
  </body>
</html>

animate.js

// obj是目标对象 target是目标位置
function animate(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 {
        // 步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + "px";
      }
    }, 15);
  }

fifi家

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
动画函数封装

实现原理一、匀速动画1、实现步骤：2、动画函数的封装二、缓动效果1、原理：2、步骤：3、使动画在多个目标值之间移动案例：从500到800 再从800到5004、动画函数添加回调函数案例：到达500之后背景颜色由skyblue变成pink总结案例：滑动效果
复制链接

扫一扫