SwiftUI多个带延迟动画同步问题：切后台后偏移失效如何解决？

问题原因 #

原有实现依赖每个视图独立的动画延迟属性，应用进入后台时系统会主动暂停所有在运行的动画，恢复前台时动画会从暂停状态恢复，但初始设置的延迟偏移量会被系统重置，最终所有动画失去相位差同步运行。

最优解决方案 #

抛弃独立视图的状态驱动动画方案，改用统一系统时间基准计算所有元素的实时进度，从根源上避免状态丢失导致的相位偏移问题。这里可以直接使用SwiftUI自带的TimelineView实现，无需手动管理计时器或动画状态：

import SwiftUI

struct MyRepeatingItemView: View {
    // 每个元素的相位偏移量，单位秒
    var phaseOffset: Double
    // 动画总周期
    let totalDuration: Double = 4
    
    var body: some View {
        // 直接通过Timeline的当前时间计算实时缩放值
        TimelineView(.animation(minimumInterval: 0.05, paused: false)) { timeline in
            let currentTime = timeline.date.timeIntervalSinceReferenceDate
            // 计算当前元素的归一化进度，范围0~1
            let progress = (currentTime + phaseOffset).truncatingRemainder(dividingBy: totalDuration) / totalDuration
            
            Color.red
                .opacity(0.2)
                .frame(width: 256, height: 256)
                .scaleEffect(progress == 0 ? 0.01 : progress)
        }
    }
}

struct MyRepeatingContainerView: View {
    var body: some View {
        ZStack {
            Color.blue
                .frame(width: 256, height: 2)
            Color.blue
                .frame(width: 2, height: 256)
            // 四个元素分别设置0/1/2/3秒的相位偏移
            MyRepeatingItemView(phaseOffset: 0.0)
            MyRepeatingItemView(phaseOffset: 1.0)
            MyRepeatingItemView(phaseOffset: 2.0)
            MyRepeatingItemView(phaseOffset: 3.0)
        }
    }
}

方案优势 #

1. 所有元素的进度完全基于系统时间计算，切后台、前后台切换、视图销毁重建都不会丢失相位差，永久保持同步
2. 不需要管理任何动画状态、计时器，代码逻辑更简洁
3. 可以随时调整相位偏移、总周期等参数，不需要重新启动动画

如果需要保留原有状态驱动的实现方式，也可以在容器层监听应用进入前台的通知，每次前台恢复时重置所有子视图的isTranslated状态，重新启动带延迟的动画，不过这种方案稳定性低于TimelineView方案，可能会出现动画重启的闪烁。

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