Co je to matchedGeometryEffect a jak ho používat ve SwiftUI?

matchedGeometryEffect - je modifikátor ve SwiftUI, který umožňuje plynule animovat změnu velikosti a polohy zobrazení při přechodu mezi různými stavy nebo hierarchiemi zobrazení. Synchronizuje geometrii (velikost a polohu) zobrazení v různých částech hierarchie a vytváří efekt "shody".

Použití:

1. Definice id a animačního prostoru:

   • Je nutné přiřadit unikátní id všem zobrazením, která mají být synchronizována, pomocí modifikátoru matchedGeometryEffect.
   • Určit namespace (prostor jmen animace). namespace spojuje zobrazení, která mají být animována společně. Obvykle se používá anotace @Namespace private var namespace.

2. Aplikace na zobrazení:

   • Aplikovat matchedGeometryEffect na každé zobrazení, které se účastní animace, s uvedením stejného id a namespace.
   • Měnit viditelnost nebo polohu zobrazení, například pomocí podmínek if/else nebo změnou stavu, který ovlivňuje rozložení. SwiftUI automaticky animuje přechod.

struct ContentView: View {
    @Namespace private var animationNamespace // Deklarace prostoru jmen
    @State private var isExpanded = false

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

            Button("Toggle Size") {
                withAnimation { // Použití withAnimation pro plynulý přechod
                    isExpanded.toggle()
                }
            }
        }
    }
}

Klíčové body:

• Stejné id a namespace pro srovnávaná zobrazení.
• Změny by měly probíhat uvnitř bloku animace (například s withAnimation).
• Umožňuje vytvářet složité přechody mezi různými stavy rozložení.
• Může být použit s různými modifikátory ovlivňujícími velikost a polohu (frame, padding, offset atd.).

matchedGeometryEffect výrazně zjednodušuje tvorbu složitých animací transformace zobrazení ve srovnání s ručním výpočtem a animací parametrů rámce.