Web Animations - Bildwechsler arbeitet nicht synchron

[Matthias Scharwies]

Servus!

Wenn ich aniCombined als Wert einsetze, passt es im ersten Durchlauf.

Beim Auf- oder Zudecken eines Bilderstapels besteht das Problem, dass sich der erste Durchlauf praktisch immer von den nachfolgenden unterscheidet. Das ist so gewollt. Es wird nicht die erste Animation endlos wiederholt, sondern die zweite Animation startet mit den Einstellungen, die am Ende der ersten Animation vorliegen usw.

Ja, da muss ich mal schauen, ob ich evtl die Animation mit einem negativen Wert für delay bereits in der Mitte starten soll.

Das ist ein entscheidender Unterschied zu Animationen, die z.B. mit Adobe-Animate auf einer Zeitleiste erstellt werden.

Ja, und das ist einer der Vorteile der WAAPI (Web Animations API), dass man die Durchläufe in einer Animation festlegen und dann mit variablen Werten mehrfach durchführen kann.

Ich versuche mich noch mal an der darauf aufbauenden Formel, vor allem werde ich die nötigen Werte direkt mit children[index] verknüpfen.

Mich fasziniert dein Vorgehen. (Es unterscheidet sich so grundlegend von meinem!)

Das klingt jetzt wie eine versteckte Kritik, bei der du völlig Recht hast. Vor lauter Übersetzung und Textübertragung (grad letzte Woche habe ich noch die WAI-ARIA-Seiten aktualisiert) komm ich bei eigenen Sachen durch zu wenig Nachdenken und Planen ins Schwimmen. Da würde mehr überlegen und ein bisschen sacken lassen auch helfen. Hier habe ich den Weg über's Forum genommen -> Dein Tipp, dass dur auch die Werte für endDelay beinhaltet, hat mir den richtigen Weg gewiesen.

Unabhängig davon stellt sich mir aber die Frage: Warum verwendest du für dieses Beispiel die Web Animations API und nicht CSS? JavaScript ermöglicht Interaktionen, die der reinen CSS-Anwendung fehlen. In einem Beispiel, das die Möglichkeiten der Animations API aufzeigt, würde ich genau diese Interaktionen erwarten.

Auf der Folgeseite Steuerung von Animationen möchte ich diese Bilder-Show dann mit animation.pause(), animation.play() und .reverse() dann steuern. Die meisten Bsp. für die WAAPI bewegen nur ein Viereck durch den Raum, was auf Webseiten eher selten vorkommt.

Warum kein Beispiel mit einem Viereck? Langfristig soll der Bildwechsler das Fader-Framework aus dem Jahre 2008 ersetzen.

Mit besten Grüssen
Richard

Herzliche Grüße

Matthias Scharwies