缩略图到全屏图的过渡

在 SwiftUI 中，使用 matchedGeometryEffect 可以轻松实现从缩略图到全屏图的过渡动画。这种效果不仅提升了用户体验，还能让应用看起来更加流畅和专业。接下来，我们将详细探讨如何实现这一过渡效果。

1. 创建视图

首先，你需要创建两个视图：一个是缩略图，另一个是全屏图。可以使用 Image 组件来展示这两个视图。以下是一个简单的示例：

struct ThumbnailView: View {
    @Namespace private var animationNamespace
    @State private var isFullScreen = false

    var body: some View {
        VStack {
            if isFullScreen {
                FullScreenView(animationNamespace: animationNamespace)
            } else {
                Image("thumbnail")
                    .resizable()
                    .matchedGeometryEffect(id: "image", in: animationNamespace)
                    .onTapGesture {
                        withAnimation {
                            isFullScreen.toggle()
                        }
                    }
            }
        }
    }
}

2. 全屏视图

全屏视图同样需要使用 matchedGeometryEffect，以确保动画的流畅性。以下是全屏视图的实现：

struct FullScreenView: View {
    var animationNamespace: Namespace.ID

    var body: some View {
        Image("fullImage")
            .resizable()
            .matchedGeometryEffect(id: "image", in: animationNamespace)
            .edgesIgnoringSafeArea(.all)
            .onTapGesture {
                // 这里可以添加返回缩略图的逻辑
            }
    }
}

3. 动画效果

在上面的代码中，matchedGeometryEffect 的 id 参数确保了两个视图之间的动画连接。通过 @Namespace 创建的命名空间使得 SwiftUI 能够识别并同步这两个视图的几何属性。

• 缩略图：当用户点击缩略图时，isFullScreen 状态会切换，触发动画。
• 全屏图：全屏图会根据缩略图的几何属性进行动画过渡，确保视觉上的一致性。

4. 交互体验

这种过渡效果不仅美观，还能提升用户的交互体验。用户在点击缩略图时，能够感受到图像的流畅过渡，仿佛图像在空间中移动。你可以根据需要调整动画的时长和曲线，以达到最佳效果。

withAnimation(.easeInOut(duration: 0.5)) {
    isFullScreen.toggle()
}

通过以上步骤，你可以轻松实现从缩略图到全屏图的过渡动画。🎉 这种效果在图片浏览、图库应用等场景中尤为常见，能够有效吸引用户的注意力。快来试试吧！