Timeline — əsaslar, tətbiqlərdə animasiya vaxtının idarə edilməsi

Timeline nədir?

Timeline — animasiyanın nə vaxt başladığını, nə qədər davam etdiyini və vaxtın gedişatının animasiya olunan parametrin dəyişməsinə necə çevrildiyini müəyyən edən animasiya vaxt modelidir. Hər kadrın əl ilə təyin olunduğu kadr-kadr (frame-by-frame) animasiyadan fərqli olaraq, timeline animasiyası parametrlərlə təsvir olunur: duration — ümumi müddət, startDelay — başlamadan əvvəl gecikmə, repeatCount — təkrar sayı və timingFunction — sürət əyrisi.

Vaxt şkalası normallaşdırılmış [0, 1] fəzasında işləyir — local time və ya progress. Sıfır dəyəri animasiyanın başlanğıcına, bir isə sona uyğun gəlir. Easing funksiyası xətti local time-ı faktiki animasiya irəliləyişinə çevirir. repeatCount > 1 olarsa, timeline dövri olaraq sıfırlanır (RESTART) və ya tərsinə çevrilir (REVERSE). iOS-da CAMediaTiming speed (oxutma sürəti, >1 sürətləndirir) və timeOffset (vaxt şkalasının yerdəyişməsi) parametrlərini əlavə edir. Android-də Animator vaxt şkalasında birbaşa mövqe idarəsi üçün setCurrentPlayTime() istifadə edir. Material Design-a görə, 100 ms-dən qısa animasiyalar animasiya kimi qəbul edilmir, 500 ms-dən uzun olanlar isə qıcıqlandırmağa başlayır. İnterfeys animasiyaları üçün optimal müddət 200–350 ms-dir.

iOS-da Timeline: CAMediaTiming və CACurrentMediaTime

iOS-da animasiya vaxt şkalasının idarəsi CAAnimation və CALayer tərəfindən həyata keçirilən CAMediaTiming protokolu vasitəsilə həyata keçirilir. O, aşağıdakı xüsusiyyətləri təmin edir: duration (saniyələrdə müddət), beginTime (valideyn timeline-ına nisbətən başlama vaxtı), repeatCount (təkrar sayı), repeatDuration (ümumi təkrar müddəti), autoreverses (avtomatik tərs hərəkət), fillMode (animasiyadan əvvəl/sonra davranış), speed (oxutma sürəti) və timeOffset (şkalada yerdəyişmə).

CACurrentMediaTime() — cihazın son yenidən başladılmasından etibarən mütləq vaxtı saniyələrdə qaytaran funksiya. Bir neçə animasiyanın sinxronizasiyası üçün əsas vaxt nişanı kimi istifadə olunur: dəqiq gecikmə ilə animasiya qrupunu işə salmaq üçün beginTime = CACurrentMediaTime() + offset təyin edin. CAMediaTiming həmçinin timeline iyerarxiyasını dəstəkləyir — valideyn təbəqəsi speed xüsusiyyəti vasitəsilə bütün uşaq animasiyalarını sürətləndirə/yavaşlada bilər. UIKit-də UIViewPropertyAnimator (iOS 10+) duration, delay xüsusiyyətləri və startAnimation/pauseAnimation/stopAnimation geri çağırışları vasitəsilə vaxt şkalasını abstraksiya edir. SwiftUI-də Animation strukturu animasiya spesifikasiyasının bir hissəsi kimi duration təmin edir, lakin vaxt şkalasının birbaşa idarəsi gizlidir — fərdi timeline üçün öz scheduler ilə TimelineView (iOS 15+) istifadə edin.

Android-də Timeline: Animator və duration

Android-də vaxt şkalasının idarəsi Animator sinfi və onun varislərində (ValueAnimator, ObjectAnimator) mərkəzləşdirilmişdir. Əsas timeline xüsusiyyətləri: duration (millisaniyələrdə müddət), startDelay (başlamadan əvvəl gecikmə), repeatCount (təkrar sayı), repeatMode (RESTART və ya REVERSE). setCurrentPlayTime(long) metodu vaxt şkalasında ixtiyari mövqeyə keçməyə imkan verir.

