10.2_定义关键帧轨道 KeyframeTrack

关键帧轨道 KeyframeTrack 详解 🚀

在 SwiftUI 动画中，KeyframeTrack 扮演着至关重要的角色。它就像动画的蓝图，定义了属性在不同时间点的变化。你可以把它想象成一条时间线，上面标注了动画的关键帧。通过 KeyframeTrack，你可以精确控制动画的每一个细节，创造出令人惊艳的视觉效果。

创建 KeyframeTrack 🛠️

要创建一个 KeyframeTrack，你需要指定要动画化的属性类型。例如，如果你想动画化一个视图的 scale 属性，你可以创建一个 KeyframeTrack<CGFloat>。然后，你可以使用 LinearKeyframe、SpringKeyframe 或 CubicKeyframe 等方法向轨道添加关键帧。

KeyframeTrack<CGFloat> {
    LinearKeyframe(value: 1.0, time: 0)
    LinearKeyframe(value: 2.0, time: 0.5)
    LinearKeyframe(value: 1.0, time: 1)
}

上面的代码创建了一个 KeyframeTrack，它将 scale 属性从 1.0 线性变化到 2.0，然后在 0.5 秒时回到 1.0。

关键帧类型 🖼️

SwiftUI 提供了多种关键帧类型，每种类型都有不同的动画效果。

• LinearKeyframe: 提供线性动画，属性值以恒定速率变化。
• SpringKeyframe: 模拟弹簧效果，属性值在目标值附近振荡。
• CubicKeyframe: 使用三次贝塞尔曲线定义动画，提供更平滑、更自然的动画效果。

选择哪种关键帧类型取决于你想要达到的动画效果。例如，如果你想要一个平滑的动画，可以使用 CubicKeyframe。如果你想要一个弹簧效果，可以使用 SpringKeyframe。

应用 KeyframeTrack 🎬

创建好 KeyframeTrack 后，你需要将其应用到视图的属性上。你可以使用 keyframeAnimator 修饰符来实现这一点。

Rectangle()
    .fill(.red)
    .frame(width: 100, height: 100)
    .keyframeAnimator(initialValue: 1.0, trigger: isAnimating) { view, value in
        view.scaleEffect(value)
    } keyframes: {
        KeyframeTrack<CGFloat> {
            LinearKeyframe(value: 1.0, time: 0)
            LinearKeyframe(value: 2.0, time: 0.5)
            LinearKeyframe(value: 1.0, time: 1)
        }
    }

在这个例子中，keyframeAnimator 修饰符将 KeyframeTrack 应用到 Rectangle 的 scaleEffect 属性上。当 isAnimating 为 true 时，动画将开始播放。

更多技巧和提示 ✨

• 你可以使用多个 KeyframeTrack 来同时动画化多个属性。
• 你可以使用 delay 参数来延迟动画的开始时间。
• 你可以使用 repeatCount 参数来指定动画的重复次数。
• 你可以使用 autoreverses 参数来使动画在结束时反向播放。

掌握 KeyframeTrack 的使用，你就能创造出各种各样令人惊艳的 SwiftUI 动画。 祝你动画之旅愉快！🎉