Sobes.tech
Middle

Qu'est-ce que matchedGeometryEffect dans SwiftUI?

sobes.tech IA

Réponse de l'IA

matchedGeometryEffect dans SwiftUI est un modificateur qui permet d'animer en douceur le changement de taille et de position des vues lors de leur déplacement entre différentes hiérarchies ou conteneurs.

Principes de base :

  • Correspondance des identifiants : Vous indiquez le même identifiant (id) pour les vues que vous souhaitez animer lors du passage.
  • Source et destination : Vous spécifiez un espace de noms (namespace) qui relie ces vues.
  • Animation automatique : SwiftUI calcule automatiquement les états intermédiaires et anime la transition d'un état à un autre.

Application :

import SwiftUI

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

    var body: some View {
        VStack {
            if isExpanded {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.blue)
                    .matchedGeometryEffect(id: "box", in: namespace)
                    .frame(width: 200, height: 200)
                    .onTapGesture {
                        withAnimation {
                            isExpanded.toggle()
                        }
                    }
            } else {
                RoundedRectangle(cornerRadius: 5)
                    .fill(Color.red)
                    .matchedGeometryEffect(id: "box", in: namespace)
                    .frame(width: 50, height: 50)
                    .onTapGesture {
                        withAnimation {
                            isExpanded.toggle()
                        }
                    }
            }
        }
    }
}

Dans cet exemple, RoundedRectangle change de taille et de couleur lors du basculement entre les états isExpanded, en utilisant matchedGeometryEffect avec l'identifiant "box" et l'espace de noms namespace. SwiftUI anime automatiquement cette modification.