動畫排序

在本評估中，您將更新一個頁面以按順序播放一系列動畫。為此，您將使用我們在 如何使用 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。