在iOS中曲线线圈成圆圈

Question

我有这样的想法，即将直线转换为圆形，但是在表格视图中将单元格拖动的偏移量。

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

我不知道从哪里开始，想到可能使用UIBezierPath绘制但不确定这是否是最佳解决方案。

Answer 1

如果你想要它的动画，那么你就可以为你完成工作了。

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

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

相反，您必须从连续的三次贝塞尔曲线系列中逐段建立一个圆的近似值。你应该能够得到相当接近的4个连接的三次贝塞尔曲线，它们的终点线位于圆的N / S / E / W罗盘点，中间控制点在圆外均匀分布。几年前，我在网上查了一篇文章，用贝塞尔点来近似圆圈。我建议做一些搜索。

或者，我猜你可以使用一个CGPath或UIBezier快捷方式生成一个圆形贝塞尔曲线，然后将生成的路径解构为构成它的基元。 Erica Sadun出色的iOS开发者手册系列包括一个配方，展示了如何解构UIBezier路径到它的基元。

一旦你有一组圆的控制点，你需要将它们重新映射到构成你的线的控制点。 （Bezier曲线总是通过它的起点和终点，如果你将Cubic Bezier的内部2个控制点放在一条直线上，它会将曲线变成一条直线。）

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

然后，您可以在控制点的起始坐标和结束坐标之间应用线性插值。使用用户对表格视图的拖动生成0到1之间的值，并将其应用于插值控制点值（0.0，您的控制点将位于＆＃34;直线＆＃34;位置和你的曲线将绘制成一条直线。在1.0时，它们位于它们的圆形位置，你的曲线将绘制成一个圆形。在它们之间的点上，它们只是它们之间的一小部分。他们的开始和结束位置，你得到一个线和圆之间的形状。

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

如果这有意义，那么你可能会弄清楚如何做到这一点。如果你不知道我在谈论什么，你可能会在你头上。

（我是高级Cocoa / iOS开发人员。我已经完成了很多Core Animation，一旦我有了这个圈子，我可能需要3到4个小时才能得到你的工作bezier控制点从开始。）

想想看，使用UIView关键帧动画可能要简单得多。这允许你指定一个控制点数组，ALL位于所需的曲线上，并从这些点生成一条平滑的曲线。最好的是，它是一个UIView动画，比CAAnimation更容易使用。 / p>

在github上查看我的演示项目RandomBlobs。这应该可以让您在使用UIView关键帧动画方面领先一步。您想要的方法称为animateKeyframesWithDuration:delay:options:animations:completion:。

基于点的关键帧动画的缺点是，有时候你得到的曲线会扭曲＆＃34;扭曲＆＃34;或者你不希望或想要的循环。你必须避免急剧弯曲。不过，在草拟它时，我认为线到圆的过渡可能适用于关键帧视图动画。