SwiftUI 动画指南：揭开 Animatable 的奥秘

2024-02-17 19:49:00

SwiftUI 动画入门：探索 Animatable

欢迎来到 SwiftUI 动画世界的开篇之旅！SwiftUI 以其简化动画流程的能力而备受赞誉，让你可以轻松为你的应用程序注入生机和动感。在这个系列文章的第一部分中，我们将深入了解 Animatable，SwiftUI 动画中不可或缺的基础。

1. 显式动画与隐式动画

在 SwiftUI 中，动画分为两种主要类型：显式动画和隐式动画。

显式动画 需要明确指定动画的开始和结束时间，以及要执行的动画类型。这通常使用 animation() modifier 来实现，该 modifier 接受一个 Animation 对象作为参数。Animation 对象定义了动画的持续时间、延迟、阻尼系数和动画类型。

隐式动画 不需要显式指定动画时间线。相反，SwiftUI 会在属性更改时自动执行动画。这种类型的动画通常用于过渡、视图状态更改和手势交互。

2. Animatable 和动画时间线

Animatable 协议是 SwiftUI 动画的核心。它定义了可以被动画的属性类型。任何遵循 Animatable 协议的属性都可以使用动画修改器进行动画处理。

SwiftUI 提供了一个默认的时间线，可用于所有隐式动画。不过，你可以使用显式动画自定义动画时间线。Animation 对象提供了一些有用的属性，例如 duration（持续时间）、delay（延迟）和 animation（动画类型）。

3. 过渡效果

过渡效果是 SwiftUI 动画的另一个强大工具。它们可以让你在视图之间平滑地切换，并为你的应用程序增添视觉趣味。SwiftUI 提供了各种内置过渡效果，例如 fade、move 和 scale。

要应用过渡效果，只需在视图中使用 transition() modifier，并指定所需的过渡类型。transition() modifier 接受一个 AnyTransition 值作为参数。

4. 自定义动画

除了内置的动画功能之外，你还可以创建自定义动画来实现更复杂的效果。要创建自定义动画，需要实现 AnimatableModifier 协议。

AnimatableModifier 协议要求你实现两个方法：body(content:) 和 apply(content:transaction:)。body(content:) 方法返回修改后的视图，apply(content:transaction:) 方法在动画期间更新视图的状态。

5. 实例代码

以下示例演示了如何使用 SwiftUI 创建自定义动画：

struct MyCustomAnimation: AnimatableModifier {
    var angle: Double

    var animatableData: Double {
        get { angle }
        set { angle = newValue }
    }

    func body(content: Content) -> some View {
        content
            .rotationEffect(.degrees(angle))
    }
}

struct ContentView: View {
    @State private var angle = 0.0

    var body: some View {
        VStack {
            Button("Animate") {
                withAnimation(.easeInOut(duration: 1)) {
                    angle = 360
                }
            }

            Image(systemName: "sun.min")
                .modifier(MyCustomAnimation(angle: angle))
        }
    }
}