Eine visuelle Anleitung zur Vereinfachung von Funktionen in Webflow

March 2, 2024

· 5 min

In diesem Beitrag werfen wir einen kurzen Blick auf die Geschichte der Lockerungsfunktionen und gehen eingehend auf die Funktionsweise der einzelnen Funktionen ein.

Wir haben dieses Projekt zur Lockerung von Funktionen schon eine Weile auf unserem Konto. Wir haben es als nette visuelle Anleitung verwendet, als wir gerade mit Webflow angefangen haben. Als wir neulich darauf gestoßen sind, schien es eine gute Idee zu sein, es ein wenig zu konkretisieren und es als visuelle Anleitung für die Standard-Lockerungsfunktionen in Webflow zu veröffentlichen. Im Folgenden finden Sie eine visuelle Anleitung sowie einen Link zu einem detaillierteren Clonable und eine Liste der verfügbaren Beschleunigungsfunktionen mit einer Beschreibung ihrer Funktionen. Aber lassen Sie uns mit einem kleinen Einblick in die Geschichte der Beschleunigungsfunktionen beginnen.

Die mathematischen Wurzeln

Im Mittelpunkt der Lockerung von Funktionen steht eine umfangreiche mathematische Grundlage. Das Konzept der Lockerung geht auf das Studium der Physik und Analysis zurück, wo die Prinzipien der Beschleunigung und Verzögerung die Bewegung von Objekten in der realen Welt bestimmen. Mathematiker und Physiker entwickelten Formeln zur Beschreibung dieser natürlichen Bewegungen und legten damit den Grundstein für das, was schließlich in der digitalen Animation Anwendung finden sollte. Die quadratischen, kubischen, quartischen und quintischen Funktionen bieten unter anderem eine mathematische Grundlage für die Simulation der Feinheiten von Bewegung und Geschwindigkeit, sodass Animationen die Grenzen der linearen Progression überschreiten können.

Die Entwicklung der Animation

Der Übergang von der Mathematik zur Animation begann mit traditionellen, handgezeichneten Techniken. Frühe Animatoren, etwa in den Pionierzeiten von Disney, wendeten intuitiv die Prinzipien der Lockerung an, um ihre Kreationen zum Leben zu erwecken, lange bevor der Begriff „Lockerung“ offiziell geprägt wurde. Sie beobachteten Bewegungen in der realen Welt und fingen deren Essenz Bild für Bild ein, um Animationen zu kreieren, die auf natürliche Weise ablaufen und Emotionen und Charakter vermitteln. Diese akribische Aufmerksamkeit für die Bewegungsdynamik legte den Grundstein für die Lockerung der Funktionen, obwohl zu diesem Zeitpunkt alles manuell durchgeführt wurde.

Die digitale Revolution

Mit dem Aufkommen von Computergrafik und digitaler Animation fanden die Prinzipien der Lockerung neuen Boden, um zu gedeihen. Das digitale Zeitalter ermöglichte die präzise Steuerung und Manipulation von Bewegungskurven, sodass Animatoren und Designer komplexe mathematische Funktionen mühelos implementieren konnten (Wortspiel beabsichtigt). Computersoftware begann, diese Beschleunigungsfunktionen zu integrieren, sodass den Benutzern vordefinierte Optionen wie „Ease-In“, „Ease-Out“ und „Elastic“ zur Verfügung standen, um Objekte auf visuell ansprechende Weise zu animieren.

Vereinfachung von Funktionen im Benutzeroberflächendesign

Die Anwendung von Beschleunigungsfunktionen ging über die traditionelle Animation hinaus und spielte eine entscheidende Rolle bei der Gestaltung von Benutzeroberflächen (UI) und Benutzererlebnissen (UX). Als digitale Benutzeroberflächen immer interaktiver wurden, erkannten die Designer, wie wichtig es ist, Funktionen zu vereinfachen, damit sich Übergänge natürlicher und intuitiver anfühlen. Die reibungslose Erweiterung eines Menüs, das Hin- und Herspringen einer Benachrichtigung oder das Einblenden einer Dialogbox — all diese Interaktionen profitierten von den Lockerungsfunktionen und verbesserten das Benutzererlebnis, indem sie die Fluidität der natürlichen Welt nachahmten.

Die digitale Leinwand von heute

Heute sind Erleichterungsfunktionen ein unverzichtbares Werkzeug im Toolkit des digitalen Designers, das nahtlos in Webdesign-Plattformen wie Webflow, Animationsbibliotheken und UI-Designsoftware integriert ist. Sie ermöglichen es Designern, immersive, ansprechende digitale Erlebnisse zu schaffen, die die Fantasie der Nutzer anregen und ihre Aufmerksamkeit auf sich ziehen. Von den mathematischen Gleichungen der Vergangenheit bis hin zu den interaktiven Webseiten von heute haben sich Lockerungsfunktionen durch die Zeit entwickelt, weiterentwickelt und angepasst, doch ihre Kernaufgabe bleibt dieselbe: der digitalen Welt Leben einzuhauchen und sie so reich und dynamisch zu machen wie die Welt vor unseren Fenstern.

