Published on

Ko'rinish o'tishlari — .transition()

Authors

Hozirgacha yaratgan animatsiyalaringizning barchasi har doim mavjud bo'lgan viewdagi xususiyatlarni o'zgartirish haqida edi. Lekin ko'rinish ekranda paydo bo'lganda yoki yo'q bo'lganda nima bo'ladi? Masalan, xato banneri — u if bayonoti yordamida shartli ko'rsatiladi. U paydo bo'lganda siljib kirishi va yo'q bo'lganda siljib chiqishi kerak. Aynan shu joyda .transition() kerak bo'ladi.

O'tishni ko'rinish uchun "kirish va chiqish xoreografiyasi" deb tasavvur qiling. Ko'rinishga .transition() biriktirish orqali SwiftUI-ga u paydo bo'lganda va yo'q bo'lganda qanday animatsiya qilishini aytasiz.

Muhim: o'tishlar faqat if yoki if/else yordamida shartli ko'rsatiladigan viewlar bilan ishlaydi. Ko'rinish har doim mavjud bo'lsa, kirib/chiqib kelish holati yo'q, shuning uchun o'tish ta'sir qilmaydi.

Swift
ContentView.swift
import SwiftUI struct ContentView: View { @State private var bannerKorinmoqda = false var body: some View { VStack { // Banner faqat bannerKorinmoqda true bo'lganda qo'shiladi if bannerKorinmoqda { Text("✅ Saqlandi!") .padding() .background(Color.green.opacity(0.2)) .cornerRadius(8) // O'tish faqat bu ko'rinish qo'shilganda/olib tashlaganda ishga tushadi .transition(.slide) } Spacer() Button("Bannerni ko'rsatish/yashirish") { // O'tishlarni ishlashi uchun withAnimation kerak withAnimation(.easeInOut(duration: 0.3)) { bannerKorinmoqda.toggle() } } .buttonStyle(.borderedProminent) } .padding() } }
QatorVazifasi
if bannerKorinmoqda { ... }Bu ko'rinishni shartli qiladi. bannerKorinmoqda true bo'lganda SwiftUI banner ko'rinishini qo'shadi. False bo'lganda olib tashlaydi.
.transition(.slide)SwiftUI-ga: "bu ko'rinish qo'shilganda bosh tomondan siljib kirsin; olib tashlaganda o'sha tomonga siljib chiqsin" deydi. Bu modifikator faqat qo'shish yoki olib tashlash paytida muhim.
withAnimation(.easeInOut(duration: 0.3))O'tishlar animatsiya kontekstini talab qiladi. withAnimation holat o'zgarishini o'rab oladi va o'tish animatsiyasini ishga tushiradi.

O'tish turlari

.transition(.opacity) — xiralashtirish bilan paydo bo'lish/yo'q bo'lish

if xabarKorinmoqda {
    Text("Xabar!")
        .transition(.opacity)
}

.transition(.scale) — markazdan kattayib/kichrayib paydo bo'lish

if yurakKorinmoqda {
    Image(systemName: "heart.fill")
        .foregroundStyle(.red)
        .font(.largeTitle)
        .transition(.scale)
}

.transition(.move(edge:)) — ma'lum tomondan siljib kirish

if menuKorinmoqda {
    MenuKorinishi()
        // Har doim o'ng tomondan kiradi/chiqadi
        .transition(.move(edge: .trailing))
}

Kombinatsiyalangan o'tish

// Xiralashtirish + masshtab bir vaqtda
if kartaKorinmoqda {
    KartaKorinishi()
        .transition(.opacity.combined(with: .scale))
}

Assimetrik o'tish — kirish va chiqish uchun turli ta'sir

if bildirishnoma {
    BildirishnomaBanneri()
        .transition(.asymmetric(
            insertion: .move(edge: .top),   // Yuqoridan kiradi
            removal: .opacity               // Xiralashtirish bilan chiqadi
        ))
}

Tezkor ma'lumotnoma

SintaksisVazifasi
.transition(.opacity)Kirishda paydo bo'ladi, chiqishda yo'qoladi
.transition(.scale)Markazdan kattayib kiradi, markazga kichrayib chiqadi
.transition(.slide)Bosh (leading) tomondan siljib kiradi/chiqadi
.transition(.move(edge: .bottom))Ko'rsatilgan tomondan siljib kiradi/chiqadi
.transition(.push(from: .top))Yuqoridan push effekti bilan kiradi
.transition(.opacity.combined(with: .scale))Bir vaqtda ikkita o'tish ta'sirini birlashtiradi
.transition(.asymmetric(insertion:removal:))Kirish va chiqish uchun turli ta'sirlar

🎯 Topshiriq: bildirishnoma banneri

Bildirishnoma banner tizimi yarating: yuqoridan siljib kiradigan va xiralashtirish bilan yo'q bo'ladigan banner. Banner avtomatik ravishda 3 soniyadan keyin yo'q bo'lsin (ProgressView ishlatilmaydi — faqat DispatchQueue.main.asyncAfter yordamida). Bannerda matn va ikonka bo'lsin. Kirish uchun .asymmetric(insertion: .move(edge: .top), removal: .opacity) ishlatib sinab ko'ring.

Buy mea coffee