如果不使用已弃用的 .animation()，视图转换就会出现问题

Question

我试图遵守现已弃用的 .animation(.easInOut)，但每次我对 .animation(_:value:) 进行调整时，它都会破坏过渡。

此代码按照我想要的方式运行，一个视图滑入另一个视图，但给出了 .animation 已弃用的消息

 var body: some View {
        ZStack {
            if !showHealthView && !showFuelView && !showTrainView && !showHeartView {
                mainContent
                    .transition(AnyTransition.move(edge: transitionDirection))
            }
        
            if showHealthView {
                HealthView(showHealthView: $showHealthView)
                    .transition(AnyTransition.move(edge: .leading))
            } else if showFuelView {
                FuelView(showFuelView: $showFuelView)
                    .transition(AnyTransition.move(edge: .bottom))
            } else if showTrainView {
                TrainView(showTrainView: $showTrainView)
                    .transition(AnyTransition.move(edge: .bottom))
            } else if showHeartView {
                HeartView(showHeartView: $showHeartView)
                    .transition(AnyTransition.move(edge: .trailing))
            }
        }
        .animation(.easeInOut(duration: 0.5))
        .navigationBarHidden(true)
    }

如果我调整此代码以使其符合要求，它会破坏过渡，并且 mainContent 要么根本不移动，要么从中心开始移动到一侧，然后回到中心，就像 showHeartView 过渡一样，看起来很糟糕。

var body: some View {
    ZStack {
        if !showHealthView && !showFuelView && !showTrainView && !showHeartView {
            mainContent
                .transition(AnyTransition.move(edge: transitionDirection))
        }
        
        if showHealthView {
            HealthView(showHealthView: $showHealthView)
                .transition(AnyTransition.move(edge: .leading))
        } else if showFuelView {
            FuelView(showFuelView: $showFuelView)
                .transition(AnyTransition.move(edge: .bottom))
        } else if showTrainView {
            TrainView(showTrainView: $showTrainView)
                .transition(AnyTransition.move(edge: .bottom))
        } else if showHeartView {
            HeartView(showHeartView: $showHeartView)
                .transition(AnyTransition.move(edge: .trailing))
        }
    }
    .animation(.easeInOut(duration: 0.5), value: showHealthView)
    //.animation(.easeInOut(duration: 0.5))
    .navigationBarHidden(true)
}

有什么想法吗？？？

Answer 1

在源代码中，四个切换中只有一个具有动画效果。在下面的示例中，切换被替换为单个枚举，然后该枚举被动画化。

用于替换切换开关的枚举：

  enum ShowView {
       case health
       case fuel
       case train
       case heart
   }

使用枚举作为动画值的简化代码：

  struct ContentView: View {
       @State var showView: ShowView = .train
       
       var body: some View {
           VStack {
               ZStack {
                   switch showView {
                       case .health:
                           HealthView(showHealthView: $showView)
                               .transition(AnyTransition.move(edge: .leading))
                       case .fuel:
                           FuelView(showFuelView: $showView)
                               .transition(AnyTransition.move(edge: .bottom))
                       case .train:
                           TrainView(showTrainView: $showView)
                               .transition(AnyTransition.move(edge: .bottom))
                       case .heart:
                           HeartView(showHeartView: $showView)
                               .transition(AnyTransition.move(edge: .trailing))
                   }
               }
               .animation(.easeInOut(duration: 0.5), value: showView)

               List { // Added picker to switch views
                   Picker("Show View", selection: $showView) {
                       Text("Health").tag(ShowView.health)
                       Text("Fuel").tag(ShowView.fuel)
                       Text("Train").tag(ShowView.train)
                       Text("Heart").tag(ShowView.heart)
                   }
               }
           }
       }
   }

要转变的观点之一：

    struct HealthView: View {
        @Binding var showHealthView: ShowView 
        
        var body: some View {
            VStack {
                Image(systemName: "cross.case.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 100, height: 100)
                    .foregroundColor(.blue)
    
                Text("Health")
            }
        }
    }

产生的转换：

希望我没有过度简化您遇到的问题。