以流体/粗直的冲程画圈

时间:2018-06-25 10:51:21

标签: ios uibezierpath cadisplaylink

我和我的团队正在为客户开发应用程序。我们正在尝试了解如何实现这种动画(仅指圆圈笔划):

enter image description here

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

关于如何实现这种效果或如何从分离的点构建圆的任何建议都将得到广泛应用

最好的问候
ROI和团队

1 个答案:

答案 0 :(得分:3)

我建议使用Catmull-Rom样条曲线。这些使您可以仅使用曲线上的点来创建平滑曲线,而Bezier曲线要求您定义不在曲线上的控制点。

一旦CGPath开始和结束,就很容易创建从开始到结束状态的路径CAAnimation(尽管动画更改为CGPath只能正常工作如果动画中的开始和结束路径具有相同的点数和类型。)

您可能还可以使用Bezier曲线,但是您需要为圆及其扭曲的形状生成控制点。

请查看使用Catmull-Rom样条曲线创建变形圆形的示例应用程序:

http://wareto.com/animating-shapes-using-cashapelayer-and-cabasicanimation

(用Objective-C编写,但该技术在Swift中是相同的。)

enter image description here

具有8个控制点的Catmull-Rom样条围绕一个圆均匀分布,该圆与每个控制点中心的距离相差±r / 12似乎是正确的:

enter image description here