【SwiftUI】複数の物体をアニメーションさせる時に連動して動かない問題を解決する（iOS17）

はじめに

iOS17でgeometryGroupという機能が追加されていました。
ドキュメントを見ても意味不明だったのですが、使ってみたら納得したので記事にしておきます。

やりたいこと

しかし、こうなってしまう

問題のある実装

import SwiftUI

struct ContentView: View {
    @State private var isMove = false

    var body: some View {
        VStack {
            ZStack {
                Circle()
                    .foregroundStyle(.red)
                    .frame(width: 100, height: 100)
                
                if isMove {
                    Circle()
                        .foregroundStyle(.blue)
                        .frame(width: 50, height: 50)
                }
            }
            .animation(.default, value: isMove)
            .offset(x: isMove ? 100 : -100)

            Button {
                isMove.toggle()
            } label: {
                Text("移動")
            }
        }
    }
}

解決方法

import SwiftUI

struct ContentView: View {
    @State private var isMove = false

    var body: some View {
        VStack {
            ZStack {
                Circle()
                    .foregroundStyle(.red)
                    .frame(width: 100, height: 100)
                
                if isMove {
                    Circle()
                        .foregroundStyle(.blue)
                        .frame(width: 50, height: 50)
                }
            }
+           .geometryGroup()
            .animation(.default, value: isMove)
            .offset(x: isMove ? 100 : -100)

            Button {
                isMove.toggle()
            } label: {
                Text("移動")
            }
        }
    }
}

おわり

ViewのGeometryを親Viewから分離してるらしいです。
むずいですね

公式ドキュメント