Spring Animation — एनिमेशन में स्प्रिंग की भौतिकी

Spring Animation क्या है?

Spring Animation एक एनिमेशन है जिसकी गति को अवमंदित हार्मोनिक दोलक समीकरण द्वारा वर्णित किया गया है। एक निश्चित समय में 0 से 1 तक मान प्रक्षेपित करने के बजाय, Spring Animation भौतिक मापदंडों: द्रव्यमान, कठोरता, डंपिंग और प्रारंभिक वेग के आधार पर प्रत्येक क्षण वस्तु की स्थिति की गणना करता है। परिणाम एक प्राकृतिक, जैविक गति है जो "यांत्रिक" नहीं दिखती।

Easing वक्रों (easeIn, easeOut, cubic-bezier) के विपरीत, जहाँ अवधि निश्चित होती है और प्रक्षेपवक्र पूर्वनिर्धारित होता है, Spring Animation गतिशील रूप से अनुकूलित होता है: यदि एनिमेशन के दौरान लक्ष्य मान बदलता है, तो स्प्रिंग वर्तमान स्थिति से प्रक्षेपवक्र की सुचारू रूप से पुनर्गणना करता है। यह उन एनिमेशन के लिए विशेष रूप से महत्वपूर्ण है जो बाधित हो सकते हैं — ड्रैग-टू-डिसमिस, पुल-टू-रिफ्रेश, स्वाइप करने योग्य कार्ड।

Apple WWDC 2025 के अनुसार, निश्चित वक्रों के बजाय स्प्रिंग एनिमेशन का उपयोग शुरुआत में प्राकृतिक त्वरण और अंत में सुचारू मंदी के कारण अनुभूत विलंबता को 30–50% तक कम करता है। Spring Animation किसी भी गति-संबंधी एनिमेशन के लिए अनुशंसित है: स्थानांतरण, स्केलिंग, प्रकट/गायब होना।

स्प्रिंग के भौतिक पैरामीटर: damping और stiffness

स्प्रिंग का व्यवहार चार मापदंडों द्वारा परिभाषित किया गया है। Stiffness (कठोरता) संतुलन में वापस लाने वाला बल है: 100–300 का मान सूचियों के लिए नरम स्प्रिंग देता है, 500–1000 बटन और स्विच के लिए कठोर स्प्रिंग देता है। Damping (अवमंदन) गति का प्रतिरोध है: 0 — अनंत दोलन, 0.1–0.5 — ध्यान देने योग्य क्षयकारी दोलन (उछाल प्रभाव), 1 — क्रांतिक अवमंदन (बिना दोलन के, सुचारू मंदी)।

क्रांतिक अवमंदन (damping = 1.0) अधिकांश UI एनिमेशन के लिए इष्टतम मोड है: वस्तु बिना ओवरशूट के यथासंभव तेज़ी से लक्ष्य स्थिति में लौट आती है। उछाल प्रभाव के लिए (जैसे पुल-टू-रिफ्रेश), damping = 0.3–0.5 का उपयोग करें। मॉडल विंडो प्रकट होने के लिए — damping = 0.6–0.8, stiffness = 300–500 के साथ। द्रव्यमान शायद ही कभी बदला जाता है — मानक मान 1.0 लगभग सभी मामलों के लिए उपयुक्त है।

iOS में Spring Animation (Swift)

iOS पर, Spring Animation iOS 7 से UIView.animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:) और iOS 9 से CASpringAnimation (Core Animation) के माध्यम से उपलब्ध है। UIView संस्करण View गुणों (transform, alpha, center) को एनिमेट करने के लिए सरल और अधिक लोकप्रिय है। CASpringAnimation अधिक सटीक है और stiffness, damping और mass को अलग-अलग गुणों के रूप में एक्सेस प्रदान करता है।

import UIKit

// UIView.animate स्प्रिंग पैरामीटर के साथ
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 — मापदंडों पर सटीक नियंत्रण
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 — गणना की गई अवधि
spring.duration = spring.settlingDuration
view.layer.add(spring, forKey: "scaleSpring")

