SwiftUI animatsiyalar

SwiftUI animatsiyalar va o‘tishlar

View o‘zgarishlarini withAnimation bilan animatsiya qiling va qo‘shish/olib tashlash effektlari uchun .transition ni qo‘llang.

Bilvosita (implicit) animatsiyalar

O‘zgarishlar avtomatik animatsiya qilinishi uchun animatsiyani state’ga bog‘liq view modifikatoriga biriktiring.

Sintaksis:

• .animation(.easeInOut, value: state)
• .animation(.spring(), value: state)

import SwiftUI

struct ImplicitDemo: View {
  @State private var on = false
  var body: some View {
    Circle()
      .fill(on ? .green : .gray)
      .frame(width: on ? 120 : 60, height: on ? 120 : 60)
      .animation(.spring(), value: on)
      .onTapGesture { on.toggle() }
  }
}

import SwiftUI

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

import SwiftUI

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

Ushbu misol boolean state o‘zgarganda spring animatsiyasi yordamida rang va o‘lchamni animatsiya qiladi.

Bevosita (explicit) animatsiyalar

Qachon va qanday animatsiya qilishni boshqarish uchun state o‘zgarishlarini withAnimation ichiga o‘rang.

Sintaksis: withAnimation(.easeInOut) { state.toggle() }

import SwiftUI

struct ExplicitDemo: View {
  @State private var angle = 0.0
  var body: some View {
    VStack(spacing: 12) {
      Image(systemName: "arrow.2.circlepath")
        .rotationEffect(.degrees(angle))
      Button("Rotate") {
        withAnimation(.easeInOut) { angle += 180 }
      }
    }
  }
}

import SwiftUI

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

import SwiftUI

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

Ushbu misol tugma bosilganda aylanishni bevosita animatsiya qiladi.

O‘tishlar (transitions)

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

Sintaksis:

• .transition(.slide)
• .transition(.opacity.combined(with: .scale))

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))
      }
    }
  }
}

import SwiftUI

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

import SwiftUI

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

Ushbu misol bevosita animatsiya bilan birlashtirilgan o‘tish yordamida view qo‘shilganda/olib tashlanganda uni xiralashtiradi va masshtablaydi.