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 {
        // change style to animate
    }
}

在上面的语法中，我们使用 setInterval() 方法启动动画，并在每隔“timeframe”毫秒后调用 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");
      // Starting position
      let pos = 0;
      // Changing frames for animation
      let id = setInterval(animationFrame, 5);
      function animationFrame() {
        // Stop the animation
        if (pos == 350) {
          clearInterval(id);
        } else {
          pos++;
          elem.style.left = pos + "px";
        }
      }
    }
  </script>
</body>
</html>

示例

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

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

在 `animationFrame()` 函数中，我们将 `

` 元素的不透明度更改 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) {
          // Stop animation
          clearInterval(id);
          parent.style.opacity = 1;
          parent.style.backgroundColor = "red";
        } else {
          // Decrease the opacity
          parent.style.opacity = opacity;
          opacity = opacity - 0.1;
        }
      }
    }
  </script>
</body>
</html>

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

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

`requestAnimationFrame()` 方法比 `setInterval()` 方法更有效率地进行渲染。

语法

遵循以下语法使用 `requestAnimationFrame()` 方法来动画化 DOM 元素。

function animate() {
    // Animation logic
    // Request the next animation frame
    requestAnimationFrame(animate);
}
// Animation loop
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()"> 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";
          // Make a call for a next frame
          animationId = requestAnimationFrame(animationFrame);
        }
      }
      // Start Animation
      animationFrame();
    }

    function stopAnimation() {
      // Stop animation
      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 元素。此外，它还可以用于同时执行不同的动画。

打印页面
上一页
下一页
广告