Published on

SwiftUI-da animatsiya β€” yangi .animation(value:) usuli (iOS 16+)

Authors

Ko'pchilik oldingi animatsiya videosiga izoh qoldirib, .animation() modifier eski bo'lib qolganini (deprecated) yozdi. Bu videoda yangi usulni va nima uchun Apple buni o'zgartirganligi haqida gaplashamiz.

Muammo β€” eski .animation() nima uchun muammoli?

Eski usulda .animation() modifier view-dagi barcha o'zgarishlarga qo'llanadi β€” siz faqat bitta o'zgaruvchi uchun animatsiya istasangiz ham.

// ❌ Eski usul β€” deprecated (iOS 15+)
Rectangle()
    .frame(maxWidth: .infinity, alignment: animateOne ? .leading : .trailing)
    .animation(.spring)

Bu holda animateOne ham, animateTwo ham, view-dagi boshqa har qanday o'zgarish ham spring animatsiyasiga ega bo'ladi. Bu kutilmagan animatsiyalar va xatoliklarga olib keladi.

Yechim β€” yangi .animation(_:value:)

Yangi modifier faqat bitta o'zgaruvchi o'zgarganda animatsiya qiladi:

// βœ… Yangi usul
Rectangle()
    .frame(maxWidth: .infinity, alignment: animateOne ? .leading : .trailing)
    .animation(.spring, value: animateOne)

value: parametri β€” faqat shu o'zgaruvchi o'zgarganda animatsiya ishlaydi.

Amaliy misol β€” ikki xil animatsiya

Ikkita tugma, ikkita harakat, ikkita alohida animatsiya:

struct AnimationUpdatedBootcamp: View {

    @State private var animateOne: Bool = false
    @State private var animateTwo: Bool = false

    var body: some View {
        ZStack {
            Color.red.ignoresSafeArea()

            VStack(spacing: 40) {
                Button("Amal 1") {
                    animateOne.toggle()
                }

                Button("Amal 2") {
                    animateTwo.toggle()
                }
            }

            // Yashil kvadrat β€” chap/o'ng harakatlanadi
            Rectangle()
                .frame(width: 100, height: 100)
                .background(Color.green)
                .frame(maxWidth: .infinity, alignment: animateOne ? .leading : .trailing)
                .animation(.spring, value: animateOne)

            // To'q sariq kvadrat β€” yuqori/pastga harakatlanadi
            Rectangle()
                .frame(width: 100, height: 100)
                .background(Color.orange)
                .frame(maxHeight: .infinity, alignment: animateTwo ? .top : .bottom)
                .animation(.linear(duration: 5), value: animateTwo)
        }
    }
}

Natija:

  • Amal 1 bosilganda β€” faqat yashil kvadrat spring animatsiyasi bilan chapga/o'ngga siljiydi
  • Amal 2 bosilganda β€” faqat to'q sariq kvadrat 5 soniyalik chiziqli animatsiya bilan yuqoriga/pastga siljiydi
  • Ikki animatsiya bir-biriga ta'sir qilmaydi

Eski va yangi usul β€” taqqoslash

// ❌ Eski β€” barcha o'zgarishlarga ta'sir qiladi
.animation(.spring)

// βœ… Yangi β€” faqat belgilangan o'zgaruvchi o'zgarganda
.animation(.spring, value: animateOne)

Bir nechta animatsiyani birgalikda ishlatish

Rectangle()
    .frame(maxWidth: .infinity, alignment: animateOne ? .leading : .trailing)
    .frame(maxHeight: .infinity, alignment: animateTwo ? .top : .bottom)
    .animation(.spring, value: animateOne)          // animateOne uchun
    .animation(.linear(duration: 5), value: animateTwo)  // animateTwo uchun

Har bir value o'zining animatsiya timingiga ega.

withAnimation haqida

Rasmiy deprecated xabarida withAnimation ham muqobil sifatida ko'rsatilgan. Lekin u ham eski .animation()-ga o'xshash muammolarga ega:

// withAnimation β€” barcha bog'liq o'zgarishlarni animatsiya qiladi
withAnimation(.spring) {
    animateOne.toggle()
}

Tavsiya: .animation(_:value:) usulini qo'llang β€” bu eng aniq va boshqarish qulay usul. Faqat kerakli o'zgaruvchi uchun kerakli animatsiyani belgilaysiz.

Xulosa

Bu videoda o'rgandik:

  • Eski .animation() β€” deprecated (iOS 15+), barcha o'zgarishlarga ta'sir qiladi
  • Yangi .animation(_:value:) β€” faqat value o'zgarganda animatsiya ishlaydi
  • Bir nechta .animation() ketma-ket qo'llash mumkin β€” har biri o'z o'zgaruvchisi uchun
  • Aniqlik β€” kutilmagan animatsiyalar va xatoliklarni oldini oladi
  • Tavsiya: withAnimation o'rniga ham .animation(_:value:) ishlatish afzal

Rahmat tomosha qilganingiz uchun! Keyingi videoda ko'rishamiz!

Buy mea coffee