ios - 在 iOS 中将线弯曲成圆圈

Question

我有将直线转换为圆形的想法，但在表格 View 中拖动单元格的偏移量。

当我拖动单元格时，我希望线条围绕图像弯曲成一个圆圈。
我在下面包含了一张图片，以帮助演示具有不同阻力偏移的不同状态。

我不确定从哪里开始，正在考虑使用 UIBezierPath 进行绘制，但不确定这是否是最佳解决方案。

Answer 1

如果您希望它具有动画效果，那么您可以为您完成工作。

曲线的核心动画基于 CGPath 对象，它是 UIBezierPath 背后的底层核心基础类。

使曲线从一种形状变为另一种形状的秘诀是使用相同数量和类型的控制点。您将无法使用任何标准的圆弧或椭圆快捷方式(它们会生成看起来像圆弧的更复杂的贝塞尔曲线。)

相反，您必须从一系列链接的三次贝塞尔曲线中分段构建一个圆的近似值。您应该能够与 4 个链接的三次贝塞尔曲线相当接近，这些曲线的端点线位于圆的 N/S/E/W 罗盘点处，中间控制点在圆外均匀分布。几年前，我在网上查找了一篇关于使用贝塞尔点逼近圆的文章。我建议对此进行一些搜索。

或者，我想您可以使用 CGPath 或 UIBezier 快捷方式之一生成圆形贝塞尔曲线，然后将生成的路径解构为构成它的基元。 Erica Sadun 出色的 iOS 开发人员食谱系列包括一个食谱，展示了如何将 UIBezier 路径解构为它的原语。

一旦有了圆的一组控制点，就需要将它们重新映射到构成线条的控制点。 (贝塞尔曲线总是经过它的起点和终点，如果将三次贝塞尔曲线的内部 2 个控制点放在一条线上，它将把曲线变成一条线。)

现在您有 2 个由相同数量的贝塞尔曲线和相同数量的控制点组成的形状:一个圆和一条线。您可以通过将每个控制点移动到不同的 x/y 坐标来将线转换为圆或将圆转换为线。

然后，您也许可以在控制点的起始坐标和结束坐标之间应用线性插值。使用用户拖动表格 View 生成一个从 0 到 1 的值，并将其应用于您的插值控制点值(在 0.0 处，您的控制点将位于其“直线”位置，您的曲线将绘制为一条直线线。在 1.0 时，它们将位于圆形位置，您的曲线将绘制为圆形。在它们之间的点处，它们将是起点和终点位置之间的一小部分，您将得到一个形状那是在一条线和一个圆之间。

一旦您弄清楚如何生成控制点以创建从直线平滑移动到圆的曲线，您就可以使用 Core Animation 和 CAShapeLayer 来解决这个问题。

如果这是有道理的，那么您可能会想出如何做到这一点。如果您不知道我在说什么，那么您可能会不知所措。

(我是一名高级 Cocoa/iOS 开发人员。我已经做了很多核心动画，一旦我有了圆贝塞尔控制点开始，我可能需要 3 到 4 个小时才能得到你想要的工作.)

想想看，使用 UIView 关键帧动画可能会简单很多。这让你可以指定一组控制点，它们都位于所需的曲线上，并从这些点生成一条平滑的曲线。最好的是，它是一个 UIView 动画，它比 CAAnimation 更容易使用。

看看我的演示项目 RandomBlobs在github上。这应该让您在使用 UIView 关键帧动画方面有一个良好的开端。你想要的方法叫做 animateKeyframesWithDuration:delay:options:animations:completion: .

基于点的关键帧动画的缺点是有时你得到的曲线有你不期望或不想要的“扭结”或循环。你必须避免急转弯。不过，在绘制草图时，我认为线到圆的过渡可能适用于关键帧 View 动画。