Bevosita animatsiyalar

SwiftUI animatsiyalar: bevosita (explicit)

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

Sintaksis

withAnimation: withAnimation(.easeInOut) { state.toggle() }. Blok ichidagi barcha view modifikatori o‘zgarishlari birgalikda animatsiya qilinadi.

Bosganda aylantirish

Tugmani bosish ikonkani 180 gradusga aylantirish uchun withAnimation ni ishga tushiradi.

import SwiftUI

struct ExplicitAnimDemo: 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 { ExplicitAnimDemo() }
}

import SwiftUI

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

Yuqoridagi misolda angle state’i o‘zgarganda strelka ikonkasi 180 gradusga aylanadi.

Bir nechta xususiyatni animatsiya qilish

Bitta state o‘zgarishida aylanish, masshtab, rang va shaffoflikni animatsiya qilish uchun withAnimation dan foydalaning.

import SwiftUI

struct ExplicitMultiDemo: View {
  @State private var on = false
  var body: some View {
    VStack(spacing: 16) {
      Image(systemName: "star.fill")
        .font(.system(size: 48))
        .foregroundStyle(on ? .yellow : .gray)
        .scaleEffect(on ? 1.3 : 1.0)
        .rotationEffect(.degrees(on ? 180 : 0)) 
        .opacity(on ? 1 : 0.6)
      Button(on ? "Reset" : "Animate") {
        withAnimation(.easeInOut(duration: 0.6)) { on.toggle() }
      }
    }
  }
}

import SwiftUI

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

import SwiftUI

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

Yuqoridagi misolda on state’i o‘zgarganda yulduzning o‘lchami, rangi va shaffofligi animatsiya qilinadi.