Ease-y Breezy: Eine Einführung in Easing-Funktionen

In den letzten Monaten habe ich mir aktiv das Zeichnen und Animieren von SVG-Formen beigebracht. Ich habe CSS-Übergänge sowie Tools wie D3.js, react-motion und GSAP verwendet, um meine Animationen zu erstellen.

Eine Sache, die Animationen im Allgemeinen und die Dokumentationen, die diese und andere Animationswerkzeuge empfehlen, gemeinsam haben, ist die Verwendung von Easing-Funktionen. Ich arbeite seit Jahren in irgendeiner Form damit, aber um ehrlich zu sein, wüsste ich nie, welche Funktion ich für welche Art von Animation wählen sollte. Außerdem kannte ich die Magie, die in jeder dieser Funktionen steckt, die bemerkenswerten Unterschiede zwischen ihnen und wie man sie effektiv einsetzt, nicht. Aber das war mir egal, denn ich wusste, dass Easing-Funktionen die Dinge irgendwie „glätten“ und meine Arbeit meist realistisch aussehen ließen.

Hier präsentiere ich Ihnen, was ich über Easing-Funktionen gelernt habe, in Form einer Einführung, die Ihnen hoffentlich ein gutes Verständnis vermittelt, wenn Sie sich mit Animationen beschäftigen.

Wie ich zu Easing-Funktionen kam

Ich versuchte, ein Muster namens rotierende Schlangen nachzubilden, eine optische Täuschung, die das Gehirn dazu verleitet zu glauben, dass sich Kreise drehen und „tanzen“, obwohl sie es nicht tun.

Beim Versuch, dies umzusetzen, stellte ich schnell eine Wissenslücke fest. Es ist schwierig! Aber im Prozess entdeckte ich, dass Easing-Funktionen eine große Rolle dabei spielen.

Ich wandte mich JavaScript zu, um eine Reihe von konzentrischen Kreisen in SVG mit einer Bibliothek zu zeichnen

for (i = 1; i <= 10; i++) {
  drawCircle({radius: i * 10});
}

Das war das Ergebnis

Aber das sieht eindeutig nicht wie das Bild aus.

Als ich nachdachte, erkannte ich, dass ich nach einer bestimmten Eigenschaft suchte. Ich wollte, dass die Änderung des Radius der konzentrischen Kreise am Anfang klein ist und dann größer wird, während der Radius zunimmt.

Das bedeutet, dass die lineare Erhöhung des Radius mit i++ nicht ausreicht. Wir brauchen eine bessere Formel, um den Radius abzuleiten. Mein nächster Versuch sah also ungefähr so aus

let i = 1;
let radiusList = [];
let radius = 0;
while (i <= 10) {
  drawCircle({radius: i * 10});
  if(i < 4) { i = i + 0.5 } else { i = i + 1 } 
}

…was mich zu diesem Ergebnis brachte

Hm, immer noch nicht das, was ich wollte. Tatsächlich weicht dies noch weiter vom Muster ab. Außerdem ist dieser Code kaum anpassbar und unhandlich zu warten.

Also wandte ich mich zum letzten Mal der Mathematik zu.

Was wir brauchen, ist eine Funktion, die den Radius organisch und exponentiell verändert. Ich hatte einen „Aha!“-Moment, und vielleicht sehen Sie ihn auch schon. Easing-Funktionen werden das tun!

Der Radius jedes Kreises sollte zunächst langsam und dann schnell zunehmen, während sich die Kreise nach außen bewegen. Mit Easing können wir Dinge entlang einer Kurve bewegen lassen, die an bestimmten Punkten langsamer und schneller werden kann.

Eine schnelle Google-Suche führte mich zu diesem Gist, einer gut dokumentierten Liste von Easing-Funktionen, die mir wirklich den Tag gerettet hat. Jede Funktion nimmt einen Eingabewert, führt Formeln aus und liefert einen Ausgabewert. Der Eingabewert muss zwischen 0 und 1 liegen. (Dies werden wir später noch genauer untersuchen.)

Eine quadratische Easing-Funktion sah vielversprechend aus, da sie lediglich den Wert, den sie erhält, quadriert

function (t) { return t*t }

Hier ist der Code, den ich schließlich verwendet habe

const easing = (t) => {
  return t*t
}
for(i = 0; i<=1; i=i+0.05) {
  const r = easing(i) * 40;
  drawCircle(r);
}

