将图像从缩略图动画到全屏

Posted 2023-02-24

【中文标题】将图像从缩略图动画到全屏

【英文标题】：Animate Image from Thumbnail to Full Screen

【发布时间】：2020-01-28 05:58:09

【问题描述】：

是否可以复制 ios 照片应用程序的行为，当用户点击照片时打开照片的详细视图时，它会展开以填满屏幕 - 在 SwiftUI 中。

我可以在当前视图的新视图中打开照片，但是我似乎无法管理如何在视图中为图像设置动画，从当前位置扩展到全屏 - 当它嵌套在堆栈？

这是我的 UI 的基本版本：

struct ContentView: View 

    var body: some View 

        VStack 
            BannerView()
                .padding()
            Text("Title")
        

    


struct BannerView: View 

    var body: some View 
        HStack 
            VStack 
                Image(systemName: "rectangle.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .padding()
                    .onTapGesture 
                        // Enbiggen image
                
            
            VStack 
                Text("Text")
                Text("Text 1")
                Text("Text 2")
            
        
        .background(Color(UIColor.systemBackground))
    

因此，当用户在 BannerView 中点击图像时，它应该以当前大小为动画以填充屏幕。

我可以在脑海中管理它的唯一方法是在 ContentView 中隐藏 Bannerview 图像上的重复图像并将可见的动画然后缩放到全屏，但是我将如何检测图像的位置和大小横幅视图？

【问题讨论】：

本主题swiftUI transitions: Scale from some frame - like iOS Homescreen is doing when opening an App 中的方法可能会有所帮助。

【参考方案1】：

通过为矩形的纵横比添加State，我能够通过简单的缩放动画将图像变为全屏

struct BannerView: View 
    @State var contentMode = ContentMode.fit

    var body: some View 
        HStack 
            VStack 
                Image(systemName: "rectangle.fill")
                    .resizable()
                    .aspectRatio(contentMode: contentMode)
                    .padding()
                    .onTapGesture 
                        withAnimation 
                            self.contentMode = ContentMode.fill
                        
                
            
            VStack 
                Text("Text")
                Text("Text 1")
                Text("Text 2")
            
        
        .background(Color(UIColor.systemBackground))