使用 .matchedGeometryEffect 实现视图匹配动画

使用 .matchedGeometryEffect 实现视图匹配动画，能让你的 SwiftUI 界面动起来，更加生动有趣！🎉 这种动画效果，可以让视图在不同状态之间平滑过渡，就像变魔术一样！✨

什么是 .matchedGeometryEffect？

.matchedGeometryEffect 是 SwiftUI 提供的一个强大的修饰符，它允许你创建视图之间的几何匹配动画。简单来说，就是让两个或多个视图共享一个几何形状，当它们的位置、大小或形状发生变化时，产生平滑的动画过渡效果。这种效果非常适合用于创建共享元素转场动画，例如在列表和详情视图之间切换时。

• 它通过 id 和 namespace 来识别需要匹配的视图。
• id 是一个唯一的标识符，用于标记需要匹配的视图。
• namespace 是一个命名空间，用于区分不同的匹配动画。

如何使用 .matchedGeometryEffect？

使用 .matchedGeometryEffect 非常简单，只需要几个步骤：

1. 创建 Namespace: 首先，你需要创建一个 Namespace，用于管理你的匹配动画。你可以使用 @Namespace var namespace 来创建一个命名空间。
2. 添加修饰符: 然后，将 .matchedGeometryEffect(id:id, in: namespace) 修饰符添加到需要匹配的视图上。确保使用相同的 id 和 namespace。
3. 触发动画: 最后，通过改变视图的状态来触发动画。例如，你可以改变视图的位置、大小或形状。

@Namespace var namespace
@State private var isExpanded: Bool = false

var body: some View {
    VStack {
        if !isExpanded {
            RoundedRectangle(cornerRadius: 10)
                .fill(.blue)
                .matchedGeometryEffect(id: "rectangle", in: namespace)
                .frame(width: 100, height: 100)
        } else {
            RoundedRectangle(cornerRadius: 20)
                .fill(.red)
                .matchedGeometryEffect(id: "rectangle", in: namespace)
                .frame(width: 300, height: 200)
        }
    }
    .onTapGesture {
        withAnimation(.spring()) {
            isExpanded.toggle()
        }
    }
}

实际应用场景

.matchedGeometryEffect 在实际开发中有很多应用场景，例如：

• 列表和详情视图: 在列表视图中点击一个项目，然后平滑过渡到详情视图。
• 选项卡切换: 在选项卡之间切换时，共享元素平滑移动。
• 展开/折叠动画: 点击一个视图，然后平滑展开或折叠。

总而言之，.matchedGeometryEffect 是一个非常强大的工具，可以让你创建出令人惊艳的动画效果。🚀 掌握它，你的 SwiftUI 技能将会更上一层楼！💪