js缓动动画函数封装

最新推荐文章于 2022-10-27 14:56:32 发布

菜菜的小博

最新推荐文章于 2022-10-27 14:56:32 发布

阅读量135

点赞数 1

分类专栏： JavaScript 文章标签： javascript css3 css

本文链接：https://blog.csdn.net/m0_67198021/article/details/125933785

版权

JavaScript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

动画函数封装

1.动画实现原理

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

实现步骤：

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

2.动画函数简单封装

注意函数需要传递2个参数，动画对象和移动到的距离。

<style>
    div {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: aqua;
    }

    span {
      position: absolute;
      display: block;
      width: 150px;
      height: 150px;
      background-color: bisque;
      top: 200px;
    }
  </style>
<body>
  <div></div>
  <span>夏雨荷</span>
  <script>
    var div = document.querySelector('div');
    var span = document.querySelector('span')
    // 简单动画函数封装obj目标对象 target 目标位置
    function animate(obj, target) {
      var timer = setInterval(function () {
        if (obj.offsetLeft >= target) {
          clearInterval(timer);
        }
        obj.style.left = obj.offsetLeft + 1 + 'px';
      }, 30)
    }
    // 调用函数
    animate(div, 300);
    animate(span, 200);
  </script>
</body>

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

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

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

<style>
    div {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: aqua;
    }

    span {
      position: absolute;
      display: block;
      width: 150px;
      height: 150px;
      background-color: bisque;
      top: 200px;
    }
  </style>
<body>
  <button>点击夏雨荷才走</button>
  <div></div>
  <span>夏雨荷</span>
  <script>
    var div = document.querySelector('div');
    var span = document.querySelector('span')
    var btn = document.querySelector('button')
    // 简单动画函数封装obj目标对象 target 目标位置
    function animate(obj, target) {
      // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
      // 解决方案就是 让我们只有一个定时器执行
      // 先清除以前的定时器
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        if (obj.offsetLeft >= target) {
          // 停止动画 本质上是停止定时器
          clearInterval(obj.timer);
        }
        obj.style.left = obj.offsetLeft + 1 + 'px';
      }, 30)
    }
    // 调用函数
    animate(div, 300);
    btn.addEventListener('click', function () {
      animate(span, 200);
    })
  </script>
</body>