Herausforderung: Sequenzierung von Animationen

Machen Sie eine lokale Kopie der Dateien unter https://github.com/mdn/learning-area/tree/main/javascript/asynchronous/sequencing-animations/start. Es enthält vier Dateien:

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

Die einzige Datei, die Sie bearbeiten müssen, ist "main.js".

Wenn Sie "index.html" in einem Browser öffnen, sehen Sie drei Bilder, die diagonal angeordnet sind:

Die Bilder stammen aus unserem Leitfaden zur Verwendung der Web Animations API.

Wir möchten diese Seite so aktualisieren, dass allen drei Bildern nacheinander eine Animation zugewiesen wird. Wenn die erste beendet ist, wird das zweite animiert, und wenn das zweite beendet ist, wird das dritte animiert.

Die Animation ist bereits in "main.js" definiert: Sie dreht das Bild und verkleinert es, bis es verschwindet.

Um Ihnen eine bessere Vorstellung davon zu geben, wie die Seite funktionieren soll, sehen Sie sich das fertige Beispiel an. Beachten Sie, dass die Animationen nur einmal ablaufen: Um sie erneut zu sehen, laden Sie die Seite neu.

Wir verwenden die Web Animations API, um die Bilder zu animieren, insbesondere die Methode element.animate().

Aktualisieren Sie "main.js", um einen Aufruf zu alice1.animate() hinzuzufügen, so:

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

Laden Sie die Seite neu, und Sie sollten sehen, dass sich das erste Bild dreht und verkleinert.

Wir möchten als nächstes alice2 animieren, wenn alice1 fertig ist, und alice3, wenn alice2 fertig ist.

Die Methode animate() gibt ein Animation-Objekt zurück. Dieses Objekt hat eine finished-Eigenschaft, die ein Promise ist, das erfüllt wird, wenn die Animation beendet ist. Wir können dieses Promise verwenden, um zu wissen, wann die nächste Animation gestartet werden soll.

Wir möchten, dass Sie einige verschiedene Möglichkeiten ausprobieren, um dies zu implementieren, um verschiedene Methoden der Verwendung von Promises zu veranschaulichen.

1. Implementieren Sie zuerst etwas, das funktioniert, aber die Promise-Version des "Callback-Hell"-Problems hat, das wir in unserer Diskussion über die Verwendung von Callbacks gesehen haben.

2. Implementieren Sie es als Promise-Kette. Beachten Sie, dass es verschiedene Möglichkeiten gibt, dies zu schreiben, da Sie verschiedene Formen einer Pfeilfunktion verwenden können. Probieren Sie einige verschiedene Formen aus. Welches ist am prägnantesten? Welches finden Sie am lesbarsten?

3. Schließlich implementieren Sie es unter Verwendung von async und await.

Denken Sie daran, dass element.animate() kein Promise zurückgibt: Es gibt ein Animation-Objekt mit einer finished-Eigenschaft zurück, die ein Promise ist.

• Zurück
• Übersicht: Asynchrones JavaScript