Spring animatsiyalar

SwiftUI animatsiyalar: spring animatsiyalar

Sozlanadigan qattiqlik (stiffness) va so‘nish (damping) bilan massa-prujina-dempfer harakatini simulyatsiya qilish uchun .spring() animatsiyalaridan foydalaning.

Sintaksis

Spring: withAnimation(.spring(response: 0.4, dampingFraction: 0.6)) { state.toggle() }. response tezlikni, dampingFraction esa chegaradan o‘tib ketish/sakrashni boshqaradi.

Oddiy spring almashtirish

response va dampingFraction bilan sozlangan spring animatsiyasi yordamida doira o‘lchamini almashtirish uchun tugmani bosing.

import SwiftUI

struct SpringDemo: View {
  @State private var on = false
  var body: some View {
    VStack(spacing: 12) {
      Circle()
        .fill(on ? .green : .gray)
        .frame(width: on ? 120 : 60, height: on ? 120 : 60)
      Button("Toggle") {
        withAnimation(.spring(response: 0.4, dampingFraction: 0.6)) { on.toggle() }
      }
    }
    .padding()
  }
}

import SwiftUI

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

import SwiftUI

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

Spring parametrlarini sozlash

So‘nishni kamaytirib va response’ni o‘zgartirib, ko‘proq sakraydigan spring bilan tajriba qiling. Bir nechta shakl turli vaqt bilan animatsiya qilinadi.

import SwiftUI

struct SpringTunedDemo: View {
  @State private var on = false
  var body: some View {
    VStack(spacing: 16) {
      RoundedRectangle(cornerRadius: 12)
        .fill(.blue.opacity(0.2))
        .frame(width: on ? 220 : 140, height: 40)
        .animation(.spring(response: 0.25, dampingFraction: 0.45), value: on)
      Circle()
        .fill(.orange.opacity(0.4))
        .frame(width: on ? 80 : 40, height: on ? 80 : 40)
        .animation(.spring(response: 0.5, dampingFraction: 0.65), value: on)
      Button(on ? "Reset" : "Bounce") { on.toggle() }
    }
    .padding()
  }
}

import SwiftUI

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

import SwiftUI

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