创建自定义 Animatable 协议动画

探索 Animatable 协议的奥秘 🚀

想让你的 SwiftUI 动画更上一层楼吗？✨ Animatable 协议就是你的秘密武器！它允许你定义如何平滑地改变自定义数据类型，从而创建出令人惊叹的动画效果。准备好深入了解了吗？让我们一起开始吧！

Animatable 协议：动画的基石

Animatable 协议的核心在于 animatableData 属性。这个属性必须是符合 VectorArithmetic 协议的类型，例如 Double、CGFloat 或 CGPoint。当你改变一个视图的 animatableData 时，SwiftUI 会自动在起始值和目标值之间进行插值，从而产生动画效果。

• VectorArithmetic: 确保你的数据类型支持加法和标量乘法。
• 插值: SwiftUI 会自动计算中间值，让动画流畅自然。
• 自定义: 你可以控制动画的每一个细节！

实战演练：创建自定义动画

让我们通过一个例子来理解如何使用 Animatable 协议。假设你想创建一个可以平滑改变半径的圆形。你可以创建一个自定义的 Animatable 结构体，并让它的 animatableData 属性是半径。

struct AnimatableCircle: Shape {
    var radius: CGFloat

    var animatableData: CGFloat {
        get { radius }
        set { radius = newValue }
    }

    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.addArc(center: CGPoint(x: rect.midX, y: rect.midY), radius: radius, startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 360), clockwise: true)
        return path
    }
}

现在，你可以使用 .animation() 修饰符来触发动画。例如：

AnimatableCircle(radius: isExpanded ? 100 : 50)
    .animation(.spring(), value: isExpanded)

进阶技巧：更复杂的动画

Animatable 协议不仅仅适用于简单的数值类型。你可以使用 AnimatablePair 来组合多个值，或者创建更复杂的自定义数据类型。例如，你可以创建一个包含颜色和半径的结构体，并让它们同时进行动画。

• AnimatablePair: 用于组合两个符合 Animatable 协议的值。
• 自定义数据类型: 创建你自己的结构体或类，并让它们符合 Animatable 协议。
• 无限可能: 只要你的数据类型符合 VectorArithmetic 协议，你就可以创建任何你想要的动画！

掌握 Animatable 协议，你就能创造出令人惊叹的 SwiftUI 动画效果。大胆尝试，发挥你的创造力吧！🎉