O‘tishlar

SwiftUI animatsiyalar: o‘tishlar (transitions)

View’lar qo‘shilayotganda/olib tashlanayotganda ularni .transition va withAnimation yordamida animatsiya qiling.

Sintaksis

O‘tish: qo‘shiladigan/olib tashlanadigan view’ga .transition(.opacity) qo‘llanadi.

O‘tishni animatsiya qilish uchun state o‘zgarishini withAnimation ichiga o‘rang.

Shaffoflik + masshtab o‘tishi

View’ni qo‘shish/olib tashlash uchun tugmani bosing. Matn .opacity va .scale birlashtirilgan o‘tishdan foydalanadi.

import SwiftUI

struct TransitionDemo: View {
  @State private var show = false
  var body: some View {
    VStack(spacing: 12) {
      Button(show ? "Hide" : "Show") {
        withAnimation(.easeInOut) { show.toggle() }
      }
      if show {
        Text("Hello")
          .padding(12)
          .background(.blue.opacity(0.1))
          .cornerRadius(8)
          .transition(.opacity.combined(with: .scale))
      }
    }
    .padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { TransitionDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

Yuqoridagi misolda matn .opacity va .scale birlashtirilgan o‘tishdan foydalanadi.

Asimmetrik o‘tishlar

View paydo bo‘lishi va yo‘qolishini alohida sozlash uchun .asymmetric(insertion:removal:) dan foydalaning.

import SwiftUI

struct AsymmetricTransitionDemo: View {
  @State private var show = false
  var body: some View {
    VStack(spacing: 12) {
      Button(show ? "Hide" : "Show") {
        withAnimation(.easeInOut) { show.toggle() }
      }
      if show {
        Text("Panel")
          .padding(12)
          .frame(maxWidth: .infinity)
          .background(.green.opacity(0.15))
          .cornerRadius(8)
          .transition(.asymmetric(insertion: .move(edge: .bottom).combined(with: .opacity),
                                  removal: .move(edge: .top).combined(with: .opacity)))
      }
    }
    .padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { AsymmetricTransitionDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

Yuqoridagi misolda panel asimmetrik o‘tishdan foydalanadi: qo‘shilganda pastdan, olib tashlanganda esa yuqoridan harakatlanadi.