Web Animations - Bildwechsler arbeitet nicht synchron

[Matthias Scharwies]

Servus!

Ihr habt wsl. schon mitgekriegt, dass ich mich an der neuen Web Animations API probiere.

• JavaScript/Tutorials/Bildwechsler/Animieren_in_JavaScript

Die Funktionsweise ist klar, es läuft ähnlich wie bei CSS. Sobald ich eine Animation aber mehrfach hintereinander aufrufen will, klappt in der Wiederholung die von mir berechnete Taktung nicht mehr.

• Beispiel 1: Fader mit mehreren Bildern

Für einen Bildwechsler sollen die absolut positionierten, übereinander liegenden figure-Elemente der Reihe nach ausgeblendet werden.

Dies funktioniert - sobald ich die Animation aber mehrfach oder mit Infinity auf unendlich laufen lasse, kommt die gesamte Taktung durcheinander.

Ich habe mit alert(gesamt) die jeweilige Summe von delay, duration und endDelay überprüft - immer 12.000. Trotzdem fängt die Animation bei einer Wiederholung immer an zu ruckeln.

Habt ihr irgendeine Idee, was ich machen könnte?

• Beispiel 2: Alternative

Hier habe ich versucht, die Bilder alle auf opacity: 0 zu setzen und in der Animation ein- und später wieder auszublenden. (Leider gibt es da keine Prozentwerte wie in CSS @keyframes, man könnte die Beschleunigungskurve aber mit easing verändern.) Trotzdem gibt es spätestens ab dem dritten Durchlauf nur noch die 2 letzten Bilder.

Die Steuerung mit animation.pause(), bzw. animation.play() funktioniert, umso trauriger, dass ich dass hier nicht hinkriege.

Ich wäre für jedem Lösungsansatz dankbar!

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Matthias,

• Beispiel 2: Alternative

wenn du hier den figure-Elementen position: relative gibst, siehst du das Problem: zum Ende der Animation wird das Bild gezeigt, so dass du dann bei position: absolute nur die letzten beiden Bilder siehst.

Da ich von der API aber keine Ahnung habe, habe ich auch keinen Tipp zur Lösung parat.

Gruß
Jürgen

[Matthias Scharwies]

Servus!

wenn du hier den figure-Elementen position: relative gibst, siehst du das Problem: zum Ende der Animation wird das Bild gezeigt, so dass du dann bei position: absolute nur die letzten beiden Bilder siehst.

Danke, ich habe die Bilder jetzt kleiner und untereinander, sodass man sofort sieht, dass sie nicht synchron sind.

Ich habe die Variablen und Berechnungen noch mal gecheckt; Theoretisch geht delay nach jedem Durchgang hoch, bzw. endDelay runter, sodass es immer 12sek dauern sollte.

console.log bestätigt das ja auch, aber es geht trotzdem nicht.

Gruß
Jürgen

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Matthias,

wenn du hier den figure-Elementen position: relative gibst, siehst du das Problem: zum Ende der Animation wird das Bild gezeigt, so dass du dann bei position: absolute nur die letzten beiden Bilder siehst.

Danke, ich habe die Bilder jetzt kleiner und untereinander, sodass man sofort sieht, dass sie nicht synchron sind.

also bei mir läuft das sehr synchron. Aber da am Ende der Animation alle Bilder sichtbar sind, sieht man immer nur das oberste. Die Animation muss auf durchsichtig enden.

Ich habe die Variablen und Berechnungen noch mal gecheckt; Theoretisch geht delay nach jedem Durchgang hoch, bzw. endDelay runter, sodass es immer 12sek dauern sollte.

das hat jetzt mit dem Problem nchts zu tun, aber die for-Schleife läuft einmal zu oft wegen des <=.

Gruß
Jürgen

[Richard Rüfenacht]

Hallo Matthias

Habt ihr irgendeine Idee, was ich machen könnte?

Ein Fehler ist mir direkt aufgefallen: Der Wert von duration: aniDur, ist nicht korrekt. Der müsste im Beispiel 12 sec betragen, bzw. mit der Anzahl Bilder multipliziert werden.

Das ist aber nicht das einzige Problem. Die Bilder bleiben nicht ausgeblendet. Dafür habe ich auf die Schnelle aber keine Lösung.

Mit besten Grüssen
Richard

[Matthias Scharwies]

Servus!

Hallo Matthias

Habt ihr irgendeine Idee, was ich machen könnte?

Ein Fehler ist mir direkt aufgefallen: Der Wert von duration: aniDur, ist nicht korrekt. Der müsste im Beispiel 12 sec betragen, bzw. mit der Anzahl Bilder multipliziert werden.

Danke für den Tipp! Ich hatte dur als Nettowert verstanden für die Dauer zwischen den keyframes, in der spec steht dies als "active interval". Wenn ich aniCombined als Wert einsetze, passt es im ersten Durchlauf.

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

Was mich (ver)zweifeln lässt - spätestens nach dem dritten Durchlauf (mit 12.000 schon nach dem zweiten) blenden alle Bilder gleichzeitig auf, d.h. weder hintereinander noch mit 12.000 Intervall.

Hier muss ich evtl. das Animation-Objekt in ein keyframe und ein individuelles Timing Object aufsplitten:

var effect = new KeyframeEffect(elem, { opacity: 0 }, 2000);
var animation = new Animation(effect, elem.ownerDocument.timeline);
animation.play();

