Timeline — मूल बातें, ऐप्लिकेशन में एनिमेशन समय प्रबंधन

Timeline क्या है?

Timeline एक एनिमेशन समय मॉडल है जो परिभाषित करता है कि एनिमेशन कब शुरू होता है, यह कितने समय तक चलता है और समय की प्रगति एनिमेटेड पैरामीटर में बदलाव में कैसे बदल जाती है। फ्रेम-दर-फ्रेम एनिमेशन के विपरीत, जहां प्रत्येक फ्रेम मैन्युअल रूप से सेट किया जाता है, टाइमलाइन एनिमेशन को पैरामीटर द्वारा वर्णित किया जाता है: duration — कुल अवधि, startDelay — शुरू होने से पहले देरी, repeatCount — दोहराव की संख्या, और timingFunction — गति वक्र।

टाइमलाइन सामान्यीकृत स्थान [0, 1] में काम करती है — स्थानीय समय या प्रगति। शून्य मान एनिमेशन की शुरुआत से मेल खाता है, एक पूर्णता से। एक ईज़िंग फ़ंक्शन रैखिक स्थानीय समय को वास्तविक एनिमेशन प्रगति में बदलता है। यदि repeatCount > 1 है, तो टाइमलाइन चक्रित होती है (RESTART) या उलट जाती है (REVERSE)। iOS में, CAMediaTiming speed (प्लेबैक दर, >1 तेज करता है) और timeOffset (टाइमलाइन शिफ्ट) जोड़ता है। Android में, Animator सीधे टाइमलाइन स्थिति नियंत्रण के लिए setCurrentPlayTime() का उपयोग करता है। Material Design के अनुसार, 100 ms से छोटे एनिमेशन एनिमेशन के रूप में नहीं माने जाते, जबकि 500 ms से लंबे एनिमेशन परेशान करने लगते हैं। इंटरफ़ेस एनिमेशन के लिए इष्टतम अवधि 200–350 ms है।

iOS में Timeline: CAMediaTiming और CACurrentMediaTime

iOS में, एनिमेशन टाइमलाइन प्रबंधन CAMediaTiming प्रोटोकॉल के माध्यम से किया जाता है, जो CAAnimation और CALayer द्वारा कार्यान्वित किया जाता है। यह गुण प्रदान करता है: duration (सेकंड में), beginTime (पैरेंट टाइमलाइन के सापेक्ष शुरुआत का समय), repeatCount (दोहराव की संख्या), repeatDuration (कुल दोहराव अवधि), autoreverses (स्वतः उलट), fillMode (एनिमेशन से पहले/बाद में व्यवहार), speed (प्लेबैक दर), और timeOffset (टाइमलाइन शिफ्ट)।

CACurrentMediaTime() एक फ़ंक्शन है जो डिवाइस के अंतिम रिबूट के बाद से सेकंड में पूर्ण समय लौटाता है। इसका उपयोग कई एनिमेशन को सिंक्रनाइज़ करने के लिए आधार टाइमस्टैम्प के रूप में किया जाता है: सटीक देरी के साथ एनिमेशन का एक समूह शुरू करने के लिए beginTime = CACurrentMediaTime() + offset सेट करें। CAMediaTiming टाइमलाइन पदानुक्रम का भी समर्थन करता है — एक पैरेंट लेयर speed गुण के माध्यम से सभी चाइल्ड एनिमेशन को तेज़/धीमा कर सकती है। UIKit में, UIViewPropertyAnimator (iOS 10+) duration, delay गुणों और startAnimation/pauseAnimation/stopAnimation कॉलबैक के माध्यम से टाइमलाइन को एब्सट्रैक्ट करता है। SwiftUI में, Animation संरचना duration को एनिमेशन विनिर्देश के भाग के रूप में प्रदान करती है, लेकिन सीधा टाइमलाइन नियंत्रण छिपा हुआ है — कस्टम टाइमलाइन के लिए कस्टम scheduler के साथ TimelineView (iOS 15+) का उपयोग करें।

Android में Timeline: Animator और duration

