# MGE ⟩ animation

[SwiftUI](../..) ⟩ [Drawing](..) ⟩ [Matched Geometry Effect]() ⟩&#x20;

{% embed url="https://youtu.be/QUrHFGrqrJg" %}

{% tabs %}
{% tab title="💾 程式" %}
⬆️ 需要： [ext](../../view/layout/frame/ext "mention")

```swift
import SwiftUI
import PlaygroundSupport
import Extensions            // 🌀 View+
PlaygroundPage.current.setLiveView(ContentView())

struct ContentView: View {
    
    // ⭐️ for matched geometry effect (i.e. Magic Move)
    @Namespace private var ns
    
    @State private var flag: Bool = true
    
    var body: some View {
        VStack(spacing: 0) {
            HStack {
                viewA1    // ⭐️ source/target of matched geometry effect
                Spacer()
                squares
            }
            controls
        }
        .frame(width: 400)
        .border(.secondary)
    }
}

extension ContentView {
    
    /// controls
    var controls: some View {
        HStack(spacing: 0) {
            Group {
                // ⭐️ animation
                Toggle("Anime", isOn: $flag.animation(.easeInOut(duration: 4)))
                Toggle("No", isOn: $flag).tint(.pink)
            }
            .padding()
            .border(.secondary)
        }
    }
    
    /// ⭐️ viewA1
    @ViewBuilder var viewA1: some View {
        if flag {
            Color.green
                // ----------------------------------
                // ⭐️ source/target
                .matchedGeometryEffect(id: 1, in: ns)
                // ----------------------------------
                .frame(100)        // 🌀 View+
        }
    }
    
    /// ⭐️ viewA2
    @ViewBuilder var viewA2: some View {
        if !flag {
            Circle()
                .fill(Color.blue)
                // ----------------------------------
                // ⭐️ target/source
                .matchedGeometryEffect(id: 1, in: ns)
                // ----------------------------------
                .padding(2)
                .frame(50)        // 🌀 View+
                .border(.secondary)
        }
    }
    
    /// square
    var square: some View {
        Color.pink
            .frame(50)            // 🌀 View+
            .border(.secondary)
    }
    
    /// square stack
    var squares: some View {
        VStack(spacing: 0) {
            square
            viewA2        // ⭐️ target/source of matched geometry effect
            square
        }
    }
}
```
{% endtab %}

{% tab title="📗 參考" %}
* SwiftUI Lab ⟩ MatchedGeometryEffect ⟩ [Part 1 (Hero Animations)](https://swiftui-lab.com/matchedgeometryeffect-part1/)
{% endtab %}

{% tab title="👥 相關" %}
* can have [anim](../../anim "mention").
{% endtab %}
{% endtabs %}
