JavaScript DOM 动画

DOM 动画可以通过使用 JavaScript 改变 DOM 元素的样式来实现。当变化是渐进的并且时间间隔很短时，动画看起来就是连续的。通常，有三种方式可以动画化一个 DOM 元素：

使用 CSS 转场效果（transitions）—— 它利用预定义的 CSS 样式动画化，这些动画化是由元素属性的变化触发的。
使用 CSS 动画（animations）—— 它通过定义关键帧和 CSS 文件内的动画属性提供了对动画时间和行为的更多控制。
使用 JavaScript —— 它提供了最大的灵活性，允许你在 JavaScript 代码中直接动态操作样式属性和创建复杂的动画。

本章节提供了一个基本的理解，如何使用 JavaScript 来动画化 DOM 元素。

使用 JavaScript 动画化 DOM 元素

JavaScript 可以用来改变 DOM 元素的样式。

你可以通过在特定的时间段后改变 DOM 元素的样式来使它们动起来。例如，你可以使用 setInterval() 方法来改变 DOM 元素的位置，从而使其从一个位置移动到另一个位置并带有动画效果。

同样地，你可以更新像‘animation’这样的 CSS 属性来动态地动画化元素。

此外，requestAnimationFrame() 方法也可以用来动画化 DOM 元素。

下面，你将学习不同的动画化 DOM 元素的方法。

使用 setInterval() 方法动画化 DOM 元素

你可以调用 setInterval() 方法来在每个时间段之后改变 DOM 元素的样式以动画化它们。然而，你可以保持时间框架较小以便动画流畅运行。

语法

遵循下面的语法来使用 setInterval() 方法动画化 DOM 元素：

let id = setInterval(frame_func, timeframe);
function frame_func() {
    if (animation_end) {
        clearInterval(id);
    } else {
        // 改变样式以动画化
    }
}

在上面的语法中，我们使用 setInterval() 方法启动动画，并且每‘timeframe’毫秒调用一次 frame_func()。

在 frame_func() 函数中，我们定义了结束或继续动画的条件。

示例

在下面的代码中，我们给定了

元素的样式。

当用户点击按钮时，它调用了 startAnimation() 函数。

在 startAnimation() 函数中，我们定义了‘pos’变量并初始化为 0，代表 div 元素的初始位置。

之后，我们使用 setInterval() 方法每 5 毫秒调用一次 animationFrame() 函数。

在 animationFrame() 函数中，如果内部 div 的位置变为 350，则我们使用 clearInterval() 方法停止动画。否则，我们改变内部 div 的左位置。

当你点击按钮时，它将从左到右移动内部 div 元素。

<!DOCTYPE html>
<html>
<head>
  <style>
    #parent {
      width: 700px;
      height: 50px;
      position: relative;
      background: yellow;
    }
    #child {
      width: 50px;
      height: 50px;
      position: absolute;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="parent">
    <div id="child"></div>
  </div>
  <br>
  <button onclick="startAnimation()">动画化 Div</button>
  <script>
    function startAnimation() {
      const elem = document.getElementById("child");
      // 初始位置
      let pos = 0;
      // 动画帧变换
      let id = setInterval(animationFrame, 5);
      function animationFrame() {
        // 停止动画
        if (pos == 350) {
          clearInterval(id);
        } else {
          pos++;
          elem.style.left = pos + "px";
        }
      }
    }
  </script>
</body>
</html>

使用 requestAnimationFrame() 方法动画化 DOM 元素

requestAnimationFrame() 方法像 setInterval() 方法一样用来动画化 DOM 元素。它持续执行任务并在浏览器中重新绘制下一帧。

requestAnimationFrame() 方法比 setInterval() 方法更有效率。

语法

遵循下面的语法来使用 requestAnimationFrame() 方法动画化 DOM 元素：

function animate() {
    // 动画逻辑
    // 请求下一动画帧
    requestAnimationFrame(animate);
}
// 动画循环
animate();

让我们理解 requestAnimationFrame() 方法是如何工作的。

你将回调函数作为 requestAnimationFrame() 方法的参数来执行下一帧。

Web 浏览器将在重绘下一帧之前执行回调。

回调函数将更新 DOM 元素。

浏览器将重绘 DOM 元素。

再次，浏览器将调用回调函数，并且循环将继续。

你可以使用 cancelAnimationFrame() 方法来取消动画。

示例

在下面的代码中，我们定义了 startAnimation() 和 stopAnimation() 函数，并在用户点击按钮时调用它们。

在 startAnimation() 函数中，我们将‘pos’的值递增 1，并更新子 div 元素的左位置。

之后，我们使用 requestAnimationFrame() 方法在 Web 浏览器中绘制下一帧。这将使子 div 元素从左到右在父 div 元素内移动。

stopAnimation() 函数使用 cancelAnimationFrame() 方法来停止动画。它需要 requestAnimationFrame() 方法返回的 id 作为参数。

<!DOCTYPE html>
<html>
<head>
  <style>
    #parent {width: 700px; height: 50px; position: relative;background: yellow;}
    #child {width: 50px;height: 50px; position: absolute; background-color: red;}
  </style>
</head>
<body>
  <div id="parent">
    <div id="child"></div>
  </div>
  <br>
  <button onclick="startAnimation()">动画化 Div</button>
  <button onclick="stopAnimation()">停止动画</button>
  <script>
    let animationId;
    let pos = 0;
    function startAnimation() {
      const elem = document.getElementById("child");
      function animationFrame() {
        if (pos < 650) {
          pos++;
          elem.style.left = pos + "px";
          // 调用下一帧
          animationId = requestAnimationFrame(animationFrame);
        }
      }
      // 开始动画
      animationFrame();
    }

    function stopAnimation() {
      // 停止动画
      if (animationId) {
        cancelAnimationFrame(animationId);
        animationId = null;
      }
    }
  </script>
</body>
</html>

通过改变 CSS 属性动画化 DOM 元素

CSS 的‘animation’属性可以用来给 DOM 元素添加动画。JavaScript 也允许自定义‘animation’属性。

语法

遵循下面的语法来通过改变元素的‘animation’属性值来动画化 DOM 元素：

element.style.animation = "key_frame_name duration timing_function iterationCount";

属性值：

key_frame_name —— 这是你需要在 CSS 中定义的关键帧名称。
duration —— 这是动画的持续时间。
timing_function —— 这是用来设置动画应如何执行。
iterationCount —— 这指定了动画应该重复多少次。

示例

在下面的代码中，当用户点击按钮时，我们调用 animateDiv() 函数并更新 div 元素样式对象的‘animation’属性值。

我们已经在 CSS 中定义了‘moveAnimation’关键帧。因此，当你点击按钮时，它将开始移动 div 元素。

<!DOCTYPE html>
<html>
<head>
  <style>
    #element {
      width: 90px;
      height: 90px;
      background: blue;
      color: white;
      position: relative;
      text-align: center;
    }
    @keyframes moveAnimation {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(550px);
      }
    }
  </style>
</head>
<body>
  <div id="element">动画化</div>
  <br>
  <button onclick="animateDiv()">动画化 Div</button>
  <script>
    function animateDiv() {
      const element = document.getElementById("element");
      element.style.animation = "moveAnimation 3s ease-in-out infinite";
    }
  </script>
</body>
</html>

动画化 DOM 元素的最佳方式是使用 requestAnimationFrame() 方法，因为它能使 DOM 元素平滑地动画化。同时，它还可以用来同时执行不同的动画。