SwiftUI返回重入页面后自定义动画失效问题求助

问题原因 #

你的CircularView依赖@State变量scale触发动画：第一次进入时，onAppear将scale从初始值1.0改为0.5，触发重复动画。但SwiftUI会缓存部分视图实例，当你返回再进入时，scale的值已经是0.5，再次调用withAnimation修改它为同一个值，没有状态变化，因此动画不会重新启动。

而系统的ProgressView内部独立管理动画状态，每次视图出现都会重新初始化动画，所以不受此问题影响。

解决方案 #

方案1：离开视图时重置状态

在CircularView中添加onDisappear回调，重置scale的初始值，确保下次进入时能再次触发状态变化：

struct CircularView: View {
    @State var scale = 1.0

    var body: some View {
        Circle()
            .frame(width: 200, height: 200)
            .scaleEffect(scale)
            .onAppear {
                let baseAnimation = Animation.easeInOut(duration: 1)
                let repeated = baseAnimation.repeatForever(autoreverses: true)

                withAnimation(repeated) {
                    scale = 0.5
                }
            }
            .onDisappear {
                // 重置scale为初始值
                scale = 1.0
            }
    }
}

方案2：进入时强制重置状态

如果不想依赖onDisappear，可以在onAppear中先同步重置scale，再启动动画：

struct CircularView: View {
    @State var scale = 1.0

    var body: some View {
        Circle()
            .frame(width: 200, height: 200)
            .scaleEffect(scale)
            .onAppear {
                // 先强制重置初始值，再触发动画
                scale = 1.0
                let baseAnimation = Animation.easeInOut(duration: 1)
                let repeated = baseAnimation.repeatForever(autoreverses: true)

                withAnimation(repeated) {
                    scale = 0.5
                }
            }
    }
}

补充说明 #

SwiftUI的@State变量与视图实例绑定，只要视图没有被完全销毁（比如NavigationSplitView的detail视图被缓存复用），@State的值会被保留。这是SwiftUI优化视图性能的特性，并非bug，只需根据场景手动管理状态的重置即可。

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