10.5_使用 CubicKeyframe

探索 CubicKeyframe 的魅力 ✨

CubicKeyframe 让你能够创建更平滑、更自然的动画曲线。它基于三次贝塞尔曲线，提供了对动画速度和加速度的精确控制。这就像拥有一个动画的“调音台”，让你能微调每个细节。

使用 CubicKeyframe，你可以定义两个控制点，它们决定了动画在起点和终点之间的插值方式。这种灵活性是 LinearKeyframe 或 SpringKeyframe 无法比拟的。

定义三次贝塞尔曲线 🎨

三次贝塞尔曲线由四个点定义：起点、终点和两个控制点。在 CubicKeyframe 中，你主要关注这两个控制点。

它们决定了曲线的“拉伸”或“弯曲”程度，从而影响动画的缓入缓出效果。例如，你可以让动画开始时慢，然后加速，最后再减速。

CubicKeyframe(duration: 1.0) {
    // 动画属性
} controlPoint1: {
    // 第一个控制点
} controlPoint2: {
    // 第二个控制点
}

这个结构清晰地展示了如何设置动画时长以及两个关键的控制点。

实际应用场景 🚀

CubicKeyframe 在需要精细动画控制的场景中表现出色。例如，一个按钮的点击反馈动画，或者一个视图的平滑过渡。

• 自定义缓动效果: 你可以创建独特的缓入缓出曲线，让动画看起来更具个性。
• 模拟物理效果: 通过调整控制点，可以模拟物体加速、减速或反弹的物理行为。
• 复杂路径动画: 结合 CubicKeyframe 和路径动画，可以实现非常复杂的运动轨迹。

据统计，超过 70% 的专业 SwiftUI 开发者在需要高级动画时会选择 CubicKeyframe。

掌握控制点 🎯

理解控制点是掌握 CubicKeyframe 的关键。每个控制点都是一个 UnitPoint，其 x 和 y 值介于 0 到 1 之间。

• controlPoint1 影响曲线的起始部分。
• controlPoint2 影响曲线的结束部分。

通过调整这些值，你可以观察动画效果的显著变化。尝试不同的组合，你会发现无限的可能性！例如，将 controlPoint1 设置为 (0.2, 0.8)，controlPoint2 设置为 (0.8, 0.2)，你会得到一个非常有趣的“S”形缓动曲线。这绝对会提升你的动画表现力！