JavaScript/Tutorials/Bildwechsler/Animationen synchronisieren

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Im letzten Beispiel haben Sie gesehen, dass es mit der Web Animations API noch nicht möglich ist, eine Animation zeitversetzt für mehrere Elemente zu verwenden, indem die Timing Options verändert werden.

Allerdings ist es möglich, das KeyframeEffect Object entsprechend zu verändern, sodass die einzelnen Bilder passend eingeschoben werden.

[Bearbeiten] Keyframes takten

Alle Bilder sollen anfangs ausgeblendet sein und nacheinander für einen gleichen Zeitraum, der in der Variable intervall festgelegt ist, eingeblendet werden. Also müssen die einzelnen keyframes abhängig von der Anzahl der Bilder, die sich über children.length ermitteln lässt, getaktet werden.

Anders als bei CSS-Animation erhalten die keyframes keine Wegpunkte oder Prozentangaben vorangestellt, sondern werden über die offset-Eigenschaft eingestellt. Mit ihr werden den einzelnen keyframes Wegpunkte zugewiesen. Start ist dabei immer 0, Ende 1, dazwischenliegende Werte müssen innerhalb dieser Spanne sein.

Beispiel: KeyframeEffect-Object mit variablen Werten ansehen …
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: intervall * children.length,
    delay: index * intervall,
    iterations: Infinity 
  });
}
In einem keyframeEffect-Objekt werden mehrere keyframes festgelegt: Alle Bilder sind anfangs ausgeblendet. Jedes Bild wird im ihm zustehenden Anteil eingeblendet. Bei einem Drittel der Zeit ist es voll sichtbar, bei zwei Dritteln beginnt die Ausblendung.
In einer Schleife werden alle figure-Elemente animiert. Die Dauer dur ergibt sich aus der Multiplikation von Intervalldauer und Anzahl der Bilder aus children.length. Mit delay werden die Animationen nacheinander passend ausgeführt.

Da jedes Bild innerhalb seines Intervalls eingeblendet wird, erscheint zwischen den Bildern immer wieder der Hintergrund.

[Bearbeiten] Feinabstimmung

Um die Lücke zwischen den Einblendungen verschwinden zu lassen, müssen die einzelnen Animationen länger dauern. so muss das nächste Bild schon eingeblendet werden, wenn das vorherige noch sichtbar ist. Um dies zu erreichen, müssen die Wegpunkte verschoben werden. Am einfachsten gelingt dies durch eine Teilung der Gesamtdauer durch eine Zahl, die kleiner als die Gesamtanzahl der Bilder ist.

Beispiel: eine sanfte Überblendung ansehen …
var keyframes = [
  { opacity: 0 },
  { opacity: 1, offset: 1 / (children.length - 2) * 1 / 3 },
  { opacity: 1, offset: 1 / (children.length - 2) * 2 / 3 },
  { opacity: 0, offset: 1 / (children.length - 2) },
  { opacity: 0 }
];
 
for (var index = 0; index < children.length; index++) {
  children[index].animate(keyframes, { 
    duration: intervall * children.length,
    delay: index * intervall,
    iterations: Infinity 
  });
}
Da bei (children.length-1) noch ein bisschen grau erscheint, wird der offset-Wert durch (children.length-2) geteilt.

Nun haben wir einen Bildwechsler, der selbständig durchläuft. Im folgenden Teil lernen Sie, wie Sie diese Animation steuern können.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML