Sobes.tech
Middle+

Mi az a matchedGeometryEffect és hogyan használják a SwiftUI-ben?

sobes.tech MI

Válasz az MI-től

A matchedGeometryEffect a SwiftUI-ban egy sima átmeneti animáció létrehozására szolgál két olyan nézet között, amelyek ugyanazt a vizuális elemet reprezentálják különböző elrendezésekben. Összekapcsolja egy nézet geometriáját egy másik nézet geometriájával egy állapotban, lehetővé téve, hogy a SwiftUI automatikusan animálja a változásokat.

Használata a .matchedGeometryEffect módosító alkalmazásával történik mindkét nézeten, amelyeket összekapcsolni kívánunk. A módosító három paramétert fogad:

  1. id: Egyedi azonosító a nézetek összekapcsolásához.
  2. in: Névterület (Namespace), ahol az azonosító regisztrálva van. Általában @Namespace segítségével hozható létre.
  3. properties: A geometriai tulajdonságok halmaza, amelyeket animálni szeretnénk (pl. .position, .size, .frame).

Használati példa:

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

    var body: some View {
        VStack {
            if isExpanded {
                Rectangle()
                    .fill(Color.blue)
                    .matchedGeometryEffect(id: "myShape", in: animation)
                    .frame(width: 200, height: 200)
                    .onTapGesture {
                        withAnimation {
                            isExpanded.toggle()
                        }
                    }
            } else {
                Rectangle()
                    .fill(Color.red)
                    .matchedGeometryEffect(id: "myShape", in: animation)
                    .frame(width: 50, height: 50)
                    .onTapGesture {
                        withAnimation {
                            isExpanded.toggle()
                        }
                    }
            }
        }
    }
}

Ebben a példában a .matchedGeometryEffect két Rectangle-t köt össze ugyanazzal az id-vel ("myShape") és ugyanabban a névterületben (animation). Amikor az isExpanded változik, a SwiftUI automatikusan animálja a két állapot közötti átmenetet, sima változást eredményezve a téglalap méretében és helyzetében.