如何移除SwiftUI视图上的动画 解决重复显示时动画卡顿跳转问题

你遇到的动画残留问题来自SwiftUI的两个核心机制：

• SwiftUI会对同结构的视图做复用优化，当model.isPushing切换为false时，对应视图并不会被完全销毁，只是暂时从渲染树移除，之前绑定的无限重复动画会被挂起而非取消，下次视图复用时旧动画会恢复执行，和新触发的动画叠加导致跳帧、卡顿。
• 你最初实现里onAppear用showAnimation.toggle()存在状态不一致隐患，首次触发是false转true正常，但如果状态残留可能出现反向切换问题。

方案1：用id修饰符强制视图重建（推荐，纯SwiftUI实现，代码量最少） #

给需要播放动画的Image添加id修饰符，当id的值发生变化时，SwiftUI会完全销毁旧视图实例，重建全新的视图，所有旧视图绑定的动画会被彻底清除，不会有任何残留：

@StateObject var model = MyViewModel()
@State private var showAnimation = false

...

if model.isPushing {
    Button(action: {
        model.abort()
    }) {
        HStack {
            Image(systemName: "arrow.triangle.2.circlepath")
                .foregroundColor(.red)
                .rotationEffect(Angle.degrees(showAnimation ? 360 : 0), anchor: .center)
                .animation(Animation.linear(duration: 1.5).repeatForever(autoreverses: false), value: showAnimation)
                .id(UUID()) // 每次视图渲染生成新的id，强制重建，彻底清空旧动画
                .onAppear {
                    showAnimation = true
                }
                .onDisappear {
                    showAnimation = false
                }
        }
    }
}

如果不想每次都生成UUID，也可以把id绑定到model.isPushing的切换次数，效果一致。

方案2：桥接UIKit手动管理动画（适合熟悉Core Animation的开发者） #

如果你习惯Core Animation的手动控制逻辑，可以用UIViewRepresentable包装UIImageView，自己管理layer动画，完全可控：

struct RotatingIndicator: UIViewRepresentable {
    let isAnimating: Bool
    let image: UIImage?
    let color: UIColor
    
    func makeUIView(context: Context) -> UIImageView {
        let imageView = UIImageView(image: image)
        imageView.tintColor = color
        return imageView
    }
    
    func updateUIView(_ uiView: UIImageView, context: Context) {
        if isAnimating {
            // 添加新动画前先移除所有旧动画，和你Core Animation的使用习惯一致
            uiView.layer.removeAllAnimations()
            let rotation = CABasicAnimation(keyPath: "transform.rotation")
            rotation.fromValue = 0
            rotation.toValue = CGFloat.pi * 2
            rotation.duration = 1.5
            rotation.repeatCount = .infinity
            uiView.layer.add(rotation, forKey: "rotation")
        } else {
            uiView.layer.removeAllAnimations()
        }
    }
}

// 使用时的代码
if model.isPushing {
    Button(action: {
        model.abort()
    }) {
        HStack {
            RotatingIndicator(
                isAnimating: true,
                image: UIImage(systemName: "arrow.triangle.2.circlepath"),
                color: .red
            )
        }
    }
}

这个方案可以完全按照你熟悉的Core Animation逻辑控制动画，没有SwiftUI的隐式动画复用问题。

你之前设置duration: showAnimation ? 1.5 : 0的方案之所以生效，是因为当showAnimation变为false时，0时长的动画会立刻跑完所有未完成的动画循环，强行把动画状态重置到终态，本质是用动画覆盖的方式清掉旧状态，属于Hack方案，可读性和可维护性都不如上面两种方案。

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