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 استعمال کریں۔ موڈل ونڈو ظاہر ہونے کے لیے — stiffness = 300–500 کے ساتھ damping = 0.6–0.8 استعمال کریں۔ کمیت شاذ و نادر ہی بدلی جاتی ہے — معیاری قدر 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 منحنیاں ترجیح دی جاتی ہیں۔ اسکرول پوزیشن اینیمیشن کے لیے، fling کے ساتھ سسٹم Scroller استعمال کریں — Spring Animation یہاں کوئی فائدہ نہیں دیتی۔ Android پر زیادہ سے زیادہ کارکردگی کے لیے، بیک وقت فعال SpringAnimation مثالوں کی تعداد 10–15 تک محدود کریں۔