Published on

SwiftUI-da Transition-lardan qanday foydalanish kerak

Authors

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?

HolatIshlatish kerak
Ob'ekt ekranda bor, faqat ko'rinishi o'zgaradiAnimatsiya
Ob'ekt ekranga qo'shilayapti yoki o'chirilayaptiTransition

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.

Rahmat, men Nick, bu Swiftful Thinking va keyingi videoda ko'rishguncha!

Buy mea coffee