SwiftUI多属性控制的动画不运行或渲染异常问题

问题原因 #

• 动画触发监听不完整：你给animation修饰符设置的监听值只有toggle1IsOn，只有修改第一个开关时，系统才会重新计算动画配置。如果最后打开的是第二个或第三个开关来触发全部开启的条件，系统不会感知到需要切换为无限重复动画，就会出现动画不启动的问题。
• 颜色插值异常：你在切换矩形填充色的同时切换了动画类型，SwiftUI对Color类型做动画过渡时，状态错位会导致中间计算出不属于绿色、灰色的异常紫色，这是SwiftUI的系统级颜色插值bug，在同时修改动画配置和动画属性时极易复现。

修复方案 #

可以先单独声明一个计算属性判断三个开关是否全部开启，把动画的监听值绑定到这个计算属性上，同时把闪烁逻辑从颜色切换改为透明度动画，避免颜色插值问题，参考实现如下：

struct ContentView: View {
    @State var toggle1IsOn = false
    @State var toggle2IsOn = false
    @State var toggle3IsOn = false

    // 单独声明全开启判断变量
    private var allTogglesOn: Bool {
        toggle1IsOn && toggle2IsOn && toggle3IsOn
    }

    var body: some View {
        VStack {
            Toggle("Toggle 1", isOn: $toggle1IsOn)
            Toggle("Toggle 2", isOn: $toggle2IsOn)
            Toggle("Toggle 3", isOn: $toggle3IsOn)

            ZStack {
                // 底层固定灰色，避免切换时的颜色插值
                Rectangle()
                    .fill(Color.gray)
                // 上层绿色矩形用透明度控制显隐和闪烁
                Rectangle()
                    .fill(Color.green)
                    .opacity(allTogglesOn ? 1 : 0)
                    .animation(
                        allTogglesOn ? .default.repeatForever(autoreverses: true) : .default,
                        value: allTogglesOn // 监听全开启状态，任意开关变化都会触发更新
                    )
            }
        }
    }
}

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