Published on

SwiftUI Advanced: TimelineView orqali murakkab animatsiyalar yaratish

Authors

TimelineView nima uchun kerak?

Odatda biz SwiftUI'da animatsiya qilish uchun @State var animate = false deb o'zgaruvchi ochamiz va uni toggle() qilamiz. Bu oddiy animatsiyalar uchun juda yaxshi. Ammo, animatsiyamiz bir necha qismdan iborat bo'lsa-chi? (Masalan, 1-sekundda boshqa ish qilsin, 3-sekundda boshqa, 10-sekundda esa tamoman boshqacha). Bunday paytda 10 ta @State ochib o'tirish kodingizni chalkashtirib yuboradi.

Aynan shu muammoni hal qilish uchun TimelineView ishlatiladi. U sizning kodingizni vaqtga (sekund yoki millisekundga) bog'lab, avtomatik yangilab turadi.

1. Oddiy TimelineView

import SwiftUI

struct TimelineViewBootcamp: View {
    var body: some View {
        // .animation — imkon qadar tez (millisekundlarda) yangilanadi
        TimelineView(.animation) { context in
            VStack {
                Text("Hozirgi vaqt:")
                // context.date har safar yangilanib turadi
                Text("\(context.date)")
            }
        }
    }
}

2. Vaqtga asoslangan animatsiya

Keling, to'rtburchakning uzunligi sekundlarga qarab o'zgarishini ko'ramiz.

struct TimelineViewBootcamp: View {
    var body: some View {
        TimelineView(.animation) { context in
            // Hozirgi vaqtdan faqat sekundni ajratib olamiz
            let seconds = Calendar.current.component(.second, from: context.date)

            VStack {
                Text("\(seconds)")

                Rectangle()
                    .frame(
                        width: seconds < 10 ? 50 : (seconds < 30 ? 200 : 400),
                        height: 100
                    )
                    .animation(.bouncy, value: seconds)
            }
        }
    }
}

Bu kodda agar joriy vaqt sekundlari 10 dan kichik bo'lsa uzunlik 50, 30 dan kichik bo'lsa 200, undan o'tsa 400 bo'ladi va bu jarayon har minutda silliq takrorlanib turadi!

3. Ilova ishlashni boshlagan vaqtdan hisoblash

Odatda real soat emas, ekran ochilgandan keyin qancha sekund o'tgani biz uchun muhimroq.

struct TimelineViewBootcamp: View {
    @State private var startTime: Date = Date()

    var body: some View {
        // Har 1 sekundda yangilanishini aytamiz (keraksiz yuklanish bo'lmasligi uchun)
        TimelineView(.periodic(from: startTime, by: 1.0)) { context in

            // Ekran ochilgandan beri necha sekund o'tdi?
            let secondsSinceStart = context.date.timeIntervalSince(startTime)

            VStack {
                Text("O'tgan vaqt: \(Int(secondsSinceStart)) s")

                Rectangle()
                    .frame(
                        width: secondsSinceStart < 5 ? 50 : 300,
                        height: 100
                    )
                    .animation(.spring(), value: secondsSinceStart)
            }
        }
    }
}

Xulosa

TimelineView — vaqtga bog'liq, bir necha qadamli yoki doimiy takrorlanuvchi animatsiyalar qilish uchun eng zo'r vosita. Oddiy xolatlar uchun @State ishlatishda davom eting, lekin qachonki kodingiz "2 sekunddan keyin uni qil, 5 sekunddan keyin buni qil" degan logikaga to'lib ketsa, TimelineView dan foydalanish vaqti kelganini biling.

Buy mea coffee