Javascript 简明教程
JavaScript - DOM Animation
DOM animation 可以通过使用 JavaScript 改变 DOM 元素的样式来实现。当变化逐渐发生且时间间隔较短时，动画看起来会连续。通常，有三种方法来使一个 DOM 元素动起来：
-
使用 CSS 过渡——它利用 CSS 中预定义的动画样式，该样式由元素属性的变化触发。
-
使用 CSS 动画——它提供了对动画时间和行为的更多控制，方法是在 CSS 文件中定义关键帧和动画属性。
-
使用 JavaScript——它提供了最大的灵活性，允许你在 JavaScript 代码中直接动态操作样式属性并创建复杂的动画。
本章提供了如何使用 JavaScript 使 DOM 元素动起来的基础知识。
Animate DOM Elements with JavaScript
JavaScript 可用于改变 DOM 元素的样式。
你可以在一个特定的时间范围之后改变 DOM 元素的样式，以使它们动起来。例如，你可以使用 setInterval() 方法改变 DOM 元素的位置，让它从一个位置移动到另一个位置，并且带有动画效果。
类似地，你可以更新像“动画”这样的 CSS 属性，以使元素动态地动起来。
此外，requestAnimationFrame() 方法也可以用来使 DOM 元素动起来。
下面，你将学习使 DOM 元素动起来的多种方法。
Animate DOM elements using setInterval() method
你可以在每次时间范围之后调用一个 setInterval() 方法，并改变 DOM 元素的样式来使它们动起来。但是，你可以保持较短的时间范围来让动画流畅地运行。
Syntax
按照以下语法使用 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() 函数中，我们定义了结束或继续动画的条件。
Example
在下面的代码中，我们对 <div> 元素设置了样式。
当用户点击按钮时，它会调用 startAnimation() 函数。
在 startAnimation() 函数中，我们定义了“pos”变量，并用 0 对其进行了初始化，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>Example
在以下代码中，<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) {
// 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>Animate DOM elements using requestAnimationFrame() method
requestAnimationFrame() 方法用于像 setInterval() 方法一样给 DOM 元素做动画。它会连续执行任务，并在浏览器中重新绘制下一帧。
requestAnimationFrame() 方法比 setInterval() 方法让渲染更加高效。
Syntax
遵循以下语法，使用 requestAnimationFrame() 方法给 DOM 元素做动画。
function animate() {
// Animation logic
// Request the next animation frame
requestAnimationFrame(animate);
}
// Animation loop
animate();让我们来理解一下 requestAnimationFrame() 方法的工作原理。
-
您将回调函数作为 requestAnimationFrame() 方法的参数传递，以执行下一帧。
-
Web 浏览器将在重新绘制下一帧前执行回调。
-
回调函数将更新 DOM 元素。
-
浏览器将重新绘制 DOM 元素。
-
再次，浏览器将调用回调函数，而循环将继续进行。
您可以使用 cancelAnimationFrame() 方法取消动画。
Example
在以下代码中，我们定义了 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>Animate DOM Elements by changing the CSS Properties
CSS 的“动画”属性可以用来为 DOM 元素添加动画。JavaScript 也允许自定义“动画”属性。
Syntax
请按照以下语法在 JavaScript 中，通过更改元素的“动画”属性值，为 DOM 元素添加动画。
element.style.animation = "key_frame_name duration timing_function iterationCount";Property values
-
key_frame_name − 这是关键帧的名称，您需要在 CSS 中对此进行定义。
-
duration − 这是动画的持续时间。
-
timing_function − 它用于设置动画应如何执行。
-
iterationCount − 它指定动画应重复多少次。
Example
在下方代码中，当用户单击按钮时，我们将调用 animateDiv() 函数，并更新 div 元素的 style 对象的“动画”属性值。
我们已经在 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 元素添加动画。此外，它可以用于同时执行不同的动画。