动画(一) – 属性动画

在 SwiftUI 中，修改状态是唯⼀能触发视图更新的⼿段。默认情况下，旧视图树与新视图树之间的更改不会进⾏动画处理。
对那些在视图树中已经存在，且在状态变化前后属性也相应改变的视图，属性动画会为它们进⾏插值。视图的属性发⽣了变化，但是在屏幕上的那个视图本身并没有改变。

struct ContentView: View {
    @State private var flag = false
    
    var body: some View {
        Rectangle()
            .frame(width: flag ? 100: 50, height: 50)
            .onTapGesture {
                withAnimation(.linear) {
                    flag.toggle()
                }
            }
    }
}

点击的动画效果，如下图所示

动画的执行过程，如下图所示

当⽤户⾸次点击矩形时，flag 状态会从 false 变为 true，body 将会被重新执⾏。新的视图树依然拥有相同的结构，frame 的宽度从 50 变为了 100。由于状态变化的代码被包围在了⼀个 withAnimation { … } 调⽤中，SwiftUI 将会对⽐新的视图树和当前的渲染树，并寻找那些可以被动画的变更。因为 frame 的宽度是⼀个可动画的属性 (其实⼏乎所有的视图修饰器的参数都是⽀持动画的)，withAnimation 调⽤中指定的时间曲线 .linear 会被⽤来为动画⽣成从 0 到 1 的进度值。这些进度值将被⽤作关键点，来把矩形从 50 的旧宽度插值渐变到 100 这个新宽度。

---

参考《Thinking In SwiftUI》