Qu'est-ce que matchedGeometryEffect et comment l'utiliser dans SwiftUI?

matchedGeometryEffect est un modificateur dans SwiftUI qui permet d'animer en douceur le changement de taille et de position d'une vue lors de la transition entre différents états ou hiérarchies de vues. Il synchronise la géométrie (taille et position) des vues dans différentes parties de la hiérarchie, créant un effet de "correspondance".

Utilisation :

1. Définition de l'id et de l'espace d'animation :

   • Assigner un id unique à toutes les vues qui doivent être synchronisées, en utilisant le modificateur matchedGeometryEffect.
   • Spécifier un namespace (espace de noms de l'animation). Le namespace relie les vues qui doivent être animées ensemble. En général, on utilise l'annotation @Namespace private var namespace.

2. Application aux vues :

   • Appliquer matchedGeometryEffect à chaque vue participant à l'animation, en indiquant le même id et namespace.
   • Modifier la visibilité ou la position des vues, par exemple en utilisant des conditions if/else ou en changeant l'état qui influence la disposition. SwiftUI anime automatiquement la transition.

struct ContentView: View {
    @Namespace private var animationNamespace // Déclaration de l'espace de noms
    @State private var isExpanded = false

    var body: some View {
        VStack {
            if isExpanded {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.blue)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // Application avec id et namespace
                    .frame(width: 300, height: 200)
            } else {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.red)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // Application avec le même id et namespace
                    .frame(width: 50, height: 50)
            }

            Button("Toggle Size") {
                withAnimation { // Utilisation de withAnimation pour une transition fluide
                    isExpanded.toggle()
                }
            }
        }
    }
}

Points clés :

• Même id et namespace pour les vues correspondantes.
• Les changements doivent se produire à l'intérieur du bloc d'animation (par exemple, avec withAnimation).
• Permet de créer des transitions complexes entre différents états de disposition.
• Peut être utilisé avec divers modificateurs affectant la taille et la position (frame, padding, offset, etc.).

matchedGeometryEffect facilite grandement la création d'animations de transformation complexes par rapport au calcul et à l'animation manuels des paramètres du cadre.