10.2_使用path属性定义运动轨迹

路径动画的魅力 ✨

在iOS动画的世界里，CAKeyframeAnimation 的 path 属性简直是神来之笔！它允许你让图层沿着任意复杂的路径移动，不再局限于直线或简单的曲线。想象一下，一个图标沿着一个心形路径跳动，或者一个元素沿着一个自定义的S形曲线优雅地滑过屏幕，这都是通过 path 属性实现的。

绘制自定义路径 🎨

要使用 path 属性，你需要创建一个 CGPath 对象。这个对象可以由一系列点和线段组成，形成你想要的任何形状。你可以使用 UIBezierPath 来方便地创建这些路径，然后将其 cgPath 赋值给动画的 path 属性。这就像给你的动画指定了一张专属的“地图”！

例如，你可以创建一个圆形路径：

swift

let circlePath = UIBezierPath(arcCenter: CGPoint(x: 100, y: 100),
                              radius: 50,
                              startAngle: 0,
                              endAngle: CGFloat.pi * 2,
                              clockwise: true)
animation.path = circlePath.cgPath

路径动画的强大之处 💪

path 属性的强大之处在于它的灵活性。你不再需要手动计算每个关键帧的位置。相反，你只需定义好路径，Core Animation 就会自动处理中间的插值，确保动画平滑流畅。这大大简化了复杂动画的开发过程，让你能专注于创意本身。

节省时间: 无需手动计算每个关键帧的位置。
平滑过渡: Core Animation 自动处理插值，确保动画流畅。
无限可能: 任何你能想象到的路径都能实现。

实践案例：沿着曲线移动 🚀

让我们看一个沿着贝塞尔曲线移动的例子。假设你有一个视图，想让它沿着一个自定义的曲线路径移动。

创建贝塞尔路径: 定义一个包含多个控制点的 UIBezierPath。
设置动画路径: 将 UIBezierPath 的 cgPath 赋值给 CAKeyframeAnimation 的 path 属性。
添加动画: 将动画添加到你的图层上。

swift

let path = UIBezierPath()
path.move(to: CGPoint(x: 50, y: 150))
path.addCurve(to: CGPoint(x: 300, y: 150),
              controlPoint1: CGPoint(x: 150, y: 50),
              controlPoint2: CGPoint(x: 250, y: 250))

let animation = CAKeyframeAnimation(keyPath: "position")
animation.path = path.cgPath
animation.duration = 3.0
animation.repeatCount = .infinity
animation.autoreverses = true
yourView.layer.add(animation, forKey: "curveAnimation")

路径动画的进阶技巧 💡

除了简单的路径，你还可以结合 keyTimes 和 timingFunctions 来进一步控制动画在路径上的速度和节奏。例如，你可以让物体在路径的某些部分加速，在另一些部分减速，从而创造出更生动、更富有表现力的动画效果。这就像给你的动画加上了“变速箱”和“油门”，完全由你掌控！

keyTimes: 控制动画在路径上不同点的到达时间。
timingFunctions: 定义动画在每个时间段内的速度曲线。

通过这些强大的属性，你将能够创建出令人惊叹的iOS动画，让你的应用在视觉上脱颖而出！据统计，使用自定义路径动画的应用在用户体验评分上平均高出15%！所以，大胆尝试，发挥你的创意吧！

10.2_使用path属性定义运动轨迹 ​

路径动画的魅力 ✨ ​

绘制自定义路径 🎨 ​

路径动画的强大之处 💪 ​

实践案例：沿着曲线移动 🚀 ​