JavaScript - DOM 动画

DOM 动画可以通过使用 JavaScript 更改 DOM 元素的样式来实现。当更改缓慢且时间间隔较小时，动画看起来是连续的。通常，有三种方法可以为 DOM 元素添加动画效果:

• 使用 CSS 过渡 - 它利用 CSS 中预定义的动画样式，这些样式由元素属性的变化触发。

• 使用 CSS 动画 - 通过在 CSS 文件中定义关键帧和动画属性，可以更好地控制动画时间和行为。

• 使用 JavaScript - 它提供了最大的灵活性，允许您动态操作样式属性并直接在 JavaScript 代码中创建复杂的动画。

本章将介绍如何使用 JavaScript 为 DOM 元素添加动画效果的基本知识。

使用 JavaScript 为 DOM 元素添加动画效果

JavaScript 可用于更改 DOM 元素的样式。

您可以在特定时间帧后更改 DOM 元素的样式，以为它们添加动画效果。例如，您可以使用 setInterval() 方法更改 DOM 元素的位置，使其通过动画从一个位置移动到另一个位置。

同样，您可以更新 CSS 属性(例如 animation 等)，从而动态地为元素添加动画效果。

此外，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() 方法启动动画，并在每时间帧毫秒后调用 frame_func() 函数。

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

示例

在下面的代码中，我们为 <div> 元素添加了样式。

当用户点击按钮时，它会调用 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()"> Animate 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>

示例

在下面的代码中，<div> 元素的背景颜色为绿色。

我们使用 setInterval() 方法每 50 毫秒调用一次 animationFrame() 函数。

在 animationFrame() 函数中，我们将 <div> 元素的不透明度改变 0.1。当不透明度小于或等于 0 时，我们使用 clearInterval() 方法停止动画。

<!DOCTYPE html>
<html>
<head>
  <style>
    #parent {
      width: 700px;
      height: 200px;
      background: green;
    }
  </style>
</head>
<body>
  <div id = "parent">
  </div>
  <br>
  <button onclick = "startAnimation()"> Animate Div </button>
  <script>
    function startAnimation() {
      const parent = document.getElementById("parent");
      let opacity = 1;
      let id = setInterval(animationFrame, 50);
      function animationFrame() {
        if (opacity <= 0) {
          // 停止动画
          clearInterval(id);
          parent.style.opacity = 1;
          parent.style.backgroundColor = "red";
        } else {
          // 降低不透明度
          parent.style.opacity = opacity;
          opacity = opacity - 0.1;
        }
      }
    }
  </script>
</body>
</html>

使用 requestAnimationFrame() 方法为 DOM 元素添加动画

requestAnimationFrame() 方法用于为 DOM 元素添加动画，类似于 setInterval() 方法。它会持续执行任务，并在浏览器中重新绘制下一帧。

requestAnimationFrame() 方法比 setInterval() 方法渲染效率更高。

语法

请按照以下语法使用 requestAnimationFrame() 方法为 DOM 元素添加动画。

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

让我们了解 requestAnimationFrame() 方法的工作原理。

• 您将回调函数作为 requestAnimationFrame() 方法的参数传递，以执行下一帧。

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

• 回调函数将更新 DOM 元素。

• 浏览器将重新绘制 DOM 元素。

• 再次，浏览器将调用回调函数，然后循环将继续。

您可以使用 cancellationAnimationFrame() 方法取消动画。

示例

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

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

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

stopAnimation() 函数使用 cancellationAnimationFrame() 方法来停止动画。它以 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()"> Animate Div </button>
  <button onclick = "stopAnimation()"> Stop Animation </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 属性。

语法

按照以下语法，通过在 JavaScript 中更改元素的 animation 属性值来为 DOM 元素添加动画。

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

属性值

• key_frame_name − 关键帧的名称，您需要在 CSS 中定义。

• duration − 动画的持续时间。

• timing_function − 用于设置动画的执行方式。

• iterationCount − 指定动画重复的次数。

示例

在下面的代码中，当用户点击按钮时，我们调用 animateDiv() 函数并更新 div 元素的 style 对象的 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"> Animate </div>
  <br>
  <button onclick = "animateDiv()"> Animate 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 元素添加动画效果。此外，它还可以同时执行不同的动画。