- Published on
Yashirin animatsiyalar β .animation() modifikatori
- Authors
- Name
- ShoxruxC
- @iOSdasturchi
SwiftUI-da animatsiyalar oddiy g'oyadan boshlanadi: ko'rinishingiz ikki holatda qanday ko'rinishini tasvirlang β SwiftUI oraliq kadrlarni avtomatik ravishda silliq to'ldiradi. Bu jarayonni amalga oshiradigan modifikator .animation() bo'lib, u butun animatsiya tizimiga kirish uchun eng qulay yo'ldir.
Bu oddiy yoqish/o'chirish kaliti o'rniga, kuchaytirish regulyatoriga (dimmer switch) o'xshaydi. Animatsiyasiz viewlar holatlar orasida tez o'tadi. .animation() qo'shilganda esa o'zgarish asta-sekin sodir bo'ladi β SwiftUI oraliq qiymatlarni hisoblash ishini o'zi bajaradi.
Muhim nuqta: .animation() ma'lum bir qiymatning o'zgarishini kuzatadi. O'sha qiymat o'zgarganda, viewdagi barcha animatsiya qilinishi mumkin bo'lgan xususiyatlar yangi holatga animatsiya orqali o'tadi. Siz harakatni qo'lda tasvirlamaysiz β shunchaki "bu qiymat o'zgarganda, animatsiya qil" deysiz.
| Qator | Vazifasi |
|---|---|
@State private var isKatta = false | Doira katta yoki kichikligini boshqaruvchi boolean. Bu o'zgarganda SwiftUI ko'rinishni qayta chizadi. |
.frame(width: isKatta ? 200 : 80, ...) | Doiraning o'lchami isKatta ning joriy qiymatiga qarab belgilanadi. Ternary operator ikki o'lchamdan birini tanlaydi. |
.foregroundStyle(isKatta ? .red : .blue) | Rang uchun ham xuddi shunday pattern. Ikkalasi ham "animatsiya qilinishi mumkin" β SwiftUI ular orasida qanday o'tishni biladi. |
.animation(.easeInOut(duration: 0.4), value: isKatta) | Asosiy qator. SwiftUI-ga: "isKatta o'zgarganda, bu viewdagi barcha animatsiya qilinishi mumkin bo'lgan o'zgarishlarni 0.4 soniya davomida ease-in-out egri chizig'i bilan animatsiya qil" deydi. |
isKatta.toggle() | Boolean ni false dan true ga (yoki aksincha) o'zgartiradi. Bu holat o'zgarishi animatsiyani ishga tushiradi. |
value:parametri majburiy. Eski SwiftUI kodidavalue:argumentisiz.animation(.easeInOut)ni ko'rishingiz mumkin. U hali ham kompilyatsiya bo'ladi, lekin eskirgan usul bo'lib, ko'rinishingizning boshqa joylarida kutilmagan animatsiyalarga sabab bo'lishi mumkin. Animatsiyani nima ishga tushirishini aniq belgilash uchun har doimvalue:ni uzating.
Animatsiya qilinishi mumkin bo'lgan xususiyatlar
SwiftUI-dagi har qanday xususiyat ham animatsiya qilinishi mumkin emas. O'lcham, o'rin, shaffoflik, rang, aylantirish, masshtab kabi uzluksiz qiymatlarni ifodalovchi xususiyatlar animatsiya qilinishi mumkin β chunki SwiftUI boshlang'ich va tugash orasidagi oraliq qiymatlarni hisoblΠ°ΠΉ oladi. Boolean o'zining o'zi animatsiya qilinmaydi, lekin unga bog'liq vizual xususiyatlar animatsiya qilinadi.
.opacity() β ko'rinishni xiralashtirish yoki ko'rsatish
Text("Salom")
// 1.0 to'liq ko'rinadi, 0.0 ko'rinmaydi
.opacity(korinmoqda ? 1.0 : 0.0)
.animation(.easeOut(duration: 0.3), value: korinmoqda)
Shaffoflik 0 (ko'rinmaydi) dan 1 (to'liq ko'rinadi) gacha. SwiftUI oraliq har qanday kasr qiymatni silliq hisoblaydi, shuning uchun xiralashtirish effektlari .animation() uchun tabiiy tanlov.
.scaleEffect() β ko'rinishni kattalashtirish yoki kichiklashtirish
Image(systemName: "heart.fill")
.foregroundStyle(.red)
// 1.0 tabiiy o'lcham, 1.5 esa 50% kattaroq
.scaleEffect(yoqilganmi ? 1.5 : 1.0)
.animation(.spring(duration: 0.3), value: yoqilganmi)
1.0 qiymati ko'rinishning tabiiy o'lchami. 1.0 dan yuqori qo'yilsa kattalashtiradi, 1.0 dan past bo'lsa kichiklashtiradi. "Like" tugmasi animatsiyalarining aksariyati shu tarzda qurilgan.
.rotationEffect() β ko'rinishni aylantirish
Image(systemName: "chevron.right")
// Ko'rilganda 90 daraja aylantirish
.rotationEffect(.degrees(ochiqmi ? 90 : 0))
.animation(.easeInOut(duration: 0.25), value: ochiqmi)
Klassik foydalanish: bo'lim kengayganda aylanadigan chevron o'qi. .degrees() Double qabul qiladi va SwiftUI qiymatlar orasidagi aylanishni silliq animatsiya qiladi.
.offset() β ko'rinishni siljitish
Rectangle()
.frame(width: 100, height: 100)
// Faol bo'lganda 200 nuqta o'ngga siljitish
.offset(x: faolmi ? 200 : 0)
.animation(.easeInOut, value: faolmi)
Offset ko'rinishning renderlanish o'rnini maketga ta'sir qilmasdan siljitadi. Menyu tortilib chiqishi yoki bildirishnoma banneri kabi narsalarni ko'rinish maydonidan chiqarish va ichiga kiritish uchun foydali.
Tezkor ma'lumotnoma
| Sintaksis | Vazifasi |
|---|---|
.animation(.easeInOut, value: x) | Sekin kiradi, sekin chiqadi β eng tabiiy his beruvchi standart |
.animation(.easeIn, value: x) | Sekin boshlanadi, to'liq tezlikda tugaydi β chiqishlar uchun qulay |
.animation(.easeOut, value: x) | Tez boshlanadi, sekinlashadi β kirish uchun qulay |
.animation(.linear, value: x) | Boshidan oxirigacha doimiy tezlik β mexanik his |
.animation(.spring(), value: x) | Prujina kabi β ortiqcha o'tib qaytadi, ushlab oladi |
.animation(.spring(duration: 0.4), value: x) | Nazorat qilinadigan davomiylik bilan prujina |
π― Topshiriq: uch xususiyatni birga animatsiya qilish
.animation() dan foydalanib, uchta xil xususiyatni bir vaqtda animatsiya qiladigan ko'rinish yarating: bittasi o'lcham o'zgarishi (scaleEffect yoki frame), bittasi rang o'zgarishi (foregroundStyle yoki background), bittasi aylantirish yoki siljish. Ularni boshqarish uchun yagona @State boolean ishlating. Animatsiyalarning hammasi uchun bir xil value: parametrini uzating. Har bir xususiyatga alohida .animation() qo'yish shart emas β bitta .animation() uni qo'ygan xususiyatlargacha bo'lgan barcha animatsiya qilinishi mumkin bo'lgan xususiyatlarga ta'sir qiladi.