Du kannst durch die obige Interaktion scrollen oder dir das ansehen vollständiges Projekt und hier klonbar.

Endlich kommen wir zum Fleisch, was macht jede Lockerungsfunktion?

LINEAR (KEINE)

Herkunft und Bedeutung: So einfach wie eine Autobahn in der Wüste. Linear bedeutet eine gleichmäßige Änderungsrate — keine Beschleunigung, keine Verzögerung, nur ein gleichmäßiges Tempo von Anfang bis Ende.
Was es macht: Bewegt oder verblasst Objekte mit konstanter Geschwindigkeit. Perfekt für alle, die Wert auf Einfachheit und Vorhersagbarkeit ihrer Animationen legen.

ERLEICHTERN

Herkunft und Bedeutung: Denken Sie daran, ein heißes Bad zu nehmen. Es fängt langsam an, wird schneller und dann wieder langsamer, was für einen reibungslosen, angenehmen Übergang sorgt.
Was es macht: Verleiht Animationen ein natürliches Gefühl, indem sie langsam beginnen, in der Mitte schneller werden und am Ende langsamer werden. Es ist nicht ohne Grund die Standardeinstellung!

EINSTEIGEN

Herkunft und Bedeutung: Wie auf Zehenspitzen in das oben erwähnte Bad zu gehen, geht es darum, sanft zu beginnen.
Was es macht: Startet die Animation langsam und beschleunigt dann. Ideal, um die Aufmerksamkeit auf Elemente zu lenken, die auf dem Bildschirm erscheinen.

LOCKERN

Herkunft und Bedeutung: Das Gegenteil von Entspannung — als ob Sie sich endlich voll und ganz in der Badewanne entspannen.
Was es macht: Beginnt abrupter und verlangsamt sich bis zum sanften Stopp. Ideal für Elemente, die die Szene verlassen.

LEICHT REIN UND RAUS

Herkunft und Bedeutung: Kombiniert das Beste aus beiden Welten — ein sanfter Start und ein sanfter Abschluss mit ein bisschen Schwung in der Mitte.
Was es macht: Beginnt und endet langsam, mit Beschleunigung in der Mitte. Der Alleskönner für Übergänge, die sich dynamisch und dennoch geschmeidig anfühlen müssen.

QUAD

Herkunft und Bedeutung: Quad stammt von „quadratisch“ ab und bezieht sich auf ein Polynom zweiten Grades. Es ist, als würde man einen sanften Spaziergang machen, der allmählich an Tempo gewinnt.
Was es macht: Animationen mit einer QUAD-Beschleunigungsfunktion beginnen langsam und beschleunigen sich im Verlauf gleichmäßig, wobei sie einer quadratischen Kurve folgen. Es ist subtiler als einige seiner dramatischeren Gegenstücke und eignet sich perfekt für sanfte Übergänge und einfache Bewegungen.

KUBISCH

Herkunft und Bedeutung: Diese Funktion stammt von „kubisch“ und bezieht sich auf ein Polynom dritten Grades. Stellen Sie sich ein Auto vor, das sanft von einem Stoppschild aus beschleunigt — es startet langsam, nimmt aber deutlicher an Geschwindigkeit zu als QUAD.
Was es macht: CUBIC-Animationen beginnen noch sanfter als QUAD-Animationen, beschleunigen jedoch schneller, wodurch eine ausgeprägtere Kurve entsteht. Dadurch eignen sie sich hervorragend, um Aufmerksamkeit zu erregen und gleichzeitig einen reibungslosen Ablauf beizubehalten.

QUART

Herkunft und Bedeutung: Quart kommt von „quartisch“, einem Polynom vierten Grades. Das ist wie ein Sprinter, der aus den Blöcken explodiert, wobei ein allmählicher Anstieg zu einer schnellen Beschleunigung führt.
Was es macht: Mit einer QUART-Beschleunigungsfunktion beginnen Animationen sehr langsam und nehmen dann schnell an Geschwindigkeit zu, wodurch eine steile Beschleunigungskurve entsteht. Es ist ideal für dynamische Bewegungen, bei denen eine signifikante Veränderung oder Ankunft betont werden muss.

QUINT

Herkunft und Bedeutung: Quint leitet sich von „Quintic“ ab und bezieht sich auf ein Polynom fünften Grades. Stellen Sie sich einen Raketenstart vor: eine kurze Pause auf der Startrampe vor einem kräftigen Aufstieg.
Was es macht: QUINT-Animationen beginnen in dieser Gruppe am langsamsten, beschleunigen sich dann aber dramatisch und bieten eine sehr scharfe Kurve. Diese Funktion eignet sich perfekt für dramatische Eingänge oder wenn Sie eine starke visuelle Wirkung erzielen möchten.

