SwiftUI实现不对称弹跳动画：上升easeOut下落easeIn（iOS15+）

需求：让圆形上升时应用easeOut动画，下落时应用easeIn动画，实现自然的连续弹跳效果，替代当前对称的自动反转动画。

现有代码问题 #

当前代码使用repeatForever(autoreverses: true)，动画反转时会复用相同的缓动曲线，导致上下动画完全对称，无法模拟真实弹跳的物理节奏。

解决方案代码 #

struct JumpingCircle: View {
    @State private var isBouncing = false
    
    var body: some View {
        VStack {
            Circle()
                .frame(width: 100, height: 100)
                .offset(y: isBouncing ? -100 : 0)
                .animation(
                    // 组合不对称动画序列，循环执行且不自动反转
                    Animation.sequence([
                        .easeOut(duration: 0.5),  // 上升阶段：速度逐渐减慢
                        .easeIn(duration: 0.5)     // 下落阶段：速度逐渐加快
                    ]).repeatForever(autoreverses: false),
                    value: isBouncing
                )
            
            Button("Toggle") {
                isBouncing.toggle()
            }
        }
        .onAppear {
            isBouncing = true  // 页面加载时自动触发弹跳
        }
    }
}

#Preview {
    JumpingCircle()
}

代码说明 #

• 用Animation.sequence将两个缓动动画按顺序组合，精准对应上升、下落的物理特性：上升收尾减速，下落启动加速。
• 关闭autoreverses，让动画序列完整执行后直接重复，避免反转时复用相同曲线导致的对称效果。
• 支持按钮手动启停，也可通过onAppear自动启动动画。

效果对比 #

• 现有效果：
• 期望效果：

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