CASpringAnimation.settlingDuration एक अनूठी Core Animation संपत्ति है जो स्प्रिंग को संतुलन तक पहुँचने के लिए आवश्यक न्यूनतम एनिमेशन अवधि की गणना करती है। इसका मतलब है कि आपको मैन्युअल रूप से अवधि चुनने की आवश्यकता नहीं है — सिस्टम स्वयं निर्धारित करता है कि दोलन क्षय में कितना समय लगेगा। UIView.animate के लिए, अवधि स्पष्ट रूप से निर्धारित की जाती है, और 0.3–0.7 का damping ध्यान देने योग्य उछाल प्रभाव देता है। UIPanGestureRecognizer के साथ एकीकरण के लिए, velocityRecognizer.velocity(in: view) को initialSpringVelocity के रूप में पास करें — इससे एनिमेशन उसी गति से उंगली की गति जारी रखता है।

Android में Spring Animation (Kotlin)

Android पर, SpringAnimation AndroidX Dynamic Animation लाइब्रेरी (androidx.dynamicanimation) का हिस्सा है। मुख्य क्लास SpringAnimation है, जो View या कस्टम ऑब्जेक्ट के किसी भी float गुण को एनिमेट करता है। पैरामीटर SpringForce के माध्यम से सेट किए जाते हैं — stiffness (डिफ़ॉल्ट STIFFNESS_MEDIUM = 600) और dampingRatio (डिफ़ॉल्ट DAMPING_RATIO_MEDIUM_BOUNCY = 0.5)।

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

// Kotlin: कस्टम SpringForce के साथ SpringAnimation
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
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) "> मूल स्थिति में लौटना
                setStartVelocity(velocity)
                start()
            }
            true
        }
        else -> false
    }
}

"> कस्टम गुण के लिए 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 स्थिरांक: 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 के लिए, संसाधनों को मुक्त करने के लिए DynamicAnimation.OnAnimationEndListener के साथ SpringAnimation का उपयोग करें। कई गुणों को एनिमेट करने के लिए, SpringAnimation.createFor(view, property) का उपयोग करें।

Jetpack Compose: Compose 1.0 से शुरू, स्प्रिंग एनिमेशन spring() के साथ Animatable के माध्यम से उपलब्ध है — animationSpec = spring(dampingRatio = 0.5f, stiffness = 300f)। यह Compose प्रोजेक्ट के लिए पसंदीदा तरीका है, क्योंकि DynamicAnimation से SpringAnimation केवल View सिस्टम के साथ संगत है। spring का Compose संस्करण समान भौतिकी इंजन का उपयोग करता है लेकिन Compose Animation System के संदर्भ में काम करता है, डिटैचमेंट पर स्वचालित रूप से रुक जाता है।

Spring Animation बनाम Easing: कब क्या चुनें

Spring Animation और Easing वक्र (easeInOut, FastOutSlowIn, decelerate) विभिन्न समस्याओं का समाधान करते हैं। Easing वक्र निश्चित समय के साथ गणितीय रूप से परिभाषित प्रक्षेपवक्र हैं। Spring एक भौतिक सिमुलेशन है जहाँ समय मापदंडों और प्रारंभिक स्थितियों पर निर्भर करता है। सरल प्रकट/गायब एनिमेशन के लिए, Easing वक्र पर्याप्त हैं। उपयोगकर्ता गति (ड्रैग, स्वाइप, स्क्रॉल) से जुड़े एनिमेशन के लिए, Spring Animation अधिक प्राकृतिक प्रतिक्रिया देता है।

एंटी-पैटर्न: लेआउट पैरामीटर (LayoutParams के माध्यम से View की चौड़ाई/ऊँचाई) को एनिमेट करने के लिए Spring Animation का उपयोग न करें — इससे प्रत्येक फ्रेम पर पदानुक्रम पुनर्गणना होती है, जिससे हकलाहट और FPS गिरावट आती है। रंग एनिमेशन के लिए भी Easing वक्र बेहतर हैं। स्क्रॉल स्थिति एनिमेशन के लिए, फ्लिंग के साथ सिस्टम Scroller का उपयोग करें — Spring Animation यहाँ कोई लाभ नहीं देता। Android पर अधिकतम प्रदर्शन के लिए, एक साथ सक्रिय SpringAnimation इंस्टेंस की संख्या 10–15 तक सीमित करें।