将任意形状的 CGPath 动画化为矩形

【问题标题】：Animating arbitrarily-shaped CGPath to rectangle将任意形状的 CGPath 动画化为矩形
【发布时间】：2013-03-24 07:56:01
【问题描述】：

我正在使用CAShapeLayer 来显示一条路径，该路径会随着用户在屏幕上追踪他/她的手指而更新。我想将此路径转换为仅包含路径的矩形。我可以很好地计算矩形；棘手的部分是动画转换。

文档说这是关于为CAShapeLayer 的path 属性设置动画：

如果两条路径具有不同数量的控制点或线段，则结果未定义。

那么我该如何向矩形CGPath 添加更多控制点呢？或者有没有更好的方法来实现这个动画？谢谢。 =)

【问题讨论】：

【解决方案1】：

我认为您必须手动构建一系列矩形形式的线。遍历路径中的元素，计算您希望该点转换到的边界矩形上的位置，并将该段添加到新的矩形路径中。您可能必须使用相同类型的元素（例如，恰好形成一条直线的三次或二次贝塞尔曲线），以便控制点的数量匹配。

动画完成后，您可以根据需要将路径重置为纯矩形。

【讨论】：

谢谢！如何“计算您希望该点转换到的边界矩形上的哪个位置”？
这是一个设计选择。您可以将任何给定点水平或垂直平移到最近的边缘。您可以将每个点沿径向远离中心平移，直到它与边缘相交。您可以简单地计算路径的元素，并将假设的矩形大致相等地划分为相同数量的部分，并将每个元素映射到一个部分。等等。您的选择将准确影响路径的动画效果。换句话说，没有一种正确的方法可以将任意路径逐渐转换为矩形。