JavaScript - DOM 动画

你好，未来的网页开发者们！今天，我们将踏上一段激动人心的旅程，探索 JavaScript DOM 动画的世界。作为你友好的计算机科学老师，我很高兴能引导你学习这个迷人的主题。相信我，在本课结束时，你将能够使用动画使网页焕发生机！

JavaScript - DOM Animation

使用 JavaScript 动画化 DOM 元素

在我们深入了解动画的细节之前，让我们快速回顾一下 DOM 是什么。DOM 代表文档对象模型，它本质上是一个用于 HTML 文档的编程接口。它将文档的结构表示为树状层次结构，允许我们使用 JavaScript 操作网页的内容和结构。

现在，当我们谈论动画化 DOM 元素时，我们指的是随时间改变它们的属性，以产生运动或转换的错觉。这就像创建一个动画书，但用的是代码！

让我们从一个简单的例子开始：

<div id="myBox" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>

<script>
let box = document.getElementById('myBox');
let position = 0;

function moveBox() {
position += 1;
box.style.left = position + 'px';
}

setInterval(moveBox, 10);
</script>

在这个例子中，我们正在将一个红色盒子在屏幕上移动。让我们分解一下：

我们创建了一个带有一些初始样式的 <div> 元素。
我们使用 document.getElementById('myBox') 来获取我们盒子的引用。
我们定义了一个 moveBox() 函数，它增加 position 并更新盒子的 left 样式属性。
我们使用 setInterval() 来每 10 毫秒调用一次 moveBox()，创建一个平滑的动画。

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

setInterval() 方法是创建 JavaScript 动画的一种方式。它会以指定的间隔重复调用一个函数。下面是一个更复杂的例子：

<div id="bouncer" style="width: 50px; height: 50px; background-color: blue; border-radius: 25px; position: absolute;"></div>

<script>
let bouncer = document.getElementById('bouncer');
let x = 0;
let y = 0;
let dx = 2;
let dy = 2;

function animate() {
x += dx;
y += dy;

if (x > window.innerWidth - 50 || x < 0) dx = -dx;
if (y > window.innerHeight - 50 || y < 0) dy = -dy;

bouncer.style.left = x + 'px';
bouncer.style.top = y + 'px';
}

setInterval(animate, 10);
</script>

这个脚本创建了一个弹跳球效果：

我们设置了初始位置 (x，y) 和速度 (dx，dy)。
在 animate() 函数中，我们根据速度更新位置。
我们检查球是否撞击窗口边缘，如果是，则反转其方向。
我们更新球在屏幕上的位置。
setInterval() 每 10 毫秒调用一次 animate()，创建平滑的运动。

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

虽然 setInterval() 可以工作，但现代浏览器提供了一种更高效的方法：requestAnimationFrame()。此方法告诉浏览器你希望执行一个动画，并请求浏览器在下次重绘之前调用指定的函数来更新动画。

让我们使用 requestAnimationFrame() 重写我们的弹跳球：

<div id="bouncer" style="width: 50px; height: 50px; background-color: green; border-radius: 25px; position: absolute;"></div>

<script>
let bouncer = document.getElementById('bouncer');
let x = 0;
let y = 0;
let dx = 2;
let dy = 2;

function animate() {
x += dx;
y += dy;

if (x > window.innerWidth - 50 || x < 0) dx = -dx;
if (y > window.innerHeight - 50 || y < 0) dy = -dy;

bouncer.style.left = x + 'px';
bouncer.style.top = y + 'px';

requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
</script>

这里的主要区别是，我们不是使用 setInterval()，而是在 animate() 函数的末尾调用 requestAnimationFrame(animate)。这创建了一个循环，浏览器在每次重绘前调用 animate()。

通过改变 CSS 属性动画化 DOM 元素

到目前为止，我们一直直接使用 JavaScript 改变 CSS 属性。然而，现代网页开发通常会利用 CSS 过渡和动画来获得更平滑的性能。让我们看看如何使用 JavaScript 触发 CSS 动画：

<style>
.box {
width: 100px;
height: 100px;
background-color: purple;
position: absolute;
transition: all 0.5s ease;
}
</style>

<div id="myBox" class="box"></div>

<script>
let box = document.getElementById('myBox');
let position = 0;

function moveBox() {
position += 50;
box.style.transform = `translateX(${position}px)`;

if (position < 200) {
requestAnimationFrame(moveBox);
}
}

box.addEventListener('click', function() {
position = 0;
requestAnimationFrame(moveBox);
});
</script>

在这个例子中：

我们定义了一个带有过渡属性的 CSS 类。
我们的 JavaScript 函数改变了 transform 属性而不是 left。
我们使用 requestAnimationFrame() 创建一个平滑的动画。
动画在盒子被点击时开始。

这种方法通常会导致更平滑的动画，因为浏览器可以优化 CSS 过渡。

下面是一个总结我们讨论过的方法的表格：

方法	优点	缺点
`setInterval()`	简单易懂，易于实现	可能效率较低，可能导致卡顿
`requestAnimationFrame()`	更高效，与浏览器刷新率同步	实现稍微复杂
CSS 过渡	非常平滑，可以被硬件加速	对动画步骤的控制有限

记住，动画可以极大地提升用户体验，但应该谨慎使用。过多的动画可能会分散用户注意力，甚至导致某些用户产生晕动症。

这就是我们 JavaScript DOM 动画的旅程！我希望你喜欢这节课，就像我教它一样。继续练习，继续动画化，最重要的是，继续享受编码的乐趣！

Credits: Image by storyset