Mi az a matchedGeometryEffect és hogyan használható a SwiftUI-ban?

A matchedGeometryEffect egy módosító SwiftUI-ben, amely lehetővé teszi a nézet méretének és helyzetének sima animálását a különböző állapotok vagy hierarchiák közötti váltás során. Szinkronizálja a geometriai tulajdonságokat (méret és pozíció) a hierarchia különböző részein, létrehozva egy "illesztési" hatást.

Használat:

1. id és animációs tér meghatározása:

   • Egyedi id-t rendel minden olyan nézethez, amelyet szinkronizálni kell, a matchedGeometryEffect módosító segítségével.
   • Meg kell adni egy namespace-t (névtér). A namespace összekapcsolja azokat a nézeteket, amelyeket együtt kell animálni. Általában az @Namespace private var namespace annotációt használják.

2. Alkalmazás a nézeteken:

   • Minden résztvevő nézeten alkalmazza a matchedGeometryEffect-et, ugyanazzal az id-vel és namespace-szel.
   • Változtassa a nézetek láthatóságát vagy pozícióját, például if/else feltételek vagy az állapot módosításával, amely befolyásolja a elrendezést. A SwiftUI automatikusan animálja a átmenetet.

struct ContentView: View {
    @Namespace private var animationNamespace // Névterület deklarálása
    @State private var isExpanded = false

    var body: some View {
        VStack {
            if isExpanded {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.blue)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // Alkalmazás id és namespace segítségével
                    .frame(width: 300, height: 200)
            } else {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.red)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // Ugyanazzal az id-vel és namespace-szel
                    .frame(width: 50, height: 50)
            }

            Button("Toggle Size") {
                withAnimation { // Használja a withAnimation-t a sima átmenethez
                    isExpanded.toggle()
                }
            }
        }
    }
}

Főbb pontok:

• Ugyanaz az id és namespace a kapcsolódó nézetekhez.
• A változásoknak az animáció blokkban kell történniük (pl. withAnimation-nel).
• Lehetővé teszi összetett átmenetek létrehozását különböző elrendezési állapotok között.
• Különböző módosítókkal használható, amelyek befolyásolják a méretet és a pozíciót (frame, padding, offset stb.).

A matchedGeometryEffect jelentősen leegyszerűsíti a komplex nézettranszformációs animációk létrehozását a kézi számításokhoz képest, a keretparaméterek animálásával.