Thử thách: Sắp xếp hoạt ảnh theo thứ tự

Điểm xuất phát

Hãy tạo bản sao local của các tệp tại https://github.com/mdn/learning-area/tree/main/javascript/asynchronous/sequencing-animations/start. Nó chứa bốn tệp:

• alice.svg
• index.html
• main.js
• style.css

Tệp duy nhất bạn cần chỉnh sửa là "main.js".

Nếu bạn mở "index.html" trong trình duyệt, bạn sẽ thấy ba hình ảnh được sắp xếp theo đường chéo:

Các hình ảnh được lấy từ hướng dẫn của chúng ta về Sử dụng Web Animations API.

Tóm tắt dự án

Chúng ta muốn cập nhật trang này để áp dụng hoạt ảnh cho cả ba hình ảnh, từng cái một. Vì vậy khi cái đầu tiên hoàn thành, chúng ta tạo hoạt ảnh cho cái thứ hai, và khi cái thứ hai hoàn thành, chúng ta tạo hoạt ảnh cho cái thứ ba.

Hoạt ảnh đã được định nghĩa trong "main.js": nó chỉ xoay hình ảnh và thu nhỏ nó cho đến khi biến mất.

Để cho bạn biết thêm về cách chúng ta muốn trang hoạt động, hãy xem ví dụ đã hoàn chỉnh. Lưu ý rằng các hoạt ảnh chỉ chạy một lần: để xem chúng chạy lại, hãy tải lại trang.

Các bước cần hoàn thành

Tạo hoạt ảnh cho hình ảnh đầu tiên

Chúng ta đang sử dụng Web Animations API để tạo hoạt ảnh cho các hình ảnh, cụ thể là phương thức element.animate().

Cập nhật "main.js" để thêm lời gọi đến alice1.animate(), như sau:

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);

Tải lại trang, và bạn sẽ thấy hình ảnh đầu tiên xoay và thu nhỏ.

Tạo hoạt ảnh cho tất cả hình ảnh

Tiếp theo, chúng ta muốn tạo hoạt ảnh cho alice2 khi alice1 đã hoàn thành, và alice3 khi alice2 đã hoàn thành.

Phương thức animate() trả về đối tượng Animation. Đối tượng này có thuộc tính finished, là một Promise được hoàn thành khi hoạt ảnh đã phát xong. Vì vậy chúng ta có thể sử dụng Promise này để biết khi nào bắt đầu hoạt ảnh tiếp theo.

Chúng tôi muốn bạn thử một vài cách khác nhau để triển khai điều này, để củng cố các cách khác nhau sử dụng Promise.

1. Đầu tiên, hãy triển khai điều gì đó hoạt động, nhưng có vấn đề phiên bản Promise của "callback hell" mà chúng ta đã thấy trong thảo luận về việc sử dụng hàm gọi lại.

2. Tiếp theo, hãy triển khai nó như một chuỗi Promise. Lưu ý rằng có một vài cách khác nhau bạn có thể viết điều này, vì các hình thức khác nhau bạn có thể sử dụng cho hàm mũi tên. Hãy thử một số hình thức khác nhau. Cái nào ngắn gọn nhất? Cái nào bạn thấy dễ đọc nhất?

3. Cuối cùng, hãy triển khai nó bằng cách sử dụng async và await.

Nhớ rằng element.animate() không trả về một Promise: nó trả về đối tượng Animation với thuộc tính finished là một Promise.

• Previous
• Overview: JavaScript bất đồng bộ