Herausforderung: Animationen sequenzieren

Erstellen 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 diagonal angeordnete Bilder:

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

Wir möchten diese Seite aktualisieren, damit wir eine Animation auf alle drei Bilder anwenden, eines nach dem anderen. Wenn die erste Animation beendet ist, animieren wir das zweite Bild, und wenn das zweite fertig ist, animieren wir das dritte.

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 abzuspielen, 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 von alice1.animate() hinzuzufügen, wie folgt:

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, wie sich das erste Bild dreht und verkleinert.

Als Nächstes möchten wir 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 fertig abgespielt ist. Wir können dieses Promise verwenden, um zu wissen, wann wir die nächste Animation starten sollen.

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

1. Implementieren Sie zuerst etwas, das funktioniert, bei dem jedoch das Promise-Pendant zum "Callback-Hell"-Problem auftritt, das wir in unserer Diskussion zur Verwendung von Callbacks gesehen haben.

2. Implementieren Sie es dann als Promise-Kette. Beachten Sie, dass es hier verschiedene Möglichkeiten gibt, dies zu schreiben, aufgrund der unterschiedlichen Formen, die Sie für eine Pfeilfunktion verwenden können. Probieren Sie einige verschiedene Formen aus. Welche ist die kürzeste? Welche finden Sie am lesbarsten?

3. Schließlich implementieren Sie es mit async und await.

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

• Zurück
• Übersicht: Asynchrones JavaScript