Javascript easing, delay, duration, fill

Javascript Easing – langsam anlaufen und beschleunigen

Die klassischen Techniken der Animation mit Javascript brachten kein Easing (»Entspannen«) mit – für weiches Anlaufen, Beschleunigen und Auslaufen von Animationen musste das Skript selber sorgen.

Die Dauer einer Animation wird vom Easing nicht verändert, Easing beeinflusst nur die Distanz zwischen den einzelnen Schritten. Das 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.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

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 sich bislang niemand an die Arbeit gemacht.

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. Cubic, Quart, Quint usw. sind grundsätzlich gleiche Bewegungsmuster und verstärken nur die »Dramatik« des Bewegungscharakters.

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.