w3c: dom-animatable-animate

Herzliche Grüße

Matthias Scharwies

[Richard Rüfenacht]

Hallo Matthias

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. Das ist ein entscheidender Unterschied zu Animationen, die z.B. mit Adobe-Animate auf einer Zeitleiste erstellt werden.

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!) 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.

Mit besten Grüssen
Richard

[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

[Richard Rüfenacht]

Hallo Matthias

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.

Da bin ich gespannt auf das Ergebnis. Ich meine, dass hier die Logik des Stapelns der Bilder entscheidend ist. Mit z-Index zu arbeiten wäre einfacher, funktioniert bei mir aber nur bedingt.

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.

Also: Die WAAPI kann nichts, was z.B. Adobe-Animate nicht auch kann, aber sehr vieles halt nicht oder nur sehr arbeitsaufwändig. Mir ist schon klar, dass es hier nicht darum geht, sondern darum die WAAPI zu verstehen.

Ich nehme die WAAPI zur Kenntnis, begeistert bin ich nicht. Da stehe ich nicht allein, das macht auch deutlich, wer sich dafür einsetzt oder auch nicht.

Das klingt jetzt wie eine versteckte Kritik …

Nein! Ganz im Gegenteil! Frei nach dem Motto: „Was ich mache, könnte auch anders gemacht werden.“

Auf der Folgeseite Steuerung von Animationen möchte ich diese Bilder-Show dann mit animation.pause(), animation.play() und .reverse() dann steuern.

Ja, das ist eine gute Idee. Dir ist aber schon klar, dass damit auch CSS-Animationen gesteuert werden können? Was in CSS umgesetzt werden kann, sollte nicht mit JavaScript gemacht werden.

Mit besten Grüssen
Richard

[Matthias Scharwies]

Servus!

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

Da bin ich gespannt auf das Ergebnis. Ich meine, dass hier die Logik des Stapelns der Bilder entscheidend ist. Mit z-Index zu arbeiten wäre einfacher, funktioniert bei mir aber nur bedingt.

Also: Die WAAPI kann nichts, was z.B. Adobe-Animate nicht auch kann, aber sehr vieles halt nicht oder nur sehr arbeitsaufwändig. Mir ist schon klar, dass es hier nicht darum geht, sondern darum die WAAPI zu verstehen.

Ja, ich war die letzten 2 Wochen immer wieder mal am rumprobieren, bin jetzt zu früh an die Öffentlichkeit gegangen, weil ich nicht mehr weiter wusste.

Der Wiki-Artikel soll zeigen, was geht und was nicht.

Ich nehme die WAAPI zur Kenntnis, begeistert bin ich nicht. Da stehe ich nicht allein, das macht auch deutlich, wer sich dafür einsetzt oder auch nicht.

Auf der Folgeseite [..] möchte ich diese Bilder-Show dann mit animation.pause(), animation.play() und .reverse() dann steuern.

Ja, das ist eine gute Idee. Dir ist aber schon klar, dass damit auch CSS-Animationen gesteuert werden können?

Nein, interessant! Könntest du mir da einen Link geben?

Was in CSS umgesetzt werden kann, sollte nicht mit JavaScript gemacht werden.

Full Ack

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Ich habe das Problem auch auf Stackoverflow gepostet.

delay and endDelay apply before and after the whole set of iterations. There is no setting for delay between iterations.

Die beiden Eigenschaften delay und endDelay werden nur vor und nach der Animation angewandt. Eine Wiederholung fängt gleich wieder an.

Dass heißt, ich benötige pro Durchlauf andere keyframes, wie hier vorgeschlagen:

var keyframes = [
  { opacity: 0 },
  { opacity: 1, offset: 1 / children.length * 1 / 3 },
  { opacity: 1, offset: 1 / children.length * 2 / 3 },
  { opacity: 0, offset: 1 / children.length },
  { opacity: 0 }
];
for (var index = 0; index <= children.length; index++) {
  children[index].animate(
     keyframes, { 
       duration: aniDur * children.length,
       delay: index * aniDur,
       iterations: Infinity 
     });
}

Da brauch ich mal ein paar Tage Muße, um das in Ruhe auszuprobieren.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Servus!

Ihr habt wsl. schon mitgekriegt, dass ich mich an der neuen Web Animations API probiere.

• JavaScript/Tutorials/Bildwechsler

  • Animationen synchronisieren

Vielen Dank an @Richard Rüfenacht und @JürgenB für Euren Input.

Der Bildwechsler läuft jetzt ohne Probleme - zu einem späteren Zeitpunkt kommt die Steuerung dran.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

ICYMI:

(Tweet → Hashnode)

Wenn jemand was über Web animations weiß, dann sie.

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

ICYMI:

(Tweet → Hashnode)

Wenn jemand was über Web animations weiß, dann sie.

Ich dachte, das wäre Rachel Nabors? :-)

Vielen Dank für den Tipp - werde mir Fragen überlegen, bzw. verfolgen was andere fragen.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Wenn jemand was über Web animations weiß, dann sie.

Ich dachte, das wäre Rachel Nabors? :-)

Ja, die auch. Schon mal was von gehört.

Hier die Geschichte, warum auf der Smashing Conference in Oxford nichts von ihr zu hören war. :-( (Hier etwas kürzer.)

LLAP 🖖

PS: Und Lea Verou ist sicher auch nicht ganz doof. ;-)