带有流体/弹性笔画的圆圈答案

【问题标题】：Circle with fluid/strechy stroke带有流体/弹性笔画的圆圈
【发布时间】：2018-06-25 10:51:20
【问题描述】：

我和我的团队正在为客户开发一款应用。我们正在尝试了解如何实现这种动画（仅指圆形笔划）：

我们尝试使用CADisplayLink 来设置和更改圆圈，但它产生了非流畅的结果。我们找不到从UIBezierPath 的“组件”创建一个圆圈并更改每个锚点的方法。

任何关于如何实现这种效果的建议，或者如何从分离的点构造一个圆，都将受到高度评价

最好的问候，
Roi 和团队

【问题讨论】：

【解决方案1】：

我建议使用 Catmull-Rom 样条。这些允许您仅使用曲线上的点创建平滑曲线，而贝塞尔曲线要求您定义不在曲线上的控制点。

一旦你有了开始和结束CGPaths，就很容易创建一个从它开始到结束状态的路径的CAAnimation（尽管动画更改为CGPath只有在开始和结束路径时才能正常工作在动画中具有相同数量和类型的点。）

您可能还可以使用贝塞尔曲线，但您需要为圆生成控制点，并且它的形状是扭曲的。

查看这个使用 Catmull-Rom 样条线创建扭曲圆形的示例应用：

（用 Objective-C 编写，但技术与 Swift 相同。）

一个带有 8 个控制点的 Catmull-Rom 样条线均匀分布在一个圆上，每个控制点到中心的距离变化 ± r/12 似乎是正确的：

【讨论】：

完美的邓肯。感谢您提供此答案。非常感谢朋友。
Duncan，我实际上花了几个小时尝试将您的（很棒！）示例转换为我想要实现的目标，它看起来很完美！当它准备好发布时，我一定会寄给你一个样品（如果你愿意的话）。再次感谢您的无价帮助！
@RoiMulia 我很想看看。你以前用过 CAAnimation 吗？
我做了，但任务要简单得多。顺便说一句，我找到了一种使用 UIBezierPath （部分）实现这一目标的方法。您从 4 弧构建一个圆，并使用 sin(x) 和 cos(x) 的公式更改控制点来制作动画。我将使用这两种解决方案制作一个项目并将其发送给您。有趣的方法:)
有道理。通过我的示例中的工作，您是在 Objective-C 中使用它还是将其转换为 Swift？我有大量用 Objective-C 编写的有用代码，但我没有时间转换，这只是一个例子。