macOS SwiftUI中onAppear触发异常动画的原因是什么？

我未更新任何会引发UI变化的值——仅更新了一个size变量——但在macOS SwiftUI中却触发了异常动画，演示如下：

问题代码示例 #

import SwiftUI

struct CanvasView: View {
    
    @State private var size: CGSize = CGSize()
    
    var body: some View {
        
        Color.yellow
            .frame(width: 500.0, height: 300.0)
            .animation(Animation.linear(duration: 2.2), value: size)
            .onAppear {
                size = CGSize(width: 500.0, height: 300.0)
            }
        
    }
    
}

原因分析 #

问题出在animation(_:value:)的作用范围：你给整个Color.yellow视图绑定了基于size的动画，虽然frame是固定值，但SwiftUI在size更新时，会尝试对视图的所有可动画属性执行过渡动画（比如背景色的淡入、视图位置的微调等）。macOS上SwiftUI的默认动画行为和iOS存在差异，这类无变更属性的动画会被异常触发。

解决办法 #

1. 仅给实际变化的属性绑定动画

如果size原本是用来控制视图尺寸的，应该把动画绑定到frame的变化上，而非整个视图：

import SwiftUI

struct CanvasView: View {
    @State private var size: CGSize = .zero
    
    var body: some View {
        Color.yellow
            .frame(width: size.width, height: size.height)
            .animation(.linear(duration: 2.2), value: size)
            .onAppear {
                size = CGSize(width: 500.0, height: 300.0)
            }
    }
}

2. 精准控制动画触发范围

如果size只是用来触发特定动画，不需要影响视图尺寸，建议使用withAnimation包裹状态更新，并仅给需要动画的属性添加修饰符：

import SwiftUI

struct CanvasView: View {
    @State private var animationTrigger = false
    
    var body: some View {
        Color.yellow
            .frame(width: 500.0, height: 300.0)
            .opacity(animationTrigger ? 1 : 0) // 仅给需要动画的属性加动画
            .animation(.linear(duration: 2.2), value: animationTrigger)
            .onAppear {
                withAnimation {
                    animationTrigger = true
                }
            }
    }
}

3. 直接禁用不必要的动画

如果不需要任何动画，可移除animation修饰符，或显式禁用该状态变化时的动画：

import SwiftUI

struct CanvasView: View {
    @State private var size: CGSize = CGSize()
    
    var body: some View {
        Color.yellow
            .frame(width: 500.0, height: 300.0)
            .animation(nil, value: size) // 禁用size变化时的动画
            .onAppear {
                size = CGSize(width: 500.0, height: 300.0)
            }
    }
}

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