Und wir haben einen Gewinner!

Der Unterschied zwischen diesem Muster und meinen ersten beiden Versuchen war Tag und Nacht. Hurra für Easing-Funktionen!

Diese kleine Erfahrung weckte mein Interesse daran, was Easing-Funktionen noch alles leisten können. Ich durchforstete das Internet nach interessanten Informationen. Ich fand alte Artikel, die sich meist auf Flash und ActionScript bezogen und Demos mit verschiedenen Liniendiagrammen zeigten.

Das ist alles ziemlich veraltet, hier ist also meine kleine Einführung in Easing-Funktionen.

Was sind Easing-Funktionen?

Es sind eine Art von Funktion, die einen numerischen Eingabewert zwischen 0 und 1 annimmt. Diese Zahl wird durch die angegebene Funktion geleitet und gibt eine weitere Zahl zwischen 0 und 1 zurück. Ein Wert zwischen 0 und 1, multipliziert mit einem anderen Wert zwischen 0 und 1, ergibt immer einen Wert zwischen 0 und 1. Diese besondere Eigenschaft hilft uns, jede gewünschte Berechnung durchzuführen, während wir innerhalb bestimmter Grenzen bleiben.

Der Zweck einer Easing-Funktion ist es, nicht-lineare Werte aus linearen Eingabewerten zu erhalten.

Dies ist der Kern dessen, was wir über Easing-Funktionen wissen müssen. Die Erklärungen und Demos hierauf zielen alle darauf ab, dieses Konzept zu veranschaulichen.

Easing-Funktionen sind eine Manifestation des Interpolationskonzepts in der Mathematik. Interpolation ist der Prozess, die Menge von Punkten zu finden, die auf einer Kurve liegen. Easing-Funktionen zeichnen im Wesentlichen eine Kurve von Punkt 0 zu Punkt 1, indem sie unterwegs verschiedene Punktmengen interpolieren (berechnen).

Robert Penner war der Erste, der Easing-Funktionen definierte und Formeln für verschiedene davon in seinem Buch erstellte.

Die fünf Arten von Easing-Funktionen

Es gibt fünf Arten von Easing-Funktionen. Sie können gemischt, invertiert und sogar miteinander kombiniert werden, um zusätzliche, komplexere Funktionen zu bilden. Lassen Sie uns jede einzelne genauer betrachten.

Lineare Easing-Funktionen

Dies ist die grundlegendste Form des Easings. Wenn die Intervalle zwischen den interpolierten Punkten 0 und 1 konstant sind, bilden wir eine lineare Easing-Funktion.

Wenn wir zum früheren Beispiel der konzentrischen Kreise zurückkehren, führt die Erhöhung des Radius des Anfangskreises um einen konstanten Betrag (in diesem Beispiel 10 Pixel) zu einer linearen Funktion.

Es sollte keine Überraschung sein, dass Linear die Standard-Easing-Funktion ist. Sie sind extrem einfach, da es keine Kurve in der Animation gibt und sich das Objekt in einer geraden, gleichmäßigen Richtung bewegt. Dennoch haben lineare Funktionen ihre Nachteile. Zum Beispiel wirken lineare Animationen oft unnatürlich oder sogar roboterhaft, da sich Objekte in der realen Welt selten mit solch perfekter, gerader Bewegung bewegen.

Quadratische Easing-Funktionen

Eine quadratische Easing-Funktion wird erstellt, indem ein Wert zwischen 0 und 1 mit sich selbst multipliziert wird (z. B. 0,5 * 0,5). Wie wir bereits gelernt haben, ergibt dies einen Wert, der ebenfalls zwischen 0 und 1 liegt (z. B. 0,5 * 0,5 = 0,25).

Zur Veranschaulichung erstellen wir 10 Werte zwischen 0 und 1 mit einer quadratischen Funktion.

const quad_easing = (t) => t*t;
let easing_vals = [];
for(let i = 0; i < 1; i +=0.1) {
  easing_vals.push(quad_easing(i));
}

Hier ist eine Tabelle mit allen Werten, die wir erhalten

Eingabewert (x-Achse)	Quadratisch erleichterter Wert (y-Achse)
0	0
0.1	0.01
0.2	0.04
0.3	0.09
0.4	0.16
0.5	0.25
0.6	0.36
0.7	0.49
0.8	0.64
0.9	0.81
1	1

