CSS, HTML & Javascript mit {stil}

Javascript easing, delay, duration, fill

Erst das Web Animation API bringt Easing – weiches Anlaufen, Beschleunigen und Auslaufen von Animationen – ohne Libraries ins Javascript. Die Dauer einer Animation wird vom Easing nicht verändert, Easing beeinflusst nur die Distanz zwischen den einzelnen Schritten.

Javascript Easing – langsam anlaufen und beschleunigen

Easing: natürliche Bewegungen

Erst Easing nimmt Animationen den mechanischen Charakter: Natürliche Bewegungen verlaufen selten linear (Ausnahme: z.B. Uhr mit Sekundenzeiger).

6

Natürliche Bewegungen

Bewegungen und Veränderungen verlaufen meist nach dem Prinzip »Slow in, slow out«. So bewegt sich ein Mensch, fährt die Lokomotive und rollt die Kugel auf der Kegelbahn. Die Veränderung muss keine physikalische Distanz sein, sondern kann ebenso gut der Unterschied zwischen Alpha-Werten oder der Farbe eines Elements sein: z.B. kleinere Schritte zwischen den ersten Schritten, dafür größere Schritte zwischen den folgenden Schritten.

Easing hat Animationen mit Flash die feine Eleganz verliehen, in CSS Transitionen und Keyframe-Animationen ist das Easing schon fertig drin, ebenso in Animationen mit jQuery. SVG SMIL-Animationen setzen Easing direkt über Splines ein.

Nur beim armen alten Javascript hat jahreland niemand an die Arbeit gemacht – erst mit dem Javascript Animation API ist Easing in die Bewegung gekommen.

Javascript Easing

Die ursprünglichen Easing-Algorithmen für Actionscript stammen von Robert Penner und sind mehrfach für jQuery und auch für natives Javascript umgesetzt worden.

Bevor das Web Animation API Javascript bereicherte, hatte das reine Javascript keine vorgefertigte easing-Methoden. Jetzt stehen für Javascript-Animationen dieselben Verhalten bereit wie in CSS-Animationen. 

let width = document.querySelector ("#beach").offsetWidth;
umdrehungen = parseInt (width / circumfence);
duration = width * 10;

let wheel = document.querySelector ("#beachball").animate (
	[
		{ transform: "translateX(0) rotate(0deg)", easing: linear},
		{ transform: "translateX("+ (width-elemWidth) + "px) rotate(" + (umdrehungen * 360) + "deg)" },
		{ transform: "translateX(0) rotate(0deg)", easing: linear}
	],
	{
		duration: duration,
		iterations: Infinity
	}
);

Die klassischen Bewegungsmuster ease, ease-in, ease-out, ease-in-out und linear gelten auch für dasJavascript Animation API. Die Easing-Klassen – Cubic, Quad, Quind und Strong beschreiben grundsätzlich dasselbe Bewegungsmuster und betonen den Charakter jeweils stärker.

keySplines für ease-in, ease-out, ease, ease-in-out und linear

Javascript, jQuery und CSS verwenden Schlüsselwörter. SVG kennt die Schlüsselwörter ease, easeIn, … nicht, sondern setzt auf Bézier-Kurven als »Key-Splines«. Die Kurven geben den Charakter der Bewegung sehr gut wieder.

Cubic Bezier

Mit Schlüsselwörtern wie ease, ease-in-out usw. sind die meisten Bewegungsmuster abgedeckt. Darüber hinaus verhilft ein eigener Wert für Cubic-Bezier zu einem individuellen Bewegungsablauf.

x1 kann nicht kleiner werden als 0, x2 nicht größer als 1, aber y kann kleiner als Null und größer als 1 werden. Dann bewegt sich das Objekt am Anfang bzw. Ende der Bewegung über den Start / Endpunkt hinaus.

Suchen auf mediaevent.de