CSS, HTML und Javascript mit {stil}

Javascript Easing

JS element width height

Javascript bringt kein Easing (»Entspannen«) für Animationen von Haus aus mit – für weiches Anlaufen, Beschleunigen und Auslaufen von Animationen muss 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.

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

Urvater des Easings

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.

function easeInOutCubic(currentIteration, startValue, changeInValue, totalIterations) {
   if ((currentIteration /= totalIterations / 2) < 1) {
      return changeInValue / 2 * Math.pow(currentIteration, 3) + startValue;
   }
   return changeInValue / 2 * (Math.pow(currentIteration - 2, 3) + 2) + startValue;
}
  • currentIteration aktuelle Zeit
  • startValue – begin – Ausgangswert beim Start
  • changeInValue – change – Änderung insgesamt = totalIterations - startValue
  • totalIterations – duration – Animationsschritte insgesamt

Cubic, Quart, Quint usw. sind grundsätzlich gleiche Bewegungsmuster und verstärken nur die »Dramatik« des Bewegungscharakters.

width
function rollball () {
   easing = easeOutCubic(step, 0, width, 128);
   ball.setAttribute('style','left:' + easing + 'px');
   step++;
   if (step > 128) {
      document.getElementById('beachball').endElement();
      cancelAnimationFrame (repeater);
      step = 0;
   } else {
      repeater = requestAnimationFrame (rollball);
   }
}

rollball();

Für die klassischen Bewegungsmuster wie Ease, EaseIn, EaseOut, EaseInOut in allen Variationen sorgen kleine Javascript-Funktionen. 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 linear0.42 0 1 10 0 0.58 10.25 0.1 0.25 10.42 0 0.58 10 0 1 1ease-inease-outeaseease-in-outlinear

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 zeigen den Charakter der Bewegungs sehr schön.

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.

Cubix Bezier für eigene Bewegungsmuster0.2, 0.90.5, 1.5cubic-bezier(0.2, 0.9,0.5, 1.5)
Eigenes Easing in Animationen

Javascript Easing vs jQuery Animate

Die einzelnen Umsetzungen der Easing-Funktionen wie ease, easeIn, easeInOut, easeOut und linear bestehen jeweils nur aus wenigen Zeilen Scriptcode. Funktionen, die nicht benötigt werden, müssen nicht eingebunden werden, so dass für das Easing in Javascript nur wenige Bytes erforderlich sind.

Um requestAnimationFrame anstelle von setInterval zu nutzen, muss noch ein Polyfill für IE9 eingesetzt werden – knapp 1KB.

Im Vergleich zu Animationen mit jQuery haben wir also ein kleines Flickwerk vor uns, auf der anderen Seite allerdings auch nur einen Bruchteil des Ladeaufwands gegenüber der jQuery-Library und zuguterletzt eine bessere Performance.