Android में, टाइमलाइन प्रबंधन Animator क्लास और इसके उपवर्गों (ValueAnimator, ObjectAnimator) में केंद्रीकृत है। मुख्य टाइमलाइन गुण हैं: duration (मिलीसेकंड में), startDelay (शुरू होने से पहले देरी), repeatCount (दोहराव की संख्या), repeatMode (RESTART या REVERSE)। setCurrentPlayTime(long) विधि टाइमलाइन पर किसी भी स्थान पर नेविगेट करने की अनुमति देती है।

ValueAnimator एक एब्स्ट्रक्शन लेयर जोड़ता है: यह duration के आधार पर 0 से 1 (सामान्यीकृत समय) तक मान उत्पन्न करता है और उन्हें TimeInterpolator को भेजता है। AnimatorSet क्रमिक (playSequentially) या समानांतर (playTogether) निष्पादन के साथ कई Animator को एक ही टाइमलाइन में संयोजित करने की अनुमति देता है। Jetpack Compose में, टाइमलाइन AnimationSpec के माध्यम से प्रबंधित की जाती है: tween (durationMillis, delayMillis, easing), spring (dampingRatio, stiffness), और keyframes (प्रत्येक खंड के लिए कस्टम easing के साथ टाइमलाइन पर बिंदु)। Compose AnimatedContent transitionSpec के लिए टाइमलाइन का उपयोग करता है — डेवलपर बताता है कि समय ऑफ़सेट के साथ सामग्री कैसे दिखाई/गायब होती है। Android Performance के अनुसार, 60fps के लिए एनिमेशन टाइमलाइन 16 ms (vsync चक्र) का गुणज होनी चाहिए — गलत अवधि डिस्प्ले रिफ्रेश दर के बेमेल होने के कारण फ्रेम ड्रॉप का कारण बन सकती है।

समय में एनिमेशन संरचना

कई एनिमेशन बनाते समय टाइमलाइन विशेष रूप से महत्वपूर्ण हो जाती है। तीन बुनियादी पैटर्न: कैस्केड — एनिमेशन ऑफ़सेट के साथ क्रमिक रूप से शुरू होते हैं (प्रत्येक अगला पिछले से ऑफ़सेट के बाद शुरू होता है), समानांतर — सभी एनिमेशन एक ही टाइमलाइन के साथ एक साथ शुरू होते हैं, और स्टैगर — एनिमेशन ओवरलैप के साथ शुरू होते हैं (दूसरा पहले के पूरा होने से पहले शुरू होता है)।

iOS में, कैस्केड प्रत्येक CAAnimation के beginTime = पिछला beginTime + पिछला duration के माध्यम से कार्यान्वित किया जाता है। स्टैगर के लिए, नेस्टेड एनिमेशन में विभिन्न beginTime मानों के साथ CAAnimationGroup का उपयोग किया जाता है। Android में, AnimatorSet playSequentially और playTogether का समर्थन करता है; प्रत्येक Animator के लिए startDelay सेट करके स्टैगर बनाया जाता है। Compose में, AnimatedVisibility enter/exitTransition के साथ सूची आइटम के कैस्केडिंग प्रदर्शन के लिए staggerChildren संस्करण में स्टैगर का उपयोग करता है। WWDC और Google I/O 2024 में, दोनों प्लेटफ़ॉर्म ने टाइमलाइन विज़ुअलाइज़ेशन टूल पेश किए: Xcode Animations Inspector और Android Studio Animations Timeline — वे वास्तविक समय में वास्तविक टाइमलाइन और ड्रॉप किए गए फ्रेम दिखाते हैं।

कोड उदाहरण

iOS: CAMediaTiming के साथ CABasicAnimation

कस्टम टाइमलाइन के साथ एनिमेशन का एक उदाहरण: 0.3 सेकंड की देरी, 0.6 सेकंड की अवधि, ऑटोरिवर्स और अनंत दोहराव। CAMediaTiming सभी समय मापदंडों को नियंत्रित करता है।

import UIKit

func breathingAnimation(layer: CALayer) {
    let animation = CABasicAnimation(keyPath: "opacity")
    animation.duration = 0.6
    animation.beginTime = CACurrentMediaTime() + 0.3
    animation.fromValue = 1.0
    animation.toValue = 0.3
    animation.autoreverses = true
    animation.repeatCount = .infinity
    animation.speed = 1.0
    animation.fillMode = .both

    layer.add(animation, forKey: "breathing")
}

