matchedGeometryEffect experiments

Alt.swift

//
//  ContentView.swift
//  Effects
//
//  Created by Chris Eidhof on 13.07.20.
//

import SwiftUI

struct MyModifier: AnimatableModifier {
    var animatableData: Int = 0
    
    func body(content: Content) -> some View {
        content.overlay(Text("\(animatableData)"))
    }
}

struct ContentView: View {
    @Namespace var ns
    @State var toggle = false
    var body: some View {
        VStack {
            Toggle("Toggle", isOn: $toggle.animation(.easeInOut(duration: 1)))
            
            Rectangle().fill(Color.red).frame(height: 200).overlay(
                Group {
                    if toggle {
                        Circle()
                            .fill(Color.gray)
                            .modifier(MyModifier(animatableData: 0))
                            .matchedGeometryEffect(id: "circle", in: ns)
                            .frame(width: 100, height: 100)
                    }
                }
            )
            
            Rectangle().fill(Color.green).frame(height: 200).overlay(
                Group {
                    if !toggle {
                        Circle()
                            .fill(Color.white)
                            .modifier(MyModifier(animatableData: 100))
                            .matchedGeometryEffect(id: "circle", in: ns)
                            .frame(width: 50, height: 50)
                    }
                }
            )
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ContentView.swift

//
//  ContentView.swift
//  Effects
//
//  Created by Chris Eidhof on 13.07.20.
//

import SwiftUI

struct ContentView: View {
    @Namespace var ns
    @State var toggle = false
    var body: some View {
        VStack {
            Toggle("Toggle", isOn: $toggle.animation(.easeInOut(duration: 1)))
            
            Rectangle().fill(Color.red).frame(height: 200).overlay(
                Group {
                    if toggle {
                        Circle()
                            .fill(Color.black)
                            .matchedGeometryEffect(id: "circle", in: ns)
                            .frame(width: 100, height: 100)
                    }
                }
            )
            
            Rectangle().fill(Color.green).frame(height: 200).overlay(
                Group {
                    if !toggle {
                        Circle()
                            .fill(Color.white)
                            .matchedGeometryEffect(id: "circle", in: ns)
                            .frame(width: 50, height: 50)
                    }
                }
            )
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}