Timeline — asoslar, ilovalarda animatsiya vaqtini boshqarish

Timeline nima?

Timeline — animatsiyaning qachon boshlanishini, qancha davom etishini va vaqt o‘tishining animatsiya qilinadigan parametr o‘zgarishiga qanday aylantirilishini belgilaydigan animatsiya vaqt modeli. Har bir kadr qo‘lda o‘rnatiladigan kadrma-kadr (frame-by-frame) animatsiyadan farqli o‘laroq, timeline animatsiyasi parametrlar bilan tavsiflanadi: duration — umumiy davomiylik, startDelay — boshlashdan oldin kechikish, repeatCount — takrorlar soni va timingFunction — tezlik egri chizig‘i.

Vaqt shkalasi normallashtirilgan [0, 1] fazosida ishlaydi — local time yoki progress. Nol qiymati animatsiyaning boshlanishiga, bir — tugashiga mos keladi. Easing funksiyasi chiziqli local time ni haqiqiy animatsiya taraqqiyotiga aylantiradi. Agar repeatCount > 1 bo‘lsa, timeline davriy ravishda tiklanadi (RESTART) yoki teskari aylantiriladi (REVERSE). iOS da CAMediaTiming speed (ijro etish tezligi, >1 tezlashtiradi) va timeOffset (vaqt shkalasining siljishi) parametrlarini qo‘shadi. Android da Animator vaqt shkalasida to‘g‘ridan-to‘g‘ri joylashuvni boshqarish uchun setCurrentPlayTime() dan foydalanadi. Material Design ga ko‘ra, 100 ms dan qisqa animatsiyalar animatsiya sifatida qabul qilinmaydi, 500 ms dan uzoq bo‘lganlar esa — bezovta qila boshlaydi. Interfeys animatsiyalari uchun optimal davomiylik 200–350 ms.

iOS da Timeline: CAMediaTiming va CACurrentMediaTime

iOS da animatsiya vaqt shkalasini boshqarish CAAnimation va CALayer tomonidan amalga oshiriladigan CAMediaTiming protokoli orqali amalga oshiriladi. U quyidagi xususiyatlarni ta’minlaydi: duration (soniyalarda davomiylik), beginTime (ota timeline ga nisbatan boshlanish vaqti), repeatCount (takrorlar soni), repeatDuration (umumiy takrorlash davomiyligi), autoreverses (avtomatik teskari harakat), fillMode (animatsiyadan oldin/keyin xatti-harakat), speed (ijro etish tezligi) va timeOffset (shkalada siljish).

CACurrentMediaTime() — qurilmaning oxirgi qayta ishga tushirilishidan boshlab mutlaq vaqtni soniyalarda qaytaruvchi funksiya. Bir nechta animatsiyalarni sinxronlashtirish uchun asosiy vaqt belgisi sifatida ishlatiladi: aniq kechikish bilan animatsiyalar guruhini ishga tushirish uchun beginTime = CACurrentMediaTime() + offset ni o‘rnating. CAMediaTiming shuningdek timeline ierarxiyasini qo‘llab-quvvatlaydi — ota qatlam speed xususiyati orqali barcha bola animatsiyalarini tezlashtirishi/sekinlashtirishi mumkin. UIKit da UIViewPropertyAnimator (iOS 10+) duration, delay xususiyatlari va startAnimation/pauseAnimation/stopAnimation qayta chaqiruvlari orqali vaqt shkalasini abstraksiya qiladi. SwiftUI da Animation strukturasi animatsiya spetsifikatsiyasining bir qismi sifatida duration ni ta’minlaydi, ammo vaqt shkalasini to‘g‘ridan-to‘g‘ri boshqarish yashirin — shaxsiy timeline uchun o‘z scheduleri bilan TimelineView (iOS 15+) dan foydalaning.

Android da Timeline: Animator va duration

Android da vaqt shkalasini boshqarish Animator sinfi va uning vorislarida (ValueAnimator, ObjectAnimator) markazlashtirilgan. Timeline ning asosiy xususiyatlari: duration (millisoniyalarda davomiylik), startDelay (boshlashdan oldin kechikish), repeatCount (takrorlar soni), repeatMode (RESTART yoki REVERSE). setCurrentPlayTime(long) metodi vaqt shkalasida istalgan joyga o‘tish imkonini beradi.

