部分iPhone设备中SwiftUI动画出现闪烁问题求助

问题现象 #

该动画在多数设备运行正常，但部分iPhone设备中出现闪烁现象：

• 闪烁状态：动画元素出现不规则频闪、跳变，无法平滑执行
• 正常idle状态：波纹动画平滑展开并消失

代码问题分析 #

从提供的实现代码来看，可能的触发原因包括：

1. 重复创建完全相同的Circle视图，导致渲染管线在部分设备上出现冲突
2. 同时对frame和opacity属性应用动画，触发SwiftUI双重布局/渲染更新，引发闪烁
3. 全局动画（ZStack上的.animation）与局部动画叠加，导致动画优先级混乱
4. 自定义rippleAnimation若存在无限重复或状态残留，会在部分iOS版本触发渲染异常

具体修复步骤 #

1. 合并重复的Circle视图 #

将两个功能一致仅延迟不同的Circle合并为循环创建，减少重复渲染压力：

ZStack {
    // ... 其他视图保持不变
    
    // 替换原有的两个Circle为以下代码
    ForEach(0..<2) { index in
        Circle()
            .stroke(Color.white, lineWidth: 2)
            .frame(width: viewModel.timerOnAnimState ? width() - 32 : width() / 2,
                   height: viewModel.timerOnAnimState ? width() - 32 : width() / 2)
            .opacity(viewModel.timerOnAnimState ? 0 : 0.6)
            .animation(
                viewModel.timerOnAnimState ? rippleAnimation.delay(Double(index) * 2.0) : .default,
                value: viewModel.timerOnAnimState
            )
    }
    
    // ... 其他视图保持不变
}
// 移除ZStack末尾的全局动画：.animation(.default, value: state)

2. 分离frame与opacity的动画 #

避免同时对两个属性应用动画，拆分动画作用范围：

Circle()
    .stroke(Color.white, lineWidth: 2)
    // 仅对frame应用默认动画
    .frame(width: viewModel.timerOnAnimState ? width() - 32 : width() / 2,
           height: viewModel.timerOnAnimState ? width() - 32 : width() / 2)
    .animation(.easeInOut, value: viewModel.timerOnAnimState)
    // 对opacity单独应用波纹动画
    .opacity(viewModel.timerOnAnimState ? 0 : 0.6)
    .animation(
        viewModel.timerOnAnimState ? rippleAnimation.delay(2.0) : .default,
        value: viewModel.timerOnAnimState
    )
    .compositingGroup() // 强制图层合并

3. 移除全局动画，改用局部精准动画 #

全局动画易引发意外的状态更新，仅在需要动画的视图上单独添加：

// 原ZStack的全局动画移除，改为在需要的视图上添加
Circle()
    .fill(Color.white.opacity(0.6))
    .frame(width: state == .paused ? 0 : width() / 2,
           height: state == .paused ? 0 : width() / 2)
    .animation(.easeInOut(duration: 0.3), value: state) // 明确指定动画曲线与时长

4. 优化自定义波纹动画 #

确保动画为一次性执行，避免无限循环导致的状态残留：

// 示例：定义明确的一次性波纹动画
let rippleAnimation = Animation.easeOut(duration: 2.0)
// 若需要重复，建议通过viewModel的状态控制，而非动画本身无限重复

5. 添加渲染优化标记 #

对动画视图添加.compositingGroup()或.drawingGroup()，强制合并图层渲染：

Circle()
    .stroke(Color.white, lineWidth: 2)
    .frame(...)
    .opacity(...)
    .animation(...)
    .compositingGroup() // 解决部分设备的渲染闪烁问题

6. 版本兼容性适配 #

若问题仅出现在特定iOS版本（如iOS 15.x部分小版本），可针对性调整：

// 示例：对iOS 15及以下版本禁用部分动画
if #available(iOS 16.0, *) {
    Circle()
        .animation(rippleAnimation.delay(2.0), value: viewModel.timerOnAnimState)
} else {
    Circle()
        .animation(.easeOut(duration: 2.0).delay(2.0), value: viewModel.timerOnAnimState)
}

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