11.2_使用 animatableData 动画化自定义形状

探索 animatableData 的魔力 ✨

在 SwiftUI 中，Shape 协议本身并不直接支持动画。但别担心，animatableData 属性就是你的秘密武器！它允许你将任何自定义形状的属性转换为可动画的数据。这真是太棒了，不是吗？

Animatable 协议的核心作用

要让你的自定义形状动起来，你需要让它遵循 Animatable 协议。这个协议只有一个要求：实现 animatableData 属性。这个属性的类型必须是 AnimatablePair 或任何遵循 VectorArithmetic 协议的类型。

例如，你可以用它来动画化一个自定义的星形。想象一下，星星的尖角数量可以平滑地从3个变为5个，是不是很酷？

struct Star: Shape {
    var points: Double

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

    func path(in rect: CGRect) -> Path {
        // 路径绘制逻辑
        // ...
    }
}

构建可动画的自定义形状

当你定义一个自定义形状时，通常会包含一些属性来控制其外观。例如，一个圆角矩形可能有 cornerRadius 属性。通过将这些属性绑定到 animatableData，你可以轻松地实现动画效果。

你可以使用 AnimatablePair 来组合多个可动画的属性。比如，一个自定义的“心形”可能需要动画化它的宽度和高度。

struct Heart: Shape {
    var width: Double
    var height: Double

    var animatableData: AnimatablePair<Double, Double> {
        get { AnimatablePair(width, height) }
        set {
            width = newValue.first
            height = newValue.second
        }
    }

    func path(in rect: CGRect) -> Path {
        // 心形绘制逻辑
        // ...
    }
}

实践 animatableData 的动画效果

一旦你的自定义形状遵循了 Animatable 协议并实现了 animatableData，你就可以像动画化任何其他 SwiftUI 视图一样动画化它了。只需使用 .animation() 修饰符，并改变形状的属性值。

例如，你可以创建一个按钮，点击时改变星星的尖角数量。用户会看到一个平滑的过渡，而不是突然的变化。这种流畅的用户体验会让他们感到惊喜！

struct ContentView: View {
    @State private var starPoints: Double = 5

    var body: some View {
        VStack {
            Star(points: starPoints)
                .frame(width: 200, height: 200)
                .foregroundColor(.yellow)
                .animation(.easeInOut(duration: 1.0), value: starPoints) // 动画修饰符

            Button("改变星星尖角") {
                starPoints = starPoints == 5 ? 8 : 5
            }
        }
    }
}

通过这种方式，你可以为你的应用程序带来令人惊叹的视觉效果。自定义形状的动画化能力极大地扩展了 SwiftUI 动画的可能性。快去尝试一下，创造出你自己的独特动画吧！🚀