动画(二) – 控制动画

在 SwiftUI 中，有多种⽅式可以指定动画发⽣地时机

1. 当某个特定的值改变时，触发隐式动画。
2. 当某个特性事件发⽣时，触发显示动画。

动画类型

隐式动画

要指定隐式动画，可以在视图树的任意位置使⽤ .animation(_:value:) 视图修饰符。这个⽅法有两个参数：第⼀个参数指定动画所使⽤的时间曲线，第⼆个参数指定触发动画所需要修改的值。这个 value 参数⽤来限定动画的范围，让动画只在特定的值被更改时才发⽣。

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

使⽤ .animation 视图修饰符的隐式动画会使视图⼦树中的所有内容都进⾏动画处理，因此将修饰符放在正确的位置就⾮常重要。

.animation(_:body:) 修饰符可以将隐式动画限定在特定的修饰符中，如下所示

Text("Hello, World!")
    .opacity(flag ? 1 : 0)
    .animation(.default) {
        $0.rotationEffect(flag ? .zero : .degrees(90))
    }

在 flag 值更改时，只对旋转效果进⾏动画，⽽不对透明度进⾏动画。

显示动画

可以将⼀个动画限定在某个特定的状态改变上，我们把它称为 显式动画。

一般显示动画

下面的示例，使⽤的 withAnimation 修饰符创建了⼀个显式动画。

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()
                }
            }
    }
}

绑定显示动画

可以在⼀个绑定值上调⽤ .animation，从⽽把绑定值的 setter 包装到⼀个显式动画⾥。

struct ToggleRectangle: View {
    @Binding var flag: Bool
    
    var body: some View {
        Rectangle()
            .frame(width: flag ? 100: 50, height: 50)
            .onTapGesture { flag.toggle() }
    }
}

struct ContentView: View {
    @State private var flag = false
    
    var body: some View {
        ToggleRectangle(flag: $flag.animation(.default))
    }
}

时间曲线

SwiftUI 内置了所有常⻅的动画时间曲线，⽐如线性 (linear)、渐⼊ (ease-in)、渐出 (ease-out) 和弹簧 (spring) 等时间曲线。所有动画 API 都拥有⼀个⽤来指定时间曲线的参数，在省略该参数的时候，调⽤会回退到使⽤默认的时间曲线。

• .speed(_:) 让我们可以通过⼀个系数来减慢或加快动画的速度。
• .delay(_:) 让我们可以通过固定的时间来推迟动画的开始。
• .repeatCount(_:autoreverses:) 让我们可以将动画循环播放指定的次数。

如果内置的时间曲线不能满⾜我们的需求，我们可以使⽤在 iOS 17 中引⼊的 CustomAnimation 协议来实现完全⾃定义的时间曲线。

---

参考《Thinking In SwiftUI》