Eine Bézierkurve ist eine mathematisch parametrisierte Kurve, die durch Kontrollpunkte definiert wird. Sie wurde in den 1960er-Jahren von den französischen Ingenieuren Pierre Bézier und Paul de Casteljau für den Karosseriebau entwickelt und bildet heute das mathematische Fundament moderner Computergrafik, Vektordesigns und Animationskurven.
Bedeutung
Im Webdesign und in der Frontend-Entwicklung steuern Bézierkurven zwei fundamentale Elemente: Vektorpfade in SVGs (z. B. geschwungene Formen oder Icons) und Animations-Transitions (CSS transition-timing-function: cubic-bezier()). Durch die mathematische Definition sind Bézierkurven unendlich skalierbar, ohne jemals pixelig zu wirken. Sie ermöglichen organische, physikalisch glaubwürdige Bewegungen auf Webseiten.
Funktionsweise
Bézierkurven werden durch Kontrollpunkte beschrieben. Eine lineare Bézierkurve ist eine gerade Linie zwischen zwei Punkten. Eine quadratische Kurve nutzt einen zusätzlichen Kontrollpunkt, um die Kurve zu ziehen. Eine kubische Bézierkurve (Cubic Bézier) verwendet zwei Kontrollpunkte (P1 und P2) zwischen Start- (P0) und Endpunkt (P3). In CSS-Animationen beschreibt eine cubic-bezier(x1, y1, x2, y2)-Funktion den Verlauf von Zeit (x-Achse) und Fortschritt (y-Achse) einer Animation.
Praxisbeispiel
Eine GSAP-Animation slidet ein Menü mit einem custom Easing ein, das über cubic-bezier(0.25, 1, 0.5, 1) definiert ist (Ease-Out-Effekt). Die Bewegung startet extrem schnell und bremst zum Ende hin sanft ab. Das wirkt auf den Nutzer elegant und reaktionsschnell.