Published on

SwiftUI-da animatsiyalar

Authors

Hammaga xush kelibsiz! Mening ismim Nick, bu β€” Swiftful Thinking kanali.

Oldingi videolarda @State, shartli operatorlar va ternary operatorlarni o'rgandik. Endi shu bilimlarni birlashtirgan holda animatsiyalar yaratamiz.

Animatsiyalar ilovangizga faqat bir necha qator kod bilan professional ko'rinish beradi. Rang, o'lcham, pozitsiya, aylanish β€” bularning hammasini animatsiya qilish mumkin.

Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni AnimationBootcamp deb nomlang va Create tugmasini bosing. Canvas-da Resume bosing.

Boshlang'ich ko'rinish

struct AnimationBootcamp: View {

    @State var isAnimated: Bool = false

    var body: some View {
        VStack {
            Button("Tugma") {
                isAnimated.toggle()
            }

            Spacer()

            RoundedRectangle(cornerRadius: 25)
                .fill(isAnimated ? Color.red : Color.green)
                .frame(width: 300, height: 300)

            Spacer()
        }
    }
}

Tugma bosilganda rang o'zgaradi, lekin hozircha darhol o'zgaradi β€” animatsiyasiz.

withAnimation β€” animatsiya qo'shish

isAnimated.toggle() o'rniga withAnimation ichida toggle qilsak, o'zgaruvchiga bog'liq barcha o'zgarishlar animatsiya bilan sodir bo'ladi:

Button("Tugma") {
    withAnimation(.default) {
        isAnimated.toggle()
    }
}

Endi rang o'zgarganda silliq o'tish (fade) ko'rinadi.

Bir nechta modifier-ni animatsiya qilish

withAnimation ishga tushganda isAnimated-ga bog'liq barcha modifier-lar animatsiya bilan o'zgaradi. Burchak radiusi, o'lcham va siljishni ham qo'shamiz:

struct AnimationBootcamp: View {

    @State var isAnimated: Bool = false

    var body: some View {
        VStack {
            Button("Tugma") {
                withAnimation(.default) {
                    isAnimated.toggle()
                }
            }

            Spacer()

            RoundedRectangle(cornerRadius: isAnimated ? 50 : 25)
                .fill(isAnimated ? Color.red : Color.green)
                .frame(
                    width: isAnimated ? 100 : 300,
                    height: isAnimated ? 100 : 300
                )
                .offset(y: isAnimated ? 300 : 0)

            Spacer()
        }
    }
}

Eslatma: cornerRadius: 50 va frame: 100x100 kombinatsiyasi to'liq doira hosil qiladi β€” chunki radius o'lchamning yarmi.

Aylanish animatsiyasi β€” .rotationEffect()

.rotationEffect() modifier-ini .offset()-dan oldin qo'shish kerak. Aks holda siljish ham aylanadi va element ekrandan chiqib ketishi mumkin:

RoundedRectangle(cornerRadius: isAnimated ? 50 : 25)
    .fill(isAnimated ? Color.red : Color.green)
    .rotationEffect(Angle(degrees: isAnimated ? 360 : 0))
    .frame(
        width: isAnimated ? 100 : 300,
        height: isAnimated ? 100 : 300
    )
    .offset(y: isAnimated ? 300 : 0)

Endi element aylanib pastga tushadi β€” yashil to'rtburchakdan qizil doiraga.

Animatsiyani sozlash

.delay() β€” kechiktirish

Animatsiyani belgilangan soniyaga kechiktiradi:

withAnimation(Animation.default.delay(2)) {
    isAnimated.toggle()
}

.repeatCount() β€” takrorlash soni

withAnimation(
    Animation
        .default
        .repeatCount(5, autoreverses: true)
) {
    isAnimated.toggle()
}
  • autoreverses: true β€” oldinga va orqaga animatsiya qiladi (har bir yo'nalish bitta hisoblanadi)
  • autoreverses: false β€” faqat oldinga, keyin darhol qaytib oldingi holatga sakraydi

.repeatForever() β€” cheksiz takrorlash

Foydalanuvchi ekranda bo'lguncha animatsiya to'xtovsiz davom etadi:

withAnimation(
    Animation
        .default
        .repeatForever(autoreverses: true)
) {
    isAnimated.toggle()
}

Ikkinchi usul: .animation() modifier

withAnimation o'rniga animatsiyani to'g'ridan-to'g'ri elementga .animation() modifier sifatida ham qo'shish mumkin:

RoundedRectangle(cornerRadius: isAnimated ? 50 : 25)
    .fill(isAnimated ? Color.red : Color.green)
    .rotationEffect(Angle(degrees: isAnimated ? 360 : 0))
    .frame(
        width: isAnimated ? 100 : 300,
        height: isAnimated ? 100 : 300
    )
    .offset(y: isAnimated ? 300 : 0)
    .animation(
        Animation
            .default
            .repeatForever(autoreverses: true),
        value: isAnimated
    )

Bu holda withAnimation kerak emas β€” tugma oddiy toggle() ishlatadi:

Button("Tugma") {
    isAnimated.toggle()
}

withAnimation va .animation() β€” qaysi birini ishlatish kerak?

withAnimation.animation() modifier
Animatsiya sababiTugma yoki voqeaO'zgaruvchi qiymati
Ta'sir doirasiBarcha bog'liq elementlarFaqat shu element
Tavsiyaβœ… Ko'p holatlarda afzalFaqat bitta elementga kerak bo'lsa

Tavsiya: aksariyat holatlarda withAnimation ishlatish qulay. .animation() modifier element har qanday o'zgarganda β€” tugmadan tashqari ham β€” animatsiya qiladi, bu ba'zida kutilmagan natija berishi mumkin.

To'liq kod

struct AnimationBootcamp: View {

    @State var isAnimated: Bool = false

    var body: some View {
        VStack {
            Button("Animatsiya") {
                withAnimation(
                    Animation
                        .default
                        .repeatCount(5, autoreverses: true)
                ) {
                    isAnimated.toggle()
                }
            }

            Spacer()

            RoundedRectangle(cornerRadius: isAnimated ? 50 : 25)
                .fill(isAnimated ? Color.red : Color.green)
                .rotationEffect(Angle(degrees: isAnimated ? 360 : 0))
                .frame(
                    width: isAnimated ? 100 : 300,
                    height: isAnimated ? 100 : 300
                )
                .offset(y: isAnimated ? 300 : 0)

            Spacer()
        }
    }
}

Xulosa

Bu videoda o'rgandik:

  • withAnimation β€” o'zgaruvchi toggle qilinganda bog'liq barcha elementlarni animatsiya qiladi
  • .animation() modifier β€” faqat bitta elementga animatsiya qo'shadi
  • .delay() β€” animatsiyani kechiktiradi
  • .repeatCount() β€” animatsiyani belgilangan marta takrorlaydi
  • .repeatForever() β€” animatsiyani cheksiz takrorlaydi
  • autoreverses β€” animatsiya orqaga qaytsinmi yoki darhol reset bo'lsinmi
  • Modifier-lar tartibi muhim β€” .rotationEffect() .offset()-dan oldin kelishi kerak

Keyingi videoda animatsiya tezliklari va turlarini (easeIn, easeOut, spring va boshqalar) o'rganamiz!

Rahmat tomosha qilganingiz uchun! Men β€” Nick, bu Swiftful Thinking. Keyingi videoda ko'rishamiz!

Buy mea coffee