挑战：动画排序
在本挑战中，您将更新一个页面，使其按顺序播放一系列动画。为此，您将使用我们在 如何使用 Promises 文章中学到的一些技术。
| 预备知识 | 对 JavaScript 基础知识以及如何使用基于 Promise 的 API 有一定的了解。 |
|---|---|
| 目标 | 测试对如何使用基于 Promise 的 API 的理解。 |
起始点
请从 https://github.com/mdn/learning-area/tree/main/javascript/asynchronous/sequencing-animations/start 获取文件的本地副本。它包含四个文件：
- alice.svg
- index.html
- main.js
- style.css
您只需要编辑“main.js”文件。
如果您在浏览器中打开“index.html”，您会看到三张图片呈对角线排列。
这些图片取自我们关于 使用 Web Animations API 的指南。
注意：如果你遇到困难，可以通过我们的 交流渠道 与我们联系。
项目简介
我们希望更新此页面，以便为所有三张图片应用动画，一次一个。因此，当第一个动画完成后，我们开始第二个动画；当第二个动画完成后，我们开始第三个动画。
动画已在“main.js”中定义：它只是旋转图像并将其缩小直到消失。
为了让您更清楚地了解页面的工作方式，请查看完成的示例。请注意，动画只运行一次：要使其再次运行，请重新加载页面。
完成步骤
为第一张图片添加动画
我们使用 Web Animations API 为图片添加动画，特别是 element.animate() 方法。
更新“main.js”以添加对 alice1.animate() 的调用，如下所示：
const aliceTumbling = [
{ transform: "rotate(0) scale(1)" },
{ transform: "rotate(360deg) scale(0)" },
];
const aliceTiming = {
duration: 2000,
iterations: 1,
fill: "forwards",
};
const alice1 = document.querySelector("#alice1");
const alice2 = document.querySelector("#alice2");
const alice3 = document.querySelector("#alice3");
alice1.animate(aliceTumbling, aliceTiming);
重新加载页面，您应该会看到第一张图片旋转并缩小。
为所有图片添加动画
接下来，我们希望在 alice1 完成后对 alice2 添加动画，在 alice2 完成后对 alice3 添加动画。
animate() 方法返回一个 Animation 对象。此对象有一个 finished 属性，它是一个 Promise，当动画完成播放时会被 fulfilled。因此，我们可以使用此 Promise 来知道何时启动下一个动画。
我们希望您尝试几种不同的实现方式，以加强对 Promise 不同用法的理解。
-
首先，实现一个能工作的版本，但存在我们之前在 回调讨论 中看到的 Promise 版本的“回调地狱”问题。
-
接下来，将其实现为 Promise 链。请注意，由于箭头函数的不同形式，有几种不同的编写方式。尝试几种不同的形式。哪种最简洁？您觉得哪种最易读？
-
最后，使用
async和await实现它。
请记住，element.animate() 不返回 Promise：它返回一个 Animation 对象，其 finished 属性是一个 Promise。