Spring Animation — die Physik der Feder in Animationen

Was ist Spring Animation?

Spring Animation ist eine Animation, deren Bewegung durch die Gleichung des gedämpften harmonischen Oszillators beschrieben wird. Anstatt einen Wert über eine feste Zeit von 0 auf 1 zu interpolieren, berechnet Spring Animation die Position des Objekts zu jedem Zeitpunkt basierend auf physikalischen Parametern: Masse, Steifigkeit, Dämpfung und Anfangsgeschwindigkeit. Das Ergebnis ist eine natürliche, organische Bewegung, die nicht „mechanisch" wirkt.

Im Gegensatz zu Easing-Kurven (easeIn, easeOut, cubic-bezier), bei denen die Dauer festgelegt und der Pfad vorbestimmt ist, passt sich Spring Animation dynamisch an: Wenn sich der Zielwert während der Animation ändert, berechnet die Feder den Pfad von der aktuellen Position aus sanft neu. Dies ist besonders wichtig für Animationen, die unterbrochen werden können — Drag-to-Dismiss, Pull-to-Refresh, wischbare Karten (swipeable cards).

Laut Apple WWDC 2025 reduziert die Verwendung von Federanimation anstelle fester Kurven die wahrgenommene Latenz um 30–50% dank natürlicher Beschleunigung zu Beginn und sanfter Verlangsamung am Ende. Spring Animation wird für alle bewegungsbezogenen Animationen empfohlen: Verschiebung, Skalierung, Ein-/Ausblendung.

Physikalische Federparameter: damping und stiffness

Das Verhalten der Feder wird durch vier Parameter definiert. Stiffness (Steifigkeit) ist die Rückstellkraft ins Gleichgewicht: ein Wert von 100–300 ergibt eine weiche Feder für Listen, 500–1000 eine harte Feder für Schaltflächen und Schalter. Damping (Dämpfung) ist der Bewegungswiderstand: 0 — unendliche Schwingungen, 0.1–0.5 — merkliche gedämpfte Schwingungen (Prell-Effekt), 1 — kritische Dämpfung (keine Schwingungen, sanfte Verlangsamung).

Kritische Dämpfung (damping = 1.0) ist der optimale Modus für die meisten UI-Animationen: Das Objekt kehrt so schnell wie möglich ohne Überschwingen zur Zielposition zurück. Für den Prell-Effekt (z. B. Pull-to-Refresh) verwenden Sie damping = 0.3–0.5. Für das Einblenden von modalen Fenstern — damping = 0.6–0.8 mit stiffness = 300–500. Die Masse wird selten geändert — der Standardwert von 1.0 funktioniert für fast alle Fälle.

Spring Animation in iOS (Swift)

Auf iOS ist Spring Animation über UIView.animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:) seit iOS 7 und CASpringAnimation (Core Animation) seit iOS 9 verfügbar. Die UIView-Version ist einfacher und beliebter für das Animieren von View-Eigenschaften (transform, alpha, center). CASpringAnimation ist präziser und bietet Zugriff auf stiffness, damping und mass als separate Eigenschaften.

import UIKit

// UIView.animate mit Federparametern
let originalCenter = view.center

UIView.animate(
    withDuration: 0.8,
    delay: 0,
    usingSpringWithDamping: 0.5,
    initialSpringVelocity: 0.3,
    options: [.curveEaseInOut, .allowUserInteraction]
) {
    view.center = CGPoint(x: originalCenter.x + 100, y: originalCenter.y)
    view.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
} completion: { _ in
    UIView.animate(withDuration: 0.3) {
        view.transform = .identity
    }
}

// CASpringAnimation — präzise Kontrolle über Parameter
let spring = CASpringAnimation()
spring.keyPath = "transform.scale"
spring.fromValue = 1.0
spring.toValue = 1.5
spring.stiffness = 300
spring.damping = 10
spring.mass = 1.0
spring.initialVelocity = 5.0

"> CASpringAnimation.settlingDuration — berechnete Dauer
spring.duration = spring.settlingDuration
view.layer.add(spring, forKey: "scaleSpring")

CASpringAnimation.settlingDuration ist eine einzigartige Core-Animation-Eigenschaft, die die minimale Animationsdauer berechnet, die die Feder benötigt, um das Gleichgewicht zu erreichen. Das bedeutet, dass Sie die Dauer nicht manuell wählen müssen — das System bestimmt selbst, wie lange die Schwingungsdämpfung dauert. Für UIView.animate wird die Dauer explizit festgelegt, und ein damping von 0.3–0.7 ergibt einen merklichen Prell-Effekt. Für die Integration mit UIPanGestureRecognizer übergeben Sie velocityRecognizer.velocity(in: view) als initialSpringVelocity — so setzt die Animation die Fingerbewegung mit derselben Geschwindigkeit fort.

