SwiftUI-da Transition-lardan qanday foydalanish kerak

Bu videoda biz Transition — ya'ni o'tish animatsiyalari haqida gaplashamiz. Transition-lar odatiy animatsiyalarga o'xshaydi, lekin ular orasida muhim farq bor.

Transition vs Animation — asosiy farq

Animatsiya — ekranda allaqachon mavjud bo'lgan ob'ektni o'zgartiradi: rangi, o'lchami, joylashuvi
Transition — ob'ekt ekranga qo'shilayotganda yoki ekrandan olib tashlanayotganda ishlaydi

Transition ishlashi uchun ob'ekt if sharti orqali view hierarchy-ga qo'shilishi yoki undan chiqarilishi kerak. Biz allaqachon shartli mantiqni o'rganganmiz, shuning uchun transition-larni to'liq o'zlashtirishga tayyormiz.

Boshlang'ich sozlama

Yangi fayl yarating va TransitionBootcamp deb nomlang. Avval oddiy animatsiya bilan boshlaymiz — transition bilan farqini ko'rish uchun:

struct TransitionBootcamp: View {

    @State var showView: Bool = false

    var body: some View {
        ZStack(alignment: .bottom) {
            VStack {
                Button("Tugma") {
                    showView.toggle()
                }
                Spacer()
            }

            // Oddiy animatsiya — opacity bilan
            // Rounded rectangle view hierarchy-da doim bor, faqat ko'rinmaydi
            RoundedRectangle(cornerRadius: 30)
                .frame(height: UIScreen.main.bounds.height * 0.5)
                .opacity(showView ? 1.0 : 0.0)
                .animation(.easeInOut)
        }
        .edgesIgnoringSafeArea(.bottom)
    }
}

Bu yerda RoundedRectangle doim view hierarchy-da mavjud — faqat ko'rinmaydi. Bu oddiy animatsiya. Transition esa farqli ishlaydi.

Transition — if statement bilan

Transition ishlashi uchun ob'ekt if sharti orqali view-ga qo'shilishi yoki undan olib tashlanishi kerak:

struct TransitionBootcamp: View {

    @State var showView: Bool = false

    var body: some View {
        ZStack(alignment: .bottom) {
            VStack {
                Button("Tugma") {
                    withAnimation(.easeInOut) {
                        showView.toggle()
                    }
                }
                Spacer()
            }

            // Transition — if bilan, ob'ekt hierarchy-ga qo'shiladi/olib tashlanadi
            if showView {
                RoundedRectangle(cornerRadius: 30)
                    .frame(height: UIScreen.main.bounds.height * 0.5)
                    .transition(.slide)
            }
        }
        .edgesIgnoringSafeArea(.bottom)
    }
}

Tugma bosilganda RoundedRectangle view hierarchy-ga qo'shiladi va .slide transition bilan chapdan kirib keladi. Qayta bosilganda o'ngga chiqib ketadi.

Transition turlari

1. slide — chapdan kiradi, o'ngga chiqadi

RoundedRectangle(cornerRadius: 30)
    .frame(height: UIScreen.main.bounds.height * 0.5)
    .transition(.slide)

2. move — qaysi tomondan kelishini belgilash mumkin

// Pastdan chiqadi — ilovalarda eng ko'p ishlatiladigan transition
RoundedRectangle(cornerRadius: 30)
    .frame(height: UIScreen.main.bounds.height * 0.5)
    .transition(.move(edge: .bottom))

// Yuqoridan — lekin bu yerda rectangle yuqorisi ekran markazida,
// shuning uchun yaxshi ko'rinmaydi
.transition(.move(edge: .top))

// Chapdan
.transition(.move(edge: .leading))

// O'ngdan
.transition(.move(edge: .trailing))

Pastdan chiqadigan transition ilovalarda juda keng tarqalgan — ko'plab variant ro'yxatlari, onboarding sahifalari yoki qo'shimcha ma'lumot panellari shu usulda amalga oshiriladi.

.spring() animatsiyasi bu transition bilan juda chiroyli ko'rinadi:

withAnimation(.spring()) {
    showView.toggle()
}

3. opacity — asta-sekin paydo bo'ladi va yo'qoladi

Opacity transition biroz o'ziga xos — to'g'ri ishlashi uchun animatsiyani to'g'ridan-to'g'ri transition-ga qo'shish kerak:

if showView {
    RoundedRectangle(cornerRadius: 30)
        .frame(height: UIScreen.main.bounds.height * 0.5)
        .transition(
            AnyTransition.opacity
                .animation(.easeInOut)
        )
    // Eslatma: bu holda withAnimation bloki kerak emas
}

4. scale — kichrayib yo'qoladi, kattalashib paydo bo'ladi

if showView {
    RoundedRectangle(cornerRadius: 30)
        .frame(height: UIScreen.main.bounds.height * 0.5)
        .transition(
            AnyTransition.scale
                .animation(.easeInOut)
        )
}

Asymmetric transition — kirish va chiqish alohida

Ob'ekt ekranga kirganida va ekrandan chiqqanida turli transition ishlatish mumkin:

if showView {
    RoundedRectangle(cornerRadius: 30)
        .frame(height: UIScreen.main.bounds.height * 0.5)
        .transition(
            .asymmetric(
                insertion: .move(edge: .leading),  // chapdan kiradi
                removal: .move(edge: .bottom)       // pastga chiqadi
            )
        )
}

Yana bir kombinatsiya — pastdan kiradi, opacity bilan yo'qoladi:

.transition(
    .asymmetric(
        insertion: .move(edge: .bottom),
        removal: AnyTransition.opacity.animation(.easeInOut)
    )
)

To'liq misol — hammasi birgalikda

struct TransitionBootcamp: View {

    @State var showView: Bool = false

    var body: some View {
        ZStack(alignment: .bottom) {

            VStack {
                Button("Tugma") {
                    withAnimation(.easeInOut) {
                        showView.toggle()
                    }
                }
                Spacer()
            }

            if showView {
                RoundedRectangle(cornerRadius: 30)
                    .frame(height: UIScreen.main.bounds.height * 0.5)
                    .transition(
                        .asymmetric(
                            insertion: .move(edge: .bottom),
                            removal: AnyTransition.opacity.animation(.easeInOut)
                        )
                    )
            }
        }
        .edgesIgnoringSafeArea(.bottom)
    }
}

Qachon animatsiya, qachon transition?

Holat	Ishlatish kerak
Ob'ekt ekranda bor, faqat ko'rinishi o'zgaradi	Animatsiya
Ob'ekt ekranga qo'shilayapti yoki o'chirilayapti	Transition

Transition-lar ilovalarda ko'p ishlatiladi, lekin ko'plab dasturchilar ularni e'tiborsiz qoldiradi — chunki if sharti bilan ishlash talab etiladi. Ammo bu videodagi misollardan ko'ringanidek, ular juda kuchli va ilovalarga professional ko'rinish beradi.