Web Animation

Siehe auch Webanimation bei Media Event

Das Web Animation API ist ein leistungsfähges Script, um CSS Eigenschaften zu animieren. Es wird von allen modernen Browsern unterstützt. Es gibt gewissen Übereinstimmungen zu CSS Animationen.

Der Aufruf von animate () benötigt 2 Argumente:

1. Ein ein Array von Keyframes mit den CSS-Eigenschaften, die animiert werden sollen.
2. Ein Objekt mit Dauer und der Zahl der Wiederholungen.

 animate (keyframes, options).

Beispiel 1

let wheel = document.getElementById("moonface").animate (
	[
		{ transform: "rotate(0deg)" },
		{ transform: "rotate(360deg)" }
	],
	{
		duration: 3000,
		iterations: Infinity
	}
);

Beispiel 2

Die Methode play() spielt die Animtion ab, die Methode pause() pausiert.
Über die Eigenschaft playbackRate kann man die Geschwindigkeit steuern.

<button onclick="moon.pause()";>...</button>
<button onclick="moon.play()">...</button>
<button onclick="moon.playbackRate += 0.2">...</button>

Beispiel 3

Hier ein komplexeres Beispiel mit einer transform-Eigenschaft, sowie eine zusätzliche Option für das Easing Verhalten. Bedenke, dass die CSS Eigenschaft transform: mehrere Werte bekommen kann, wie translateX() und/ oder rotate(). Diese werden nicht mit Komma getrennt aufgeführt. Weitere CSS Eigenschaften kann man komma-separiert hinzufügen.

let moon = document.getElementById("moonface").animate (
	[
      { transform: "translateX(0) rotate(0deg)", easing: "ease-in"},
		{ transform: "translateX(1000px) rotate(1080deg)" },
		{ transform: "translateX(0) rotate(0deg)", easing: "ease-out"}
	],
	{
		duration: 9000,
		iterations: Infinity
	}
);

Beispiel 4

In diesem Beispiel wird die Strecke anhand der Fensterbreite ermittelt. Damit wird dann auch die Anzahl der Umdrehungen und die Dauer der Animation berechnet.

        let width = window.innerWidth;
        let elemWidth = document.getElementById("moon").offsetWidth;
        let circumfence = elemWidth * Math.PI;
        let umdrehungen = parseInt(width / circumfence);
        let duration = width * 10;
        let rotate = duration / 1000 / umdrehungen;

        let wheel = document.getElementById("moon").animate(
            [{
                transform: "translateX(0) rotate(0deg)",
                easing: "ease-in"
            }, {
                transform: "translateX(" +( width-elemWidth) + "px) rotate(" + (umdrehungen * 360) + "deg)"
            }, {

                transform: "translateX(0) rotate(0deg)",
                easing: "ease-out"
            }], {
                duration: duration,
                iterations: Infinity
            }
        );

  

Javascript Tipps