Frühlingsanimation: Die Physik der natürlichen UI-Bewegung
Erfahren Sie, wie Frühlingsanimationen im UI-Design funktionieren. Steifigkeit, Dämpfung, Masse und Geschwindigkeit verstehen. Erstellen Sie auf natürlicher Physik basierende Animationen für React und SwiftUI.
Kernaussage
Die Federanimation modelliert die UI-Bewegung mithilfe des physikalischen Verhaltens eines Masse-Feder-Dämpfer-Systems, bei dem die Bewegung einer Komponente durch Steifheit (wie stark sie in Richtung Ruhe zieht), Dämpfung (wie schnell sie Energie verliert) und Masse (wie viel Trägheit sie trägt) bestimmt wird. Im Gegensatz zu dauerbasierten Animationen reagieren Federn automatisch auf die Geschwindigkeit des Benutzers und können jederzeit unterbrochen werden, ohne dass es zu visuellen Unterbrechungen kommt.
Warum sich Federn natürlicher anfühlen als Dauerkurven
In der physischen Welt gibt es keine Konzepte wie „ease-in-out“ oder „cubic-bezier(0,4, 0, 0,2, 1)“. Physikalische Objekte werden durch Kräfte beschleunigt und durch Reibung abgebremst. Wenn eine Schublade aufgeschoben wird, erhält sie Schwung; Wenn Sie es loslassen, kommt es durch Reibung zur Ruhe. Die Frühlingsphysik reproduziert diese physikalische Realität in Software, weshalb iOS UIKit, Android Motion Compose und ExodeUI allesamt Spring-First-Animationssysteme sind.
Federparameter erklärt
Wenn Sie jeden Parameter verstehen, können Sie genau das physische Gefühl entwerfen, das Sie sich wünschen.
Steifheit (Spannung)
Wie stark die Feder in Richtung ihres Ruhewerts zieht. Hohe Steifigkeit (600+) sorgt für eine schnelle, reaktionsschnelle Benutzeroberfläche, die einem Tastendruck-Feedback ähnelt. Eine niedrige Steifigkeit (100–200) erzeugt langsame, fließende Bewegungen, die sich für Seitenübergänge oder schwebende Umgebungselemente eignen.
Dämpfung (Reibung)
Wie viel Energie verliert die Feder pro Zyklus? Bei kritischer Dämpfung erreicht die Feder den Ruhezustand, ohne zu schwingen. Unterdämpfte Federn (geringe Reibung) schwingen über und springen. Das Verhältnis Dämpfung / (2 × Quadrat(Steifigkeit × Masse)) bestimmt, ob Sie unterdämpft, kritisch gedämpft oder überdämpft sind.
Masse
Wie viel Trägheit das animierte Element trägt. Durch eine höhere Masse fühlt sich die Animation schwerer an und es dauert länger, die Richtung zu ändern. Die meisten UI-Animationen halten die Masse bei 1,0 und steuern das Gefühl durch Steifigkeit und Dämpfung.
Anfangsgeschwindigkeit
Wenn der Benutzer ein Element wischt oder schleudert, kann die Feder mit dieser Gestengeschwindigkeit initialisiert werden, wodurch eine nahtlose Kontinuität zwischen Geste und Federauslösung entsteht.
Praktische Federvoreinstellungen für UI-Komponenten
Diese Voreinstellungen decken die gängigsten UI-Interaktionsmuster ab.
- Tastendruck: Steifigkeit 500, Dämpfung 30 – sofort, bissig, minimale Sprungkraft
- Kartenexpansion: Steifigkeit 280, Dämpfung 24, Masse 1,2 – sanfte, gewichtete Expansion
- Schublade/Blatt: Steifigkeit 340, Dämpfung 28 – entscheidend, mit leichter Setzung
- Sprungbenachrichtigung: Steifigkeit 400, Dämpfung 18 – spielerisches Überschwingen
- Seitenübergang: Steifigkeit 220, Dämpfung 22, Masse 1,4 – filmisch, gewichtet
Produktionsnahes Implementierungsbeispiel
// Spring presets in React with the Motion library (motion.dev).
// The same stiffness / damping / mass values can be saved as motion tokens.
import { motion } from 'motion/react';
const springs = {
snappy: { type: 'spring', stiffness: 500, damping: 30, mass: 1 },
smooth: { type: 'spring', stiffness: 280, damping: 24, mass: 1.2 },
bouncy: { type: 'spring', stiffness: 400, damping: 18, mass: 1 },
cinematic: { type: 'spring', stiffness: 220, damping: 22, mass: 1.4 },
};
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ y: open ? 0 : 24, scale: open ? 1 : 0.96 }}
transition={springs.smooth}
>
Smooth physics-based card reveal
</motion.div>
);
}