在两个独立视图之间创建过渡

在 SwiftUI 中，使用 matchedGeometryEffect 可以轻松地在两个独立视图之间创建流畅的过渡动画。这种效果使得视图在状态变化时能够保持一致的几何属性，从而实现视觉上的连贯性。

1. 创建视图

首先，你需要创建两个视图，这些视图将会在动画中进行过渡。例如，可以创建一个按钮和一个显示详细信息的视图。以下是一个简单的示例：

struct ContentView: View {
    @Namespace private var animationNamespace
    @State private var isDetailViewActive = false

    var body: some View {
        VStack {
            if isDetailViewActive {
                DetailView(namespace: animationNamespace)
            } else {
                Button(action: {
                    withAnimation {
                        isDetailViewActive.toggle()
                    }
                }) {
                    Text("查看详情")
                        .matchedGeometryEffect(id: "button", in: animationNamespace)
                        .padding()
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
            }
        }
    }
}

2. 视图过渡

在上面的代码中，当按钮被点击时，isDetailViewActive 状态会改变，触发视图的切换。matchedGeometryEffect 通过 id 和 namespace 使得按钮在切换到详细视图时，能够平滑地过渡。

3. 详细视图

接下来，创建一个详细视图，确保在该视图中也使用相同的 matchedGeometryEffect。这样可以确保在视图切换时，动画效果能够保持一致。

struct DetailView: View {
    var namespace: Namespace.ID

    var body: some View {
        VStack {
            Text("详细信息")
                .matchedGeometryEffect(id: "button", in: namespace)
                .padding()
                .background(Color.green)
                .foregroundColor(.white)
                .cornerRadius(10)
        }
    }
}

4. 动画效果

通过使用 withAnimation，你可以控制动画的时机和效果。SwiftUI 会自动处理视图的几何属性，使得过渡看起来非常自然。你可以尝试不同的动画效果，例如改变动画的持续时间或使用不同的动画曲线。

5. 总结

使用 matchedGeometryEffect 在两个独立视图之间创建过渡是非常简单且强大的。通过合理使用 namespace 和 id，你可以实现流畅的动画效果，提升用户体验。🎉

这种方法不仅适用于按钮和详细视图之间的过渡，还可以扩展到其他类型的视图，创造出更加丰富的用户界面。快来尝试吧！🚀