DOM 动画

动画有助于提高页面的交互性和可访问性，本章节学习使用 JavaScript 创建 HTML 动画。

动画有助于提高页面的交互性和可访问性，本章节学习使用 JavaScript 创建 HTML 动画。

一个基本的网页

为了演示如何使用 JavaScript 创建 HTML 动画，我们将使用一个简单的网页：

<!DOCTYPE html>
<html>
  <body>
    <h1>我的第一个 JavaScript 动画</h1>
  </body>
</html>

创建动画容器

所有动画都应该与容器元素相关。这里创建一个容器元素（id="container"）和一个参与动画的元素（id="animate"）。

<div id="container">
  <div id="animate">动画将在这里发生...</div>
</div>

容器元素应使用相对定位。动画元素应使用绝对定位。

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}

动画代码

JavaScript 动画是通过对元素样式进行编程来实现的。

这些更改由计时器调用。当定时器间隔越小，动画看起来的连续性就越好。

基本代码是：

// 创建定时器间隔执行
id = setInterval(frame, 5);

function frame() {
  if (/* 测试条件 */) {
    clearInterval(id);
  } else {
    /* 更改元素样式的代码 */
  }
}

使用 JavaScript 创建完整动画

下面的代码将元素从容器的左上角移动到右下角，逻辑是：每隔 5 毫秒，top 和 left 的值就增加 1px, 直到到达右下角。

function myMove() {
  let id = null;
  const elem = document.getElementById("animate");
  let pos = 0;
  clearInterval(id);
  id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
    }
  }
}

整个例子的完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container {
        width: 400px;
        height: 400px;
        position: relative;
        background: yellow;
      }
      #animate {
        width: 50px;
        height: 50px;
        position: absolute;
        background: red;
      }
    </style>
  </head>
  <body>
    <h1>我的第一个 JavaScript 动画</h1>
    <div id="container">
      <div id="animate"></div>
    </div>

    <p><button onclick="myMove()">启动动画</button></p>
    <script>
      function myMove() {
        let id = null;
        const elem = document.getElementById("animate");
        let pos = 0;
        clearInterval(id);
        id = setInterval(frame, 5);
        function frame() {
          if (pos == 350) {
            clearInterval(id);
          } else {
            pos++;
            elem.style.top = pos + "px";
            elem.style.left = pos + "px";
          }
        }
      }
    </script>
  </body>
</html>
DOM 更改 CSS DOM 事件