SwiftUI - 丑陋的动画从纵向切换到横向

Posted 2023-02-24

【中文标题】SwiftUI - 丑陋的动画从纵向切换到横向

【英文标题】：SwiftUI - Ugly Animation switching from portrait to landscape

【发布时间】：2020-12-12 13:47:59

【问题描述】：

我有这个适用于 iPhone 的应用程序，我想要两个视图，一个用于纵向，一个用于横向。所以我在 ContentView 上有这个：

struct ContentView: View 
    var body: some View           
      Group 
        GeometryReader  geometry in
          if (geometry.size.width > geometry.size.height) 
            ZStack 
              Color.red
                .edgesIgnoringSafeArea(.all)
              
              Text("LANDSCAPE")
                .font(.title)
                .foregroundColor(.white)
            
          
          
          if (geometry.size.width < geometry.size.height) 
            
            ZStack 
              Color.blue
                .edgesIgnoringSafeArea(.all)
              
              Text("PORTRAIT")
                .font(.title)
                .foregroundColor(.white)
            
          
        
      
      .background(Color.black.edgesIgnoringSafeArea(.all))
    

当 iPhone 旋转时，我有这个丑陋的动画：

我不喜欢从边缘传来并像那样旋转的视图。 有什么方法可以让视图到位，只需更改颜色和文本？

有什么方法可以改善这一点并创造出更漂亮的东西吗？

【参考方案1】：

这是可能的解决方案 - 只是改变了使用过的容器的组合。

使用 Xcode 12.1 / ios 14.1 测试

struct ContentView: View 
    var body: some View 
        GeometryReader  gp in
            ZStack 
                LANDSCAPEView().opacity(gp.size.width > gp.size.height ? 1.0 : 0)
                PORTRAITView().opacity(gp.size.width < gp.size.height ? 1.0 : 0)
            
        
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .animation(.default)
        .background(Color.black.edgesIgnoringSafeArea(.all))
    


struct LANDSCAPEView: View 
    var body: some View 
        Color.red
            .overlay(
                
                Text("LANDSCAPE")
                    .font(.title)
                    .foregroundColor(.white)
            )
            .edgesIgnoringSafeArea(.all)
    


struct PORTRAITView: View 
    var body: some View 
        Color.blue.overlay(
            
            Text("PORTRAIT")
                .font(.title)
                .foregroundColor(.white)
        )
        .edgesIgnoringSafeArea(.all)
    

【讨论】：

谢谢。你的回答给了我很多想法。