动画排序

在本评估中，您将更新一个页面以按顺序播放一系列动画。为此，您将使用我们在 如何使用 Promise 文章中学习的一些技巧。

先决条件 对 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"，您将看到三个以对角线排列的图像

Screenshot of sequencing-animations assessment page

这些图像取自我们关于 使用 Web Animations API 的指南。

注意：如果您遇到问题，可以在我们的 沟通渠道 中联系我们。

项目简介

我们希望更新此页面，以便对所有三个图像应用动画，一个接一个。因此，当第一个动画完成时，我们开始第二个动画，当第二个动画完成时，我们开始第三个动画。

动画已在 "main.js" 中定义：它只是旋转图像并缩小它，直到它消失。

为了让您更直观地了解我们希望页面如何工作，请 查看完成的示例。请注意，动画只运行一次：要再次查看它们，请重新加载页面。

完成步骤

动画第一个图像

我们正在使用 Web Animations API 来动画化图像，特别是 element.animate() 方法。

更新 "main.js" 以添加对 alice1.animate() 的调用，如下所示

js
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。因此，我们可以使用此 Promise 来知道何时开始下一个动画。

我们希望您尝试几种不同的方法来实现这一点，以加强使用 Promise 的不同方法。

  1. 首先，实现一些可行的方法，但具有我们在 关于使用回调的讨论 中看到的“回调地狱”问题的 Promise 版本。
  2. 接下来，将其实现为一个 Promise 链。请注意，由于您可以使用 箭头函数 的不同形式，因此您可以以多种不同的方式编写它。尝试一些不同的形式。哪种最简洁？您觉得哪种最易读？
  3. 最后，使用 async 和 await 来实现它。

请记住，element.animate() 不 返回 Promise：它返回一个具有 finished 属性的 Animation 对象，该属性是一个 Promise。