beginTime = CACurrentMediaTime() + 0.3 300 ms की देरी प्रदान करता है। autoreverses = true प्रत्येक चक्र के बाद एनिमेशन को उलटा चलाता है। repeatCount = .infinity “साँस लेने” के प्रभाव का अनंत लूप बनाता है। speed = 1.0 — सामान्य गति; 2.0 के मान से एनिमेशन को 2x तेज करें।

iOS: कस्टम टाइमलाइन के लिए TimelineView

SwiftUI TimelineView (iOS 15+) कस्टम एनिमेशन के लिए सिस्टम टाइमलाइन तक पहुंच प्रदान करता है। व्यू प्रत्येक scheduler टिक पर अपडेट होता है।

import SwiftUI

struct TimelineViewExample: View {
    var body: some View {
        TimelineView(.periodic(from: .now, by: 0.1)) { context in
            let seconds = context.date.timeIntervalSinceReferenceDate
            let phase = sin(seconds * 2 * .pi)

            Circle()
                .fill(Color.blue)
                .frame(width: 60 + 30 * phase)
                .animation(.linear(duration: 0), value: phase)
        }
    }
}

TimelineView .periodic scheduler के साथ हर 0.1 सेकंड में टिक उत्पन्न करता है। क्लोज़र में, context.date वर्तमान समय है, जो साइन वेव चरण में परिवर्तित हो जाता है। वृत्त का आकार 1 Hz आवृत्ति पर स्पंदित होता है। TimelineView, Animation API के बिना SwiftUI में अपनी स्वयं की टाइमलाइन के साथ एनिमेशन बनाने का एकमात्र तरीका है।

Android: कस्टम टाइमलाइन के साथ ValueAnimator

पूर्ण टाइमलाइन नियंत्रण के साथ ValueAnimator: देरी, अवधि, दोहराव। setCurrentPlayTime विधि टाइमलाइन पर कूदने की अनुमति देती है।

import android.animation.ValueAnimator
import android.view.animation.AccelerateDecelerateInterpolator
import android.view.View

fun View.timelineAnimation() {
    ValueAnimator.ofFloat(0f, 1f).apply {
        duration = 400
        startDelay = 200
        repeatCount = 2
        repeatMode = ValueAnimator.REVERSE
        interpolator = AccelerateDecelerateInterpolator()

        addUpdateListener { animator ->
            val progress = animator.animatedFraction
            alpha = progress
            translationX = progress * 100f
        }

        start()
    }
}

startDelay = 200 ms — शुरू होने से पहले देरी। repeatMode = REVERSE एनिमेशन को प्रारंभिक मान पर लौटाता है। animatedFraction repeatMode को ध्यान में रखते हुए 0 से 1 तक प्रगति देता है। addUpdateListener प्रत्येक फ्रेम (सामान्यतः 16 ms) पर फायर होता है। रोकने के लिए pause() / resume() का उपयोग करें।

Android: टाइमलाइन संरचना के लिए AnimatorSet

AnimatorSet कई एनिमेशन से जटिल टाइमलाइन बनाने की अनुमति देता है। उदाहरण ओवरलैप (स्टैगर) के साथ क्रमिक निष्पादन प्रदर्शित करता है।

import android.animation.AnimatorSet
import android.animation.ObjectAnimator
import android.view.View

fun View.staggerAnimation() {
    val fadeIn = ObjectAnimator.ofFloat(this, "alpha", 0f, 1f).apply {
        duration = 300
    }
    val slideUp = ObjectAnimator.ofFloat(this, "translationY", 100f, 0f).apply {
        duration = 400
        startDelay = 100
    }
    val scale = ObjectAnimator.ofFloat(this, "scaleX", 0.8f, 1f).apply {
        duration = 250
        startDelay = 200
    }

    AnimatorSet().apply {
        playTogether(fadeIn, slideUp, scale)
        start()
    }
}

playTogether सभी एनिमेशन को समानांतर में शुरू करता है, लेकिन प्रत्येक का अपना startDelay होता है — यह स्टैगर प्रभाव पैदा करता है: fadeIn पहले शुरू होता है (0 ms), slideUp 100 ms के बाद, scale 200 ms के बाद। परिणामी टाइमलाइन: 0 — 100 — 200 — 600 ms। क्रमिक निष्पादन के लिए, playSequentially का उपयोग करें।