Sobes.tech
Middle

Mis on matchedGeometryEffect ja kuidas seda SwiftUI-s kasutada?

sobes.tech AI

Vastus AI-lt

matchedGeometryEffect on SwiftUI modifikator, mis võimaldab sujuvalt animatsiooni muuta suurust ja asukohta vaate vahel, liikudes erinevate seisundite või hierarhiate vahel. See sünkroniseerib geomeetriat (suurust ja asukohta) erinevates hierarhia osades, luues "sobivuse" efekti.

Kasutamine:

  1. id ja animatsiooniruumi määratlemine:

    • Tuleb määrata unikaalne id kõigile vaadetele, mis peavad olema sünkroniseeritud, kasutades matchedGeometryEffect modifikatorit.
    • Määrata namespace (nimede ruum). namespace ühendab vaated, mida tuleb koos animatsioonida. Tavaliselt kasutatakse annotatsiooni @Namespace private var namespace.
  2. Rakendamine vaadetele:

    • Rakendada matchedGeometryEffect iga vaadetele, mis osaleb animatsioonis, märkides sama id ja namespace.
    • Muuta vaadete nähtavust või asukohta, näiteks kasutades if/else tingimusi või muutudes olekut, mis mõjutab paigutust. SwiftUI automaatselt animatsioonib ülemineku.
struct ContentView: View {
    @Namespace private var animationNamespace // Nimede ruumi deklaratsioon
    @State private var isExpanded = false

    var body: some View {
        VStack {
            if isExpanded {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.blue)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // Kasutades id ja namespace
                    .frame(width: 300, height: 200)
            } else {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.red)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // Sama id ja namespace
                    .frame(width: 50, height: 50)
            }

            Button("Toggle Size") {
                withAnimation { // Kasutades withAnimation sujuvaks üleminekuks
                    isExpanded.toggle()
                }
            }
        }
    }
}

Peamised punktid:

  • Sama id ja namespace kasutamine võrdlevatel vaadetel.
  • Muutused peavad toimuma animatsiooni ploki sees (näiteks withAnimation-ga).
  • Võimaldab luua keerukaid üleminekuid erinevate paigutusolekute vahel.
  • Seda saab kasutada erinevate modifikatoritega, mis mõjutavad suurust ja asukohta (frame, padding, offset jne).

matchedGeometryEffect lihtsustab oluliselt keerukate vaate transformatsiooni animatsioonide loomist võrreldes käsitsi arvutamise ja raami parameetrite animatsiooniga.