如何在SwiftUI中实现正向反向不同曲线的非对称动画？

要实现正向状态切换用一种动画曲线，反向切换用另一种的效果，核心是跟踪状态变化的方向，动态为视图分配对应的动画。以下是具体实现方案：

修改后的完整代码 #

struct SideFlipper: View {
    @State private var sideFlipped = false
    // 记录状态变化前的值，用于判断动画方向
    @State private var previousSideFlipped = false
    
    struct GlobeView: View {
        @Binding var sideFlipped: Bool
        
        var body: some View {
            HStack() {
                if sideFlipped { Spacer() }
                Image(systemName: "globe")
                if !sideFlipped { Spacer() }
            }
            .frame(maxWidth: .infinity)
        }
    }
    
    var body: some View {
        VStack {
            Button("Flip Sides") {
                // 先记录当前状态，再执行切换
                previousSideFlipped = sideFlipped
                sideFlipped.toggle()
            }
            .padding()
            
            // 始终使用easeIn动画
            GlobeView(sideFlipped: $sideFlipped)
                .foregroundColor(.red)
                .animation(.easeIn(duration: 1.0), value: sideFlipped)
            
            // 始终使用easeOut动画
            GlobeView(sideFlipped: $sideFlipped)
                .foregroundColor(.green)
                .animation(.easeOut(duration: 1.0), value: sideFlipped)
            
            // 正反切换使用不同动画
            GlobeView(sideFlipped: $sideFlipped)
                .foregroundColor(.blue)
                .animation(
                    // 根据状态变化方向选择对应动画
                    previousSideFlipped == false && sideFlipped == true
                    ? .easeIn(duration: 1.0)
                    : .easeOut(duration: 1.0),
                    value: sideFlipped
                )
        }
        .padding()
    }
}

实现逻辑说明 #

1. 跟踪状态变化方向：新增previousSideFlipped状态变量，在按钮点击时先保存当前的sideFlipped值，再执行状态切换，以此判断动画的正反方向。
2. 动态分配动画：第三个蓝色视图的.animation修饰符通过对比前后状态值，选择对应动画曲线：
   • 当状态从false → true（正向移动）时，使用easeIn曲线，和红色视图动画一致；
   • 当状态从true → false（反向移动）时，使用easeOut曲线，和绿色视图动画一致。
3. 原有视图保持独立：红色、绿色视图仍保留各自固定的动画曲线，不受第三个视图的逻辑影响。

内容的提问来源于stack exchange，提问作者Curious Jorge