SINUS

Herkunft und Bedeutung: Der Sinus basiert auf der mathematischen Sinuswelle, die für ihre glatte und oszillierende Natur bekannt ist. Es ist wie das sanfte Auf und Ab von Wellen an einem Strand.
Was es macht: Die SINE-Beschleunigung sorgt für eine sanfte, harmonische Oszillation der Animationsgeschwindigkeit. Dadurch entsteht eine natürliche, organische Bewegung, die beruhigend und angenehm für das Auge ist und sich hervorragend für subtile Übergänge eignet.

EXPO

Herkunft und Bedeutung: Expo ist die Abkürzung für „exponentiell“ und deutet auf ein immer schnelleres Wachstum hin. Stellen Sie sich die Beschleunigungskurve einer Achterbahn vor, die nach unten rast.
Was es macht: EXPO-Animationen beginnen fast unmerklich und explodieren dann in Bewegung, wodurch eine extrem steile Beschleunigungskurve entsteht. Diese Funktion ist ideal für schnelle, energiereiche Übergänge, die schnell Aufmerksamkeit erregen müssen.

CIRC

Herkunft und Bedeutung: Circ bezieht sich auf „kreisförmig“ und verkörpert die Bewegung, sich entlang einer kreisförmigen Bahn hinein- oder herauszubewegen. Stellen Sie sich den glatten Bogen einer Kugel vor, die durch die Luft geschleudert wird.
Was es macht: CIRC-Beschleunigungsanimationen bewegen sich mit der Geschmeidigkeit und Präzision eines Kreisbogens. Sie beginnen langsam und beschleunigen sich auf eine Weise, die sich sowohl natürlich als auch elegant anfühlt. Es ist perfekt für Elemente, die sich bewegen oder übergehen müssen, und zwar mit einem Gefühl von Anmut und Fluidität.

ZURÜCK

Herkunft und Bedeutung: Zurück bedeutet eine Bewegung, die über den Start- oder Endpunkt hinausgeht und dann zurückkehrt, als würde man eine Steinschleuder zurückziehen, bevor man loslässt.
Was es macht: Wenn Sie die RÜCKSEITE lockern, schießen Animationen über ihr Ziel hinaus, bevor sie sich festsetzen, wodurch ein spielerischer Bounce-Back-Effekt entsteht. Es verleiht Übergängen eine lebendige, elastische Qualität, wodurch sie sich dynamischer und ansprechender anfühlen.

ELASTISCH

Herkunft und Bedeutung: Elastisch verkörpert, wie der Name schon sagt, das Verhalten eines elastischen Bandes, das sich dehnt und nach hinten schnappt. Es ist die Drama-Königin der Lockerungsfunktionen und bietet eine auffällige, übertriebene Bewegung.
Was es macht: ELASTIC-Animationen dehnen und springen mit einer lebendigen, übertriebenen Elastizität, sodass sich Elemente so anfühlen, als würden sie sich mit der Energie und Flexibilität eines Gummibandes bewegen. Diese Funktion ist perfekt für auffällige, lebendige Animationen, die einen Hauch von Laune und Spaß verleihen.

HÜPFEN, VORBEISPRINGEN

Herkunft und Bedeutung: Genau wie ein springender Ball ahmen diese Interaktionen die Physik nach, wenn man gegen eine Oberfläche prallt, wobei Bounce Past für ein wenig Überschwingen sorgt, was für Dramatik sorgt.
Was es macht: Erzeugt einen verspielten, fesselnden Effekt, bei dem Elemente abprallen, bevor sie sich an ihrem Platz festsetzen. Es verleiht der Seite Leben und Energie.

SCHAUKEL VON BIS, SCHWINGE VON, SCHAUKEL ZU

Herkunft und Bedeutung: Stellen Sie sich ein Pendel oder eine Schaukel vor — diese Interaktionen fangen die Essenz einer Schwingbewegung ein, entweder von einer Seite zur anderen, die mit einem Schwung beginnt oder endet.
Was es macht: Verleiht Elementen eine elegante, schwingende Bewegung und erzeugt so ein Gefühl von Rhythmus und Fluss. Ideal, um auf subtile, raffinierte Weise Aufmerksamkeit zu erregen.

Und das ist im Grunde genommen so, dass die Geschichte der Lockerung von Funktionen eine faszinierende Saga voller Innovationen ist, eine Verflechtung von Kunst und Wissenschaft, die das anhaltende Bestreben der Menschheit widerspiegelt, die Schönheit und Komplexität von Bewegung in unseren Kreationen nachzuahmen.