Spring Animation — lényege, a rugó fizikája az animációkban

Mi az a Spring Animation?

Spring Animation — olyan animáció, amelynek mozgását a csillapított harmonikus oszcillátor egyenlete írja le. Ahelyett, hogy az értéket 0-ról 1-re interpolálná fix idő alatt, a Spring Animation az objektum pozícióját minden pillanatban fizikai paraméterek alapján számítja ki: tömeg (mass), merevség (stiffness), csillapítás (damping) és kezdeti sebesség (initialVelocity). Az eredmény — természetes, organikus mozgás, amely nem tűnik „mechanikusnak”.

Ellentétben az Easing görbékkel (easeIn, easeOut, cubic-bezier), ahol az időtartam fix és a pálya előre meghatározott, a Spring Animation dinamikusan alkalmazkodik: ha megváltoztatja a célértéket az animáció közben, a rugó simán újraszámítja a pályát az aktuális pozícióból. Ez különösen fontos a megszakítható animációknál — drag-to-dismiss, pull-to-refresh, húzható kártyák (swipeable cards).

Az Apple WWDC 2025 szerint a rugó animáció használata a fix görbék helyett 30–50%-kal csökkenti az észlelt késleltetést (perceived latency) a természetes gyorsulásnak köszönhetően az elején és a sima lassulásnak a végén. A Spring Animation minden mozgással kapcsolatos animációhoz ajánlott: elmozdulás, méretezés, megjelenés/eltűnés.

A rugó fizikai paraméterei: damping és stiffness

A rugó viselkedését négy paraméter határozza meg. Stiffness (merevség) — az egyensúlyba való visszatérés ereje: 100–300 érték puha rugót ad listákhoz, 500–1000 — kemény rugót gombokhoz és kapcsolókhoz. Damping (csillapítás) — a mozgással szembeni ellenállás: 0 — végtelen rezgések, 0.1–0.5 — észrevehető csillapított rezgések (pattanás effektus), 1 — kritikus csillapítás (rezgések nélkül, sima lassulás).

Kritikus csillapítás (damping = 1.0) — optimális mód a legtöbb UI animációhoz: az objektum a lehető leggyorsabban visszatér a célpozícióba túllövés nélkül. Pattanás effektushoz (pl. pull-to-refresh) használjon damping = 0.3–0.5-öt. Modális ablakok megjelenéséhez — damping = 0.6–0.8, stiffness = 300–500. A tömeget ritkán változtatják — az 1.0 standard érték szinte minden esetben megfelelő.

Spring Animation iOS rendszeren (Swift)

iOS rendszeren a Spring Animation elérhető a UIView.animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:) segítségével iOS 7-től és a CASpringAnimation (Core Animation) segítségével iOS 9-től. A UIView verzió egyszerűbb és népszerűbb a View tulajdonságainak (transform, alpha, center) animálásához. A CASpringAnimation pontosabb, és hozzáférést biztosít a stiffness, damping és mass tulajdonságokhoz különálló paraméterekként.

import UIKit

// UIView.animate rugó paraméterekkel
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 — pontos kontroll a paraméterek felett
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 — számított időtartam
spring.duration = spring.settlingDuration
view.layer.add(spring, forKey: "scaleSpring")

CASpringAnimation.settlingDuration — a Core Animation egyedi tulajdonsága, amely kiszámítja a rugó egyensúlyba jutásához szükséges minimális animációs időtartamot. Ez azt jelenti, hogy nem kell manuálisan kiválasztania a duration-t — a rendszer maga határozza meg, mennyi ideig tart a rezgések csillapítása. UIView.animate esetén az időtartam explicit módon van megadva, a damping 0.3–0.7 észrevehető pattanás effektust ad. UIPanGestureRecognizer-hez való kapcsoláshoz adja át a velocityRecognizer.velocity(in: view) értéket initialSpringVelocity-ként — így az animáció ugyanolyan sebességgel folytatja az ujj mozgását.

Spring Animation Android rendszeren (Kotlin)

Android rendszeren a SpringAnimation az AndroidX Dynamic Animation (androidx.dynamicanimation) könyvtár része. A fő osztály — SpringAnimation, amely bármely float tulajdonságot animálja egy View vagy egyedi objektum esetén. A paraméterek a SpringForce segítségével állíthatók be — stiffness (alapértelmezett STIFFNESS_MEDIUM = 600) és dampingRatio (alapértelmezett DAMPING_RATIO_MEDIUM_BOUNCY = 0.5).

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

// Kotlin: SpringAnimation egyedi SpringForce-val
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 gesztusból származó kezdeti sebességgel
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) "> Visszatérés az eredeti pozícióba
                setStartVelocity(velocity)
                start()
            }
            true
        }
        else -> false
    }
}

"> SpringAnimation egyéni tulajdonsághoz
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 konstansok: 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). RecyclerView-hoz elem animációval használja a SpringAnimation-t DynamicAnimation.OnAnimationEndListener-rel az erőforrások felszabadításához. Több tulajdonság animálásához használja a SpringAnimation.createFor(view, property) metódust.

Jetpack Compose: Compose 1.0-tól kezdve a rugó animáció elérhető az Animatable segítségével spring() -el — animationSpec = spring(dampingRatio = 0.5f, stiffness = 300f). Ez az előnyben részesített módszer Compose projektekhez, mivel a DynamicAnimation-ből származó SpringAnimation csak a View rendszerrel kompatibilis. A Compose verzió spring ugyanazt a fizikai motort használja, de a Compose Animation System kontextusában működik, és automatikusan leáll detachment-kor.

Spring Animation vs Easing: mikor mit válasszunk

Spring Animation és Easing görbék (easeInOut, FastOutSlowIn, decelerate) különböző feladatokat oldanak meg. Az Easing görbék — matematikailag meghatározott pálya fix idővel. A Spring — fizikai szimuláció, ahol az idő a paraméterektől és a kezdeti feltételektől függ. Egyszerű megjelenés/eltűnés animációkhoz az Easing görbék elegendőek. Felhasználói mozgással kapcsolatos animációkhoz (drag, swipe, scroll) a Spring Animation természetesebb visszajelzést ad.

Anti-patterns: ne használja a Spring Animation-t layout paraméterek (View szélesség/magasság LayoutParams-en keresztül) animálásához — ez a hierarchia újraszámítását okozza minden képkockában, ami rángatáshoz és FPS csökkenéshez vezet. Szín animációhoz is az Easing görbék jobbak. Scroll pozíció animálásához használja a rendszer Scroller-t fling-el — a Spring Animation itt nem nyújt előnyöket. Maximális teljesítményhez Androidon korlátozza az egyidejűleg aktív SpringAnimation-ok számát 10–15-re.