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 فراہم کرتی ہے، لیکن براہ راست ٹائم لائن کنٹرول پوشیدہ ہے — حسب ضرورت ٹائم لائن کے لیے حسب ضرورت شیڈیولر کے ساتھ 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 سائیکل) کا ضرب ہونی چاہیے — غلط مدت ڈسپلے ریفریش ریٹ سے مماثلت نہ ہونے کی وجہ سے فریم ڈراپ کا سبب بن سکتی ہے۔

وقت میں اینیمیشن کمپوزیشن

متعدد اینیمیشنز کو کمپوز کرتے وقت ٹائم لائن خاص طور پر اہم ہو جاتی ہے۔ تین بنیادی نمونے: جھرن (cascade) — اینیمیشنز آفسیٹ کے ساتھ ترتیب وار شروع ہوتی ہیں (ہر اگلی پچھلی سے آفسیٹ کے بعد شروع ہوتی ہے)، متوازی — تمام اینیمیشنز ایک ہی ٹائم لائن کے ساتھ بیک وقت شروع ہوتی ہیں، اور سٹیگر — اینیمیشنز اوورلیپ کے ساتھ شروع ہوتی ہیں (دوسری پہلی کے مکمل ہونے سے پہلے شروع ہوتی ہے)۔

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+) حسب ضرورت اینیمیشن کے لیے سسٹم ٹائم لائن تک رسائی فراہم کرتا ہے۔ ویو ہر شیڈیولر ٹک پر اپ ڈیٹ ہوتا ہے۔

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 شیڈیولر کے ساتھ ہر 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 استعمال کریں۔