Cheat Sheet für Easing-Funktionen
Übergangsfunktionen(engl. easing functions) bestimmen die Änderungsrate eines Parameters im Verlauf der Zeit.
Gegenstände in der Realität bewegen sich selten ruckartig oder mit konstanter Geschwindigkeit. Öffnen wir eine Schublade, dann ziehen wir erst stark und bremsen diese Bewegung dann ab. Lassen wir einen Ball fallen, wird er zunächst zum Boden hin beschleunigen, um dann vom Boden abzuspringen.
Diese Seite hilft Dir, passende Übergangsfunktionen zu finden.
Open Source
Hilf dabei, diese Seite in Deine Sprache zu übersetzen
x
t
CSS
In CSS können Übergangfunktionen in den 'transition'- und 'animation'-Properties eingestellt werden.
.block { transition: transform 0.6s ; }
Auf cubic-bezier.com bearbeiten.
In CSS kann diese Funktion via
@keyframes implementiert werden:Größe
Lade...
Position
Lade...
Transparenz
Lade...
PostCSS
In PostCSS lässt sich diese Übergangsfunktion weitaus einfacher nutzen. Das Plugin postcss-easings nutzt die Definitionen der Übergangsfunktionen dieser Seite.
.block { transition: transform 0.6s ; }
Diese Deklaration wird später in die oben gezeigte umgewandelt.
Diese Funktion kann leider mit keinem PostCSS-Plugin gesetzt werden. Die Verwending von
@keyframes ist jedoch möglich. Siehe oben.Gradient
Mit postcss-easing-gradients ist es möglich, Gradienten darzustellen.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
Berechnungsfunktion
Untenstehend ist eine Beispielimplementierung dieser Übergangsfunktion in TypeScript dargestellt. Die Variable x repräsentiert den Fortschritt des Übergangs in den Grenzen von 0 (Start des Übergangs) bis 1 (Ende des Übergangs).
function (x: number): number {
}Untenstehend ist eine Beispielimplementierung dieser Übergangsfunktion in TypeScript dargestellt. Die Variable x repräsentiert den Fortschritt des Übergangs in den Grenzen von 0 (Start des Übergangs) bis 1 (Ende des Übergangs).
function (x: number): number {
}Animation mit dieser Funktion vergleichen für:
Diese Funktion:
Diese Funktion
Lineare Funktion:
Lineare Funktion