Animatsiya egri chiziqlari

SwiftUI animatsiyalar: animatsiya egri chiziqlari

Harakatni shakllantirish uchun .easeIn, .easeOut, .easeInOut va .linear kabi vaqt funksiyalarini tanlang.

Sintaksis

Vaqt egri chiziqlari: withAnimation(.easeInOut(duration: 1)) { state = ... }.

Tezlanishni o‘zgartirish uchun .easeIn, .easeOut, .easeInOut yoki .linear ni tanlang.

EaseIn va easeOut

Nuqtani turli egri chiziqlar bilan harakatlantirish uchun tugmalarni bosing. .easeIn sekin boshlanib, tezlashadi; .easeOut esa tez boshlanib, sekinlashadi.

import SwiftUI

struct CurvesDemo: View {
  @State private var x: CGFloat = 0
  var body: some View {
    VStack(spacing: 12) {
      HStack { Circle().frame(width: 24, height: 24).offset(x: x); Spacer() }
      HStack(spacing: 12) {
        Button("EaseIn") { withAnimation(.easeIn(duration: 1)) { x = 240 } }
        Button("EaseOut") { withAnimation(.easeOut(duration: 1)) { x = 0 } }
      }
    }
    .padding()
  }
}

import SwiftUI

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

import SwiftUI

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

Yuqoridagi misolda nuqta .easeIn va .easeOut yordamida turli egri chiziqlar bilan harakatlanadi.

Linear va easeInOut

O‘zgarmas tezlikdagi (.linear) harakatni silliq tezlashib/sekinlashadigan (.easeInOut) harakat bilan taqqoslang.

import SwiftUI

struct CurvesCompareDemo: View {
  @State private var go = false
  var body: some View {
    VStack(spacing: 16) {
      HStack { Circle().frame(width: 16, height: 16).offset(x: go ? 240 : 0); Spacer() }
        .animation(.linear(duration: 1), value: go)
      HStack { Circle().frame(width: 16, height: 16).offset(x: go ? 240 : 0); Spacer() }
        .animation(.easeInOut(duration: 1), value: go)
      Button(go ? "Reset" : "Animate") { go.toggle() }
    }
    .padding()
  }
}

import SwiftUI

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

import SwiftUI

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

Yuqoridagi misolda nuqta .linear va .easeInOut yordamida turli egri chiziqlar bilan harakatlanadi.