ValueAnimator abstraksiya darajasini qo‘shadi: duration asosida 0 dan 1 gacha qiymatlar (normalized time) yaratadi va ularni TimeInterpolator ga uzatadi. AnimatorSet bir nechta Animator ni ketma-ket (playSequentially) yoki parallel (playTogether) bajarish bilan yagona vaqt shkalasida birlashtirish imkonini beradi. Jetpack Compose da vaqt shkalasi AnimationSpec orqali boshqariladi: tween (durationMillis, delayMillis, easing), spring (dampingRatio, stiffness) va keyframes (har bir segment uchun shaxsiy easing bilan vaqt shkalasidagi nuqtalar). Compose AnimatedContent transitionSpec uchun timeline dan foydalanadi — dasturchi kontentning vaqt siljishlari bilan qanday paydo bo‘lishi/yo‘qolishini tavsiflaydi. Android Performance ga ko‘ra, animatsiya vaqt shkalasi 60fps uchun 16 ms (vsync tsikli) ga karrali bo‘lishi kerak — noto‘g‘ri davomiylik ekran yangilanish tezligi bilan mos kelmaslik tufayli kadr tushishiga olib kelishi mumkin.

Animatsiyalarning vaqt bo‘yicha kompozitsiyasi

Vaqt shkalasi ayniqsa bir nechta animatsiyalarning kompozitsiyasida muhim bo‘ladi. Uchta asosiy naqsh: kaskad — animatsiyalar siljish bilan ketma-ket ishga tushiriladi (har bir keyingisi oldingisidan offset keyin boshlanadi), parallel — barcha animatsiyalar bir vaqtning o‘zida bir xil timeline bilan ishga tushiriladi va stagger — animatsiyalar ustma-ust tushish bilan ishga tushiriladi (ikkinchisi birinchisining tugashidan oldin boshlanadi).

iOS da kaskad har bir CAAnimation ning beginTime = oldingi beginTime + oldingi duration orqali amalga oshiriladi. Stagger uchun ichki animatsiyalarda turli beginTime bilan CAAnimationGroup ishlatiladi. Android da AnimatorSet playSequentially va playTogether ni qo‘llab-quvvatlaydi; stagger har bir Animator uchun startDelay o‘rnatish orqali yaratiladi. Compose da AnimatedVisibility enter/exitTransition bilan ro‘yxat elementlarining kaskad ko‘rinishi uchun staggerChildren variantida stagger dan foydalanadi. WWDC va Google I/O 2024 da ikkala platforma timeline vizualizatsiya vositalarini taqdim etdi: Xcode Animations Inspector va Android Studio Animations Timeline — ular real vaqtda haqiqiy vaqt shkalasini va tushirilgan kadrlarni ko‘rsatadi.

Kod misollari

iOS: CAMediaTiming bilan CABasicAnimation

Shaxsiy timeline bilan animatsiya misoli: 0.3 soniya kechikish, 0.6 soniya davomiylik, autoreverse va cheksiz takrorlash. CAMediaTiming barcha vaqt parametrlarini boshqaradi.

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 kechikish beradi. autoreverses = true animatsiyaning har bir tsikldan keyin teskari yo‘nalishda ketishiga sabab bo‘ladi. repeatCount = .infinity “nafas olish” effektining cheksiz tsiklini yaratadi. speed = 1.0 — normal tezlik; animatsiyani 2.0 qiymati bilan 2 marta tezlashtiring.

iOS: Shaxsiy vaqt shkalasi uchun TimelineView

SwiftUI TimelineView (iOS 15+) shaxsiy animatsiya uchun tizim timeline iga kirishni ta’minlaydi. Ko‘rinish scheduler ning har bir tigida yangilanadi.

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 bilan har 0.1 soniyada bir tik yaratadi. Yopilish kontekstida context.date — sinusoida fazasiga aylantiriladigan joriy vaqt. Doira o‘lchami 1 Hz chastotasi bilan pulsatsiyalanadi. TimelineView SwiftUI da Animation API siz o‘z vaqt shkalasi bilan animatsiya yaratishning yagona usuli.

Android: Shaxsiy timeline bilan ValueAnimator

To‘liq vaqt shkalasi boshqaruvi bilan ValueAnimator: kechikish, davomiylik, takrorlash. setCurrentPlayTime metodi vaqt shkalasida sakrash imkonini beradi.

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 — boshlashdan oldin kechikish. repeatMode = REVERSE animatsiyani boshlang‘ich qiymatga qaytaradi. animatedFraction repeatMode ni hisobga olgan holda 0 dan 1 gacha taraqqiyotni beradi. addUpdateListener har bir kadrda chaqiriladi (odatda 16 ms). To‘xtatish uchun pause() / resume() dan foydalaning.

Android: Timeline kompozitsiyasi uchun AnimatorSet

AnimatorSet bir nechta animatsiyadan murakkab vaqt shkalalarini yaratish imkonini beradi. Misolda — ustma-ust tushish bilan ketma-ket bajarish (stagger).

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 barcha animatsiyalarni parallel ishga tushiradi, lekin har birining o‘z startDelay i bor — bu stagger effektini yaratadi: fadeIn birinchi boshlanadi (0 ms), slideUp 100 ms keyin, scale 200 ms keyin. Natijaviy vaqt shkalasi: 0 — 100 — 200 — 600 ms. Ketma-ket bajarish uchun playSequentially dan foydalaning.