同步源视图与目标视图的几何属性

在 SwiftUI 中，使用 matchedGeometryEffect 可以轻松实现视图之间的过渡动画。要实现这一点，关键在于同步源视图与目标视图的几何属性。以下是一些重要的步骤和概念，帮助你理解如何有效地进行同步。

1. 使用 @Namespace 创建命名空间

首先，你需要创建一个命名空间。使用 @Namespace 属性包装器来定义一个命名空间，这样可以确保在动画过程中，源视图和目标视图能够共享相同的标识符。

@Namespace private var animationNamespace

2. 定义视图的 id

每个视图都需要一个唯一的 id 参数，以便在动画过程中进行匹配。确保源视图和目标视图的 id 一致，这样 SwiftUI 才能正确识别它们。

struct SourceView: View {
    var body: some View {
        Rectangle()
            .matchedGeometryEffect(id: "rectangle", in: animationNamespace)
            .frame(width: 100, height: 100)
    }
}

struct DestinationView: View {
    var body: some View {
        Rectangle()
            .matchedGeometryEffect(id: "rectangle", in: animationNamespace)
            .frame(width: 200, height: 200)
    }
}

3. 切换视图状态

使用 @State 来管理视图的状态，以便在用户交互时触发动画。例如，可以通过按钮点击来切换视图状态，从而实现源视图和目标视图之间的过渡。

@State private var isSourceView = true

var body: some View {
    VStack {
        if isSourceView {
            SourceView()
        } else {
            DestinationView()
        }
        Button("切换视图") {
            withAnimation {
                isSourceView.toggle()
            }
        }
    }
}

4. 同步几何属性

在动画过程中，确保源视图和目标视图的几何属性（如位置和大小）能够正确同步。通过 matchedGeometryEffect，SwiftUI 会自动处理这些属性的变化，使得过渡动画流畅自然。

5. 实际示例

假设你有一个按钮选择指示器，点击按钮时，指示器会从一个位置平滑过渡到另一个位置。通过上述步骤，你可以轻松实现这一效果。

struct ContentView: View {
    @Namespace private var animationNamespace
    @State private var selectedIndex = 0

    var body: some View {
        VStack {
            HStack {
                ForEach(0..<3) { index in
                    Button(action: {
                        withAnimation {
                            selectedIndex = index
                        }
                    }) {
                        Text("选项 \(index + 1)")
                    }
                }
            }
            .padding()

            Rectangle()
                .matchedGeometryEffect(id: "indicator", in: animationNamespace)
                .frame(width: 100, height: 5)
                .foregroundColor(.blue)
                .offset(x: CGFloat(selectedIndex) * 100)
        }
    }
}

通过以上步骤，你可以轻松实现源视图与目标视图之间的几何属性同步，创造出流畅的过渡动画。🎉 这种方法不仅简单易用，还能提升用户体验，让你的应用更加生动有趣！