挑戰：動畫排序

起始點

請從 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 不同用法的理解。

1. 首先，實現一個能工作的版本，但存在我們之前在 回撥討論 中看到的 Promise 版本的“回撥地獄”問題。

2. 接下來，將其實現為 Promise 鏈。請注意，由於箭頭函式的不同形式，有幾種不同的編寫方式。嘗試幾種不同的形式。哪種最簡潔？您覺得哪種最易讀？

3. 最後，使用 async 和 await 實現它。

請記住，element.animate() 不返回 Promise：它返回一個 Animation 物件，其 finished 屬性是一個 Promise。

• 上一頁
• 概述：非同步 JavaScript