Spring Animation — mahiyyəti, animasiyalarda yay fizikası

Spring Animation nədir?

Spring Animation — hərəkəti sönümləmə ilə harmonik osilyator tənliyi ilə təsvir edilən animasiyadır. Sabit vaxt ərzində dəyəri 0-dan 1-ə interpolasiya etmək əvəzinə, Spring Animation fiziki parametrlərə əsasən obyektin mövqeyini hər an hesablayır: kütlə (mass), sərtlik (stiffness), sönümləmə (damping) və başlanğıc sürət (initialVelocity). Nəticə — "mexaniki" görünməyən təbii, organik hərəkətdir.

Easing əyrilərindən (easeIn, easeOut, cubic-bezier) fərqli olaraq, burada müddət sabit və trayektoriya əvvəlcədən müəyyən edilmişdir, Spring Animation dinamik olaraq uyğunlaşır: animasiya zamanı hədəf dəyəri dəyişdirsəniz, yay cari mövqedən trayektoriyanı rəvan yenidən hesablayır. Bu, kəsilə bilən animasiyalar üçün xüsusilə vacibdir — drag-to-dismiss, pull-to-refresh, sürüşdürülən kartlar (swipeable cards).

Apple WWDC 2025 məlumatına görə, sabit əyrilər əvəzinə yay animasiyasından istifadə qavranılan gecikməni (perceived latency) 30–50% azaldır, bunun səbəbi başlanğıcda təbii sürətlənmə və sonda rəvan yavaşlamadır. Spring Animation hərəkətlə bağlı istənilən animasiya üçün tövsiyə olunur: yerdəyişmə, miqyaslama, görünmə/gizlənmə.

Yayın fiziki parametrləri: damping və stiffness

Yayın davranışı dörd parametrlə müəyyən edilir. Stiffness (sərtlik) — tarazlığa qayıdış qüvvəsi: 100–300 dəyəri siyahılar üçün yumşaq yay, 500–1000 isə düymələr və keçidlər üçün sərt yay verir. Damping (sönümləmə) — hərəkətə müqavimət: 0 — sonsuz rəqslər, 0.1–0.5 — nəzərə çarpan sönümlənən rəqslər (sıçrayış effekti), 1 — kritik sönümləmə (rəqssiz, rəvan yavaşlama).

Kritik sönümləmə (damping = 1.0) — əksər UI animasiyaları üçün optimal rejim: obyekt hədəf vəziyyətinə maksimal sürətlə aşmadan qayıdır. Sıçrayış effekti üçün (məsələn, pull-to-refresh) damping = 0.3–0.5 istifadə edin. Modal pəncərələrin görünməsi üçün — damping = 0.6–0.8, stiffness = 300–500. Kütlə nadir hallarda dəyişdirilir — standart dəyər 1.0 demək olar ki, bütün hallar üçün uyğundur.

iOS-da Spring Animation (Swift)

iOS-da Spring Animation iOS 7-dən etibarən UIView.animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:) və iOS 9-dan CASpringAnimation (Core Animation) vasitəsilə əlçatandır. UIView versiyası View xüsusiyyətlərinin (transform, alpha, center) animasiyası üçün daha sadə və populyardır. CASpringAnimation daha dəqiqdir və stiffness, damping və mass-ə ayrıca xüsusiyyətlər kimi giriş imkanı verir.

import UIKit

// UIView.animate yay parametrləri ilə
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 — parametrlər üzərində dəqiq nəzarət
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 — hesablanmış müddət
spring.duration = spring.settlingDuration
view.layer.add(spring, forKey: "scaleSpring")

CASpringAnimation.settlingDuration — Core Animation-un unikal xüsusiyyətidir, yayın tarazlığa çatması üçün lazım olan minimum animasiya müddətini hesablayır. Bu o deməkdir ki, siz əl ilə duration seçməli deyilsiniz — sistem rəqslərin sönümlənməsinin nə qədər vaxt aparacağını özü müəyyən edir. UIView.animate üçün müddət açıq şəkildə verilir, damping 0.3–0.7 isə nəzərə çarpan sıçrayış effekti verir. UIPanGestureRecognizer ilə əlaqə üçün velocityRecognizer.velocity(in: view) dəyərini initialSpringVelocity kimi ötürün — beləliklə animasiya barmağın hərəkətini eyni sürətlə davam etdirir.

Android-də Spring Animation (Kotlin)

Android-də SpringAnimation AndroidX Dynamic Animation (androidx.dynamicanimation) kitabxanasına daxildir. Əsas sinif — SpringAnimation, View və ya fərdi obyektin istənilən float xüsusiyyətini animasiya edir. Parametrlər SpringForce vasitəsilə təyin edilir — stiffness (standart STIFFNESS_MEDIUM = 600) və dampingRatio (standart DAMPING_RATIO_MEDIUM_BOUNCY = 0.5).

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

// Kotlin: SpringAnimation fərdi SpringForce ilə
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 jestdən başlanğıc sürəti ilə
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) "> İlkin mövqeyə qayıdış
                setStartVelocity(velocity)
                start()
            }
            true
        }
        else -> false
    }
}

"> Custom xassə üçün SpringAnimation
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 sabitləri: 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). Element animasiyası olan RecyclerView üçün resursları boşaltmaq üçün DynamicAnimation.OnAnimationEndListener ilə SpringAnimation istifadə edin. Çoxlu xüsusiyyətlərin animasiyası üçün SpringAnimation.createFor(view, property) istifadə edin.

Jetpack Compose: Compose 1.0-dan etibarən, yay animasiyası spring() ilə Animatable vasitəsilə əlçatandır — animationSpec = spring(dampingRatio = 0.5f, stiffness = 300f). Bu, Compose layihələri üçün üstünlük verilən üsuldur, çünki DynamicAnimation-dən SpringAnimation yalnız View sistemi ilə uyğunlaşır. Compose versiyası spring eyni fiziki mühərrikdən istifadə edir, lakin Compose Animation System kontekstində işləyir və detachment zamanı avtomatik dayanır.

Spring Animation vs Easing: nə vaxt hansı seçilməlidir

Spring Animation və Easing əyriləri (easeInOut, FastOutSlowIn, decelerate) müxtəlif vəzifələri həll edir. Easing əyriləri — sabit vaxtla riyazi olaraq verilmiş trayektoriyadır. Spring — fiziki simulyasiyadır, burada vaxt parametrlərdən və başlanğıc şərtlərdən asılıdır. Sadə görünmə/gizlənmə animasiyaları üçün Easing əyriləri kifayətdir. İstifadəçi hərəkəti ilə bağlı animasiyalar üçün (drag, swipe, scroll) Spring Animation daha təbiidir.

Anti-patterns: layout parametrlərinin (LayoutParams vasitəsilə View-in eni/hündürlüyü) animasiyası üçün Spring Animation istifadə etməyin — bu, hər kadrda iyerarxiyanın yenidən hesablanmasına səbəb olur, titrəmə və FPS düşməsinə gətirib çıxarır. Rəng animasiyası üçün də Easing əyriləri daha yaxşıdır. Scroll mövqeyinin animasiyası üçün sistem Scroller-dən fling ilə istifadə edin — Spring Animation burada üstünlük vermir. Android-də maksimal performans üçün eyni anda aktiv SpringAnimation sayını 10–15 ilə məhdudlaşdırın.