interchangeable_matched_geometry_effect.swift

import SwiftUI

struct HeroAnimationTest: View {
  let indices = 0 ..< 3

  @State
  var showsOtherView = false

  @Namespace
  var namespaceID: Namespace.ID

  @State
  var id: String?

  var body: some View {
    ZStack
      .init {
        Button("transition") {
          withAnimation(.linear(duration: 1.0)) {
            showsOtherView.toggle()
          }
        }

        HStack
          .init {
            ForEach(indices, id: \.self) { index in
              Color
                .red
                .overlay(
                  Group {
                    if showsOtherView == false || id != "\(index)" {
                      Color
                        .clear
                        .overlay(Text("\(index)"))
                        .matchedGeometryEffect(id: "\(index)", in: namespaceID)
                    }
                  }
                )
                .frame(width: 40, height: 40)
                .onTapGesture {
                  id = "\(index)"
                }
            }
          }
          .offset(y: -50)

        if showsOtherView {
          OtherView
            .init(indices: indices, id: $id, namespaceID: namespaceID)
            .offset(y: 50)
        }
      }
  }
}

struct OtherView: View {
  let indices: Range<Int>

  @Binding
  var id: String?

  let namespaceID: Namespace.ID

  var body: some View {
    HStack
      .init(spacing: 20) {
        ForEach(indices, id: \.self) { index in
          Color
            .green
            .overlay(Text("\(index)"))
            .frame(width: 40, height: 40)
            .matchedGeometryEffect(
              id: id == "\(index)" ? "\(index)" : "\(index)_",
              in: namespaceID
            )
            .onTapGesture {
              id = "\(index)"
            }
        }
      }
      .offset(y: 50)
  }
}