JavaScript实现动画与缓动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_60323200/article/details/120290455

本文介绍了JavaScript实现动画效果的原理，包括设置定时器移动元素位置，以及如何实现缓动效果，通过调整每次移动的距离使动画减速。此外，还讨论了如何在多个目标值之间来回移动元素的方法，涉及步长的正负判断和取整策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画实现原理

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

实现步骤：

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

缓动效果原理

缓动就是变速运动，最常见的就是让速度慢下来

思路：

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

动画函数多个目标值之间来回移动

点击按钮时，判断步长是正值还是负值

var step = (target - obj.offsetLeft) / 10;

step = step > 0 ? Math.ceil(step) : Math.floor(step);

如果是正值，则步长往大了取整

如果是负值则步长往小了取整

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        position: absolute;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: pink;
      }
      span {
        position: absolute;
        left: 0;
        top: 200px;
        display: block;
        width: 170px;
        height: 170px;
        line-height: 170px;
        background-color: rebeccapurple;
        color: white;
      }
    </style>
  </head>
  <body>
    <div></div>
    <button class="btn500">点击我到500</button>
    <button class="btn800">点击我到800</button>
    <span>今天也要好好敲代码哦</span>
    <script>
      //给不同元素指定了不通定时器
      function animate(obj, target) {
        //当我们不断地点击按钮，这个元素的速度会越来越快，因为开启了太多定时器
        //解决方案就是 让我们的元素只有一个定时器执行
        //先清除以前的定时器，只保留当前的一个定时器
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
          //步长值写到定时器里面
          //   var step = Math.ceil((target - obj.offsetLeft) / 10);
          var step = (target - obj.offsetLeft) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);

          if (obj.offsetLeft == target) {
            //停止动画 本质是停止定时器
            clearInterval(obj.timer);
          }
          obj.style.left = obj.offsetLeft + step + "px";
        }, 30);
      }
      var div = document.querySelector("div");
      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);
      });

      animate(div, 300);
    </script>
  </body>
</html>