Published on

SwiftUI'da shaxsiy animatsiya o'tishlarini (Custom transitions) yaratish

Authors

Asosiy Transitions muammosi

SwiftUI o'z ichida juda ajoyib standart o'tish (transition) effektlariga ega: .transition(.move(edge: .leading)) yoki .transition(.scale). Lekin, agar vizual dizaynerlar sizdan "Aylanib yon tomondan tushuvchi va kattalashuvchi" murakkab o'tish animatsiyasini so'rashsa nima qilasiz?

Siz buning uchun shaxsiy AnyTransition effektini noldan yasashingiz kerak. Buni yaratish uchun biz avvalambor avvalgi darsdagi kabi oddiy ViewModifier yasab olamiz.

1. Animatsiya uchun ViewModifier yozish

Bizga ekranga kirib kelayotgan ob'ekt aylanib va chetdan surilib kelishi kerak bo'lsin. Buning uchun RotateViewModifier nomli strukturani yozamiz:

import SwiftUI

struct RotateViewModifier: ViewModifier {
    let rotation: Double

    func body(content: Content) -> some View {
        content
            .rotationEffect(Angle(degrees: rotation))
            // Agar rotation 0 ga teng bo'lmasa, uni ekrandan butunlay tashqariga surib qo'yamiz
            .offset(
                x: rotation != 0 ? UIScreen.main.bounds.width : 0,
                y: rotation != 0 ? UIScreen.main.bounds.height : 0
            )
    }
}

2. AnyTransition extension'ni qo'shish

Endi biz yaratgan ViewModifier ni transition sifatida o'qiydigan kod blokini yozishimiz kerak. Buning uchun AnyTransition ga o'zimizning kengaytmani (extension) kiritamiz.

Transition asosan ikkita holatdan iborat bo'ladi:

  1. Active (Aktiv): Element ekrandan tashqarida yoki o'chirilish jarayonidagi ko'rinishi.
  2. Identity (Asl holat): Element ekranning markazida paydo bo'lgan normal ko'rinishi.
extension AnyTransition {
    // 1-usul: Oddiy o'zgaruvchi bilan
    static var rotating: AnyTransition {
        modifier(
            active: RotateViewModifier(rotation: 180),
            identity: RotateViewModifier(rotation: 0)
        )
    }

    // 2-usul: Dasturchi o'zi parametr orqali burilish miqdorini bera oladigan qilib (Function)
    static func rotating(rotation: Double) -> AnyTransition {
        modifier(
            active: RotateViewModifier(rotation: rotation),
            identity: RotateViewModifier(rotation: 0)
        )
    }

    // 3-usul: Asimmetrik (Kirishda bir xil, chiqishda boshqacha)
    static var rotateOnMoveOff: AnyTransition {
        asymmetric(
            insertion: .rotating,
            removal: .move(edge: .leading)
        )
    }
}

E'tibor bergan bo'lsangiz, ichkarida .modifier deb to'g'ridan-to'g'ri qaytarib yuboryapmiz, chunki compiler qaysi classda (AnyTransition) ekanligimizni tushunib turibdi.

3. Amalda sinab ko'rish

Bo'ldi! Endi oddiy transition ishlatilgandek ishlatish mumkin.

struct AnyTransitionBootcamp: View {
    @State private var showRectangle: Bool = false

    var body: some View {
        VStack {
            Spacer()

            if showRectangle {
                RoundedRectangle(cornerRadius: 25)
                    .frame(width: 250, height: 350)
                    // O'zimiz yasagan transitionni ulaymiz!
                    .transition(.rotating(rotation: 1080)) // 1080 gradus aylanib tushadi
            }

            Spacer()

            Text("Tugmani bosing")
                .withDefaultButtonFormatting()
                .padding(.horizontal, 40)
                .onTapGesture {
                    withAnimation(.easeInOut(duration: 1.0)) {
                        showRectangle.toggle()
                    }
                }
        }
    }
}

Ana endi siz standart Apple transitionlariga qaram emassiz! Istalgancha o'z animatsiyalaringizni ViewModifier orqali yasab, ularni ajoyib transitionga aylantirishingiz mumkin.

Buy mea coffee