Sobes.tech
Middle

Čo je matchedGeometryEffect v SwiftUI?

sobes.tech AI

Odpoveď od AI

matchedGeometryEffect v SwiftUI je modifier, ktorý umožňuje plynulé animovanie zmeny veľkosti a polohy pohľadov počas ich presunu medzi rôznymi hierarchiami alebo kontajnermi.

Základné princípy:

  • Zladenie identifikátorov: Udávate rovnaký id pre pohľady, ktoré chcete animovať počas prechodu.
  • Zdroj a cieľ: Určujete namespace, ktorý tieto pohľady spája.
  • Automatická animácia: SwiftUI automaticky vypočíta medziľahlé stavy a animuje prechod z jedného stavu do druhého.

Použitie:

import SwiftUI

struct ContentView: View {
    @Namespace private var namespace
    @State private var isExpanded = false

    var body: some View {
        VStack {
            if isExpanded {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.blue)
                    .matchedGeometryEffect(id: "box", in: namespace)
                    .frame(width: 200, height: 200)
                    .onTapGesture {
                        withAnimation {
                            isExpanded.toggle()
                        }
                    }
            } else {
                RoundedRectangle(cornerRadius: 5)
                    .fill(Color.red)
                    .matchedGeometryEffect(id: "box", in: namespace)
                    .frame(width: 50, height: 50)
                    .onTapGesture {
                        withAnimation {
                            isExpanded.toggle()
                        }
                    }
            }
        }
    }
}

V tomto príklade, RoundedRectangle mení veľkosť a farbu pri prepínaní medzi stavmi isExpanded, pomocou matchedGeometryEffect s identifikátorom "box" a namespace. SwiftUI automaticky animuje túto zmenu.