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 আরও প্রাকৃতিক প্রতিক্রিয়া দেয়।

অ্যান্টি-প্যাটার্ন: লেআউট প্যারামিটার অ্যানিমেট করতে Spring Animation ব্যবহার করবেন না (LayoutParams-এর মাধ্যমে View-এর প্রস্থ/উচ্চতা) — এটি প্রতিটি ফ্রেমে শ্রেণিবিন্যাস পুনঃগণনা ঘটায়, যা ঝাঁকুনি এবং FPS পতনের কারণ হয়। রঙ অ্যানিমেশনের জন্যও Easing বক্ররেখা পছন্দনীয়। স্ক্রল অবস্থান অ্যানিমেশনের জন্য, ফ্লিং সহ সিস্টেম Scroller ব্যবহার করুন — Spring Animation এখানে কোনো সুবিধা দেয় না। Android-এ সর্বোচ্চ পারফরম্যান্সের জন্য, একসঙ্গে সক্রিয় SpringAnimation ইনস্ট্যান্সের সংখ্যা 10–15-এ সীমিত করুন।