ValueAnimator abstraksiya səviyyəsi əlavə edir: duration əsasında 0-dan 1-ə qədər dəyərlər (normalized time) yaradır və onları TimeInterpolator-a ötürür. AnimatorSet bir neçə Animator-u ardıcıl (playSequentially) və ya paralel (playTogether) icra ilə vahid vaxt şkalasında birləşdirməyə imkan verir. Jetpack Compose-da vaxt şkalası AnimationSpec vasitəsilə idarə olunur: tween (durationMillis, delayMillis, easing), spring (dampingRatio, stiffness) və keyframes (hər seqment üçün fərdi easing ilə vaxt şkalasında nöqtələr). Compose AnimatedContent transitionSpec üçün timeline istifadə edir — proqramçı məzmunun vaxt yerdəyişmələri ilə necə göründüyünü/yox olduğunu təsvir edir. Android Performance-a görə, animasiya vaxt şkalası 60fps üçün 16 ms (vsync dövrü)-nin qatı olmalıdır — səhv müddət ekran yenilənmə tezliyi ilə uyğunsuzluq səbəbindən kadr atlamalarına səbəb ola bilər.

Animasiyaların zamanda kompozisiyası

Vaxt şkalası xüsusilə bir neçə animasiyanın kompozisiyası zamanı vacib olur. Üç əsas nümunə: kaskad — animasiyalar yerdəyişmə ilə ardıcıl işə salınır (hər növbəti əvvəlkindən offset sonra başlayır), paralel — bütün animasiyalar eyni vaxtda eyni timeline ilə işə salınır və stagger — animasiyalar üst-üstə düşməklə işə salınır (ikincisi birincinin bitməsindən əvvəl başlayır).

iOS-da kaskad hər CAAnimation-un beginTime = əvvəlki beginTime + əvvəlki duration vasitəsilə həyata keçirilir. Stagger üçün iç-içə animasiyalarda müxtəlif beginTime ilə CAAnimationGroup istifadə olunur. Android-də AnimatorSet playSequentially və playTogether-ı dəstəkləyir; stagger hər Animator üçün startDelay təyin etməklə yaradılır. Compose-da AnimatedVisibility enter/exitTransition ilə siyahı elementlərinin kaskad görünməsi üçün staggerChildren variantında stagger istifadə edir. WWDC və Google I/O 2024-də hər iki platforma timeline vizuallaşdırma alətləri təqdim etdi: Xcode Animations Inspector və Android Studio Animations Timeline — onlar real vaxtda faktiki vaxt şkalasını və atılmış kadrları göstərir.

Kod nümunələri

iOS: CAMediaTiming ilə CABasicAnimation

Fərdi timeline ilə animasiya nümunəsi: 0.3 saniyə gecikmə, 0.6 saniyə müddət, autoreverse və sonsuz təkrar. CAMediaTiming bütün vaxt parametrlərini idarə edir.

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 gecikmə verir. autoreverses = true animasiyanın hər dövrdən sonra əks istiqamətdə getməsinə səbəb olur. repeatCount = .infinity “nəfəs alma” effektinin sonsuz dövrünü yaradır. speed = 1.0 — normal sürət; animasiyanı 2.0 dəyəri ilə 2 dəfə sürətləndirin.

iOS: Fərdi vaxt şkalası üçün TimelineView

SwiftUI TimelineView (iOS 15+) fərdi animasiya üçün sistem timeline-ına giriş təmin edir. Görünüş scheduler-in hər tikində yenilənir.

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 ilə hər 0.1 saniyədən bir tik yaradır. Bağlanma kontekstində context.date — sinusoida fazasına çevrilən cari vaxtdır. Dairənin ölçüsü 1 Hz tezliyi ilə pulsasiya edir. TimelineView SwiftUI-də Animation API olmadan öz vaxt şkalası ilə animasiya yaratmağın yeganə yoludur.

Android: Fərdi timeline ilə ValueAnimator

Tam vaxt şkalası idarəsi ilə ValueAnimator: gecikmə, müddət, təkrar. setCurrentPlayTime metodu vaxt şkalasında atlamaya imkan verir.

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 — başlamadan əvvəl gecikmə. repeatMode = REVERSE animasiyanı ilkin dəyərə qaytarır. animatedFraction repeatMode nəzərə alınmaqla 0-dan 1-ə qədər irəliləyiş verir. addUpdateListener hər kadrda çağırılır (adətən 16 ms). Dayandırmaq üçün pause() / resume() istifadə edin.

Android: Timeline kompozisiyası üçün AnimatorSet

AnimatorSet bir neçə animasiyadan mürəkkəb vaxt şkalaları yaratmağa imkan verir. Nümunədə — üst-üstə düşmə ilə ardıcıl icra (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 bütün animasiyaları paralel işə salır, lakin hər birinin öz startDelay-i var — bu stagger effekti yaradır: fadeIn birinci başlayır (0 ms), slideUp 100 ms sonra, scale 200 ms sonra. Nəticə vaxt şkalası: 0 — 100 — 200 — 600 ms. Ardıcıl icra üçün playSequentially istifadə edin.