高级 SwiftUI 动画 —— 第三部分：AnimatableModifier

2023-09-30 12:22:19

序言

欢迎来到高级 SwiftUI 动画教程的第三部分，我们将在本部分探讨 AnimatableModifier 的强大功能。AnimatableModifier 是 SwiftUI 中一个鲜为人知但功能强大的工具，它使我们能够创建自定义动画过渡，将我们的应用程序提升到一个新的水平。

什么是 AnimatableModifier？

AnimatableModifier 是一个遵从 AnimatableModifier 协议的结构体，该协议允许我们为 SwiftUI 视图定义自定义动画。通过实现协议中声明的 body(content:) 方法，我们可以控制视图在动画过程中如何变化。

实现 AnimatableModifier

为了实现我们自己的 AnimatableModifier，我们需要遵循以下步骤：

创建一个新的结构体，并使其遵从 AnimatableModifier 协议。
在 body(content:) 方法中，指定视图在动画过程中如何变化。
返回修改后的视图。

以下是一个示例代码段，演示了如何实现 AnimatableModifier：

struct MyAnimatableModifier: AnimatableModifier {
    var value: CGFloat
    
    var body(content: Content) -> some View {
        content.rotationEffect(.degrees(value))
    }
}

在这个示例中，MyAnimatableModifier 接受一个 value 参数，它控制了视图的旋转量。通过更改 value，我们可以控制视图在动画过程中的旋转行为。

应用 AnimatableModifier

一旦我们实现了 AnimatableModifier，就可以将其应用于 SwiftUI 视图。以下是如何做到这一点：

struct ContentView: View {
    @State private var value: CGFloat = 0
    
    var body: some View {
        Circle()
            .fill(Color.red)
            .frame(width: 100, height: 100)
            .modifier(MyAnimatableModifier(value: value))
    }
}