Spring Animation in Android (Kotlin)

Auf Android ist SpringAnimation Teil der AndroidX Dynamic Animation Bibliothek (androidx.dynamicanimation). Die Hauptklasse ist SpringAnimation, die jede float-Eigenschaft einer View oder eines benutzerdefinierten Objekts animiert. Parameter werden über SpringForce festgelegt — stiffness (Standard STIFFNESS_MEDIUM = 600) und dampingRatio (Standard DAMPING_RATIO_MEDIUM_BOUNCY = 0.5).

// build.gradle.kts
implementation("androidx.dynamicanimation:dynamicanimation:1.1.0")

// Kotlin: SpringAnimation mit benutzerdefiniertem SpringForce
import androidx.dynamicanimation.animation.SpringAnimation
import androidx.dynamicanimation.animation.SpringForce
import androidx.dynamicanimation.animation.FloatPropertyCompat

val springAnim = SpringAnimation(myView, SpringAnimation.TRANSLATION_X).apply {
    spring = SpringForce().apply {
        stiffness = SpringForce.STIFFNESS_LOW // 200.0f
        dampingRatio = SpringForce.DAMPING_RATIO_LOW_BOUNCY // 0.2f
        finalPosition = 300f
    }
    start()
}

// SpringAnimation mit Anfangsgeschwindigkeit von Geste
myView.setOnTouchListener { _, event ->
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            springAnim.cancel()
            false
        }
        MotionEvent.ACTION_UP -> {
            val velocity = velocityTracker?.getXVelocity() ?: 0f
            SpringAnimation(myView, SpringAnimation.TRANSLATION_X).apply {
                spring = SpringForce(0f) "> Rückkehr in die Ausgangsposition
                setStartVelocity(velocity)
                start()
            }
            true
        }
        else -> false
    }
}

"> SpringAnimation für eine benutzerdefinierte Eigenschaft
val customAnim = SpringAnimation(
    myObject,
    object : FloatPropertyCompat<MyClass>("progress") {
        override fun getValue(obj: MyClass): Float = obj.progress
        override fun setValue(obj: MyClass, value: Float) { obj.progress = value }
    }
).apply { start() }

SpringForce-Konstanten: STIFFNESS_LOW (200), STIFFNESS_MEDIUM (600), STIFFNESS_HIGH (1800); DAMPING_RATIO_HIGH_BOUNCY (0.2), DAMPING_RATIO_MEDIUM_BOUNCY (0.5), DAMPING_RATIO_LOW_BOUNCY (0.75), DAMPING_RATIO_NO_BOUNCY (1.0). Für RecyclerView mit Elementanimation verwenden Sie SpringAnimation mit DynamicAnimation.OnAnimationEndListener, um Ressourcen freizugeben. Zum Animieren mehrerer Eigenschaften verwenden Sie SpringAnimation.createFor(view, property).

Jetpack Compose: Ab Compose 1.0 ist Federanimation über Animatable mit spring() verfügbar — animationSpec = spring(dampingRatio = 0.5f, stiffness = 300f). Dies ist der bevorzugte Ansatz für Compose-Projekte, da SpringAnimation aus DynamicAnimation nur mit dem View-System kompatibel ist. Die Compose-Version von spring verwendet die gleiche Physik-Engine, arbeitet aber im Kontext des Compose Animation Systems und pausiert automatisch bei Trennung.

Spring Animation vs Easing: Wann was wählen

Spring Animation und Easing-Kurven (easeInOut, FastOutSlowIn, decelerate) lösen unterschiedliche Probleme. Easing-Kurven sind mathematisch definierte Pfade mit fester Zeit. Spring ist eine physikalische Simulation, bei der die Zeit von Parametern und Anfangsbedingungen abhängt. Für einfache Ein-/Ausblendanimationen sind Easing-Kurven ausreichend. Für Animationen, die mit Benutzerbewegungen verbunden sind (Drag, Swipe, Scroll), bietet Spring Animation eine natürlichere Reaktion.

Anti-Patterns: Verwenden Sie Spring Animation nicht zum Animieren von Layout-Parametern (View-Breite/-Höhe über LayoutParams) — dies verursacht eine Hierarchieneuberechnung bei jedem Frame, was zu Ruckeln und FPS-Einbrüchen führt. Für Farbanimationen sind Easing-Kurven ebenfalls vorzuziehen. Für die Animation der Scroll-Position verwenden Sie den systemeigenen Scroller mit Fling — Spring Animation bietet hier keine Vorteile. Für maximale Leistung auf Android begrenzen Sie die Anzahl gleichzeitig aktiver SpringAnimation-Instanzen auf 10–15.