Čo je matchedGeometryEffect a ako ho použiť v SwiftUI?

matchedGeometryEffect je modifikátor v SwiftUI, ktorý umožňuje plynulo animovať zmenu veľkosti a polohy zobrazenia pri prechode medzi rôznymi stavmi alebo hierarchiami zobrazení. Synchronizuje geometriu (veľkosť a polohu) zobrazení v rôznych častiach hierarchie, vytvárajúc efekt "zhody".

Použitie:

1. Definovanie id a animačného priestoru:

   • Je potrebné priradiť unikátne id všetkým zobrazeniam, ktoré majú byť synchronizované, pomocou modifikátora matchedGeometryEffect.
   • Určiť namespace (priestor mien animácie). namespace spája zobrazenia, ktoré majú byť animované spoločne. Obvykle sa používa anotácia @Namespace private var namespace.

2. Aplikácia na zobrazenia:

   • Aplikovať matchedGeometryEffect na každé zobrazenie, ktoré sa zúčastňuje animácie, s uvedením rovnakého id a namespace.
   • Meniť viditeľnosť alebo polohu zobrazení, napríklad pomocou podmienok if/else alebo zmenou stavu, ktorý ovplyvňuje rozloženie. SwiftUI automaticky animuje prechod.

struct ContentView: View {
    @Namespace private var animationNamespace // Vyhlásenie priestoru mien
    @State private var isExpanded = false

    var body: some View {
        VStack {
            if isExpanded {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.blue)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // Použitie s id a namespace
                    .frame(width: 300, height: 200)
            } else {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.red)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // Použitie s rovnakým id a namespace
                    .frame(width: 50, height: 50)
            }

            Button("Toggle Size") {
                withAnimation { // Použitie sAnimation pre plynulý prechod
                    isExpanded.toggle()
                }
            }
        }
    }
}

Kľúčové body:

• Rovnaké id a namespace pre porovnávané zobrazenia.
• Zmeny by mali prebiehať v rámci bloku animácie (napríklad s withAnimation).
• Umožňuje vytvárať zložité prechody medzi rôznymi stavmi rozloženia.
• Môže byť použitý s rôznymi modifikátormi ovplyvňujúcimi veľkosť a polohu (frame, padding, offset atď.).

matchedGeometryEffect výrazne zjednodušuje tvorbu zložitých animácií transformácie zobrazení v porovnaní s ručným výpočtom a animáciou parametrov rámca.