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（） 方法启动动画，并在每 '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");
	 	 	 // 起始位置
	 	 	 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 元素。
  • 同样，浏览器将调用回调函数，循环将继续。

您可以使用 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";
	 	 	 	 	 // 呼叫下一帧
	 	 	 	 	 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 元素进行动画处理。此外，它还可用于同时执行不同的动画。

打印本页
上一页
下一页