Wenn wir diesen Wert in einem Diagramm mit der x-Achse als ursprünglichem Wert und der y-Achse als erleichtertem Wert darstellen würden, erhielten wir etwas wie das hier

Fällt Ihnen etwas auf? Die Kurve ist praktisch identisch mit den Ease-in-Funktionen, die wir üblicherweise finden, sogar in CSS!

Kubische, quartische und quintische Easing-Funktionen

Die letzten drei Arten von Easing-Funktionen verhalten sich gleich, arbeiten aber mit einem anderen Wert.

Eine kubische Easing-Funktion wird erstellt, indem ein Wert zwischen 0 und 1 dreimal mit sich selbst multipliziert wird. Mit anderen Worten, es ist ein Wert (z. B. t) hoch drei (z. B. t³).

Quartische Funktionen tun dasselbe, aber zur vierten Potenz. Wenn t also unser Wert ist, betrachten wir t⁴

Und wie Sie bereits erraten haben, läuft eine quintische Funktion zur fünften Potenz.

Die folgende Demo gibt Ihnen eine Möglichkeit, mit den fünf Arten von Funktionen zu spielen und eine gute visuelle Darstellung ihrer Unterschiede zu erhalten.

Siehe den Pen Plotting Easing functions von Pavithra Kodmad (@pkodmad) auf CodePen.

Ease-in und Ease-out… oder beides!

„Ein Ease-in-out ist eine köstliche Halb-und-halb-Kombination, wie eine Vanille-Schoko-Wirbel-Eistüte.“
— Robert Penner

Ease-in und Ease-out sind vielleicht die bekanntesten Easing-Animationen. Sie glätten oft eine typische lineare Linie, indem sie am Anfang oder Ende (oder beides!) einer Animation langsamer werden.

Ease-in- und Ease-out-Animationen können mit jeder der bereits betrachteten nicht-linearen Funktionen erstellt werden, wobei kubische Funktionen am häufigsten verwendet werden. Tatsächlich verfügt die CSS-Eigenschaft animation direkt über die Werte ease-in und ease-out, über die Untereigenschaft animation-timing-function.

• ease-in: Diese Funktion beginnt langsam, endet aber schneller.
• ease-out: Diese Funktion beginnt schnell und endet langsamer.
• ease-in-out: Diese Funktion wirkt als Kombination der anderen, beginnt schnell, verlangsamt sich in der Mitte und endet dann schneller.

Siehe den Pen Easing demo von Pavithra Kodmad (@pkodmad) auf CodePen.

Spielen Sie damit auf cubic-bezier.com herum.

Diese Kurven können auch in JavaScript erstellt werden. Ich persönlich mag die bezier-easing-Bibliothek dafür und nutze sie. Easing.js ist eine weitere gute, ebenso wie D3s Bibliothek (mit einem schönen Beispiel von Mike Bostock). Und wenn Sie eher an jQuery interessiert sind, schauen Sie sich dieses Plugin oder sogar dieses hier an.

Sehen Sie, es ist ziemlich „ease“-y!

Ich hoffe, diese kleine Einführung hilft Ihnen, Easing-Funktionen und Interpolation im Allgemeinen zu verstehen. Es gibt so viele Möglichkeiten, wie diese Funktionen Animationen natürlicher und lebensechter gestalten können. Werfen Sie einen Blick auf Easing.css für eine Benutzeroberfläche, mit der Sie benutzerdefinierte Kurven erstellen können und die mit einer Vielzahl von voreingestellten Optionen geliefert wird.

Ich hoffe, dass Easing-Funktionen Ihnen das nächste Mal, wenn Sie eine verwenden, kein schwarzes Loch mehr sind. Sie haben jetzt ein grundlegendes Verständnis, um Easing-Funktionen einzusetzen und eine Fülle von Möglichkeiten bei der Arbeit mit Animationen zu eröffnen.

Mehr zum Thema Easing

Wir haben hier nur an der Oberfläche des Themas Easing-Funktionen gekratzt, aber es gibt auch andere gute Ressourcen hier auf CSS-Tricks, die es wert sind, sich anzusehen, um noch weiterzukommen.

• Clever Uses for Step Easing
• CSS-Animationen natürlicher gestalten
• ease-out-in; ease-in-out
• Der Zustand von sich ändernden Farbverläufen mit CSS-Übergängen und Animationen