MatchedGeometryEffect

SwiftUI animatsiyalar: MatchedGeometryEffect

.matchedGeometryEffect yordamida maketlar bo‘ylab view identifikatsiyasi o‘zgarishlarini animatsiya qiling.

Sintaksis

Mos ID’lar: .matchedGeometryEffect(id: "id", in: namespace) ni ikkita view’ga qo‘llang; SwiftUI ular orasidagi maket/o‘lcham/joylashuvni animatsiya qiladi.

Nuqta katta doiraga aylanadi

Ikki doira bir xil matched geometry ID’ga ega.

State’ni almashtirish kichik va katta variantlar o‘rtasida o‘lcham va joylashuvni animatsiya qiladi.

import SwiftUI

struct MatchedDemo: View {
  @Namespace private var ns
  @State private var showDetail = false
  var body: some View {
    VStack(spacing: 16) {
      if showDetail {
        Circle().matchedGeometryEffect(id: "dot", in: ns).frame(width: 120, height: 120)
      } else {
        Circle().matchedGeometryEffect(id: "dot", in: ns).frame(width: 40, height: 40)
      }
      Button("Toggle") { withAnimation(.spring()) { showDetail.toggle() } }
    }
    .padding()
  }
}

import SwiftUI

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

import SwiftUI

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

Yuqoridagi misolda ikki doira bir xil matched geometry ID’ga ega.

State’ni almashtirish kichik va katta variantlar o‘rtasida o‘lcham va joylashuvni animatsiya qiladi.

Kartochka batafsil ko‘rinishga kengayadi (umumiy ID)

Kichik kartochka xuddi shu matched geometry ID yordamida kattaroq batafsil view’ga animatsiya bilan aylanadi.

O‘tish vizual uzluksizlikni saqlaydi.

import SwiftUI

struct CardsMatchedDemo: View {
  @Namespace private var ns
  @State private var expanded = false
  var body: some View {
    VStack(spacing: 16) {
      if expanded {
        RoundedRectangle(cornerRadius: 16)
          .fill(.blue.opacity(0.2))
          .matchedGeometryEffect(id: "card", in: ns)
          .frame(height: 160)
          .overlay(Text("Detail").font(.headline))
      } else {
        RoundedRectangle(cornerRadius: 12)
          .fill(.blue.opacity(0.2))
          .matchedGeometryEffect(id: "card", in: ns)
          .frame(height: 60)
          .overlay(Text("Card").font(.subheadline))
      }
      Button(expanded ? "Close" : "Open") {
        withAnimation(.spring()) { expanded.toggle() }
      }
    }
    .padding()
  }
}

import SwiftUI

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

import SwiftUI

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

Yuqoridagi misolda kichik kartochka xuddi shu matched geometry ID yordamida kattaroq batafsil view’ga animatsiya bilan aylanadi.

O‘tish vizual uzluksizlikni saqlaydi.