具有流畅/弹性笔画的圆圈

Roi*_*lia 1 ios cadisplaylink uibezierpath

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

在此输入图像描述

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

任何有关如何实现这种效果或如何从单独的点构建圆的建议都将受到高度重视

谨致问候,
Roi 和团队

Dun*_*n C 5

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

\n\n

一旦你有了开始和结束CGPath,就很容易创建CAAnimation从开始到结束状态的路径(尽管动画更改只有CGPath在动画中的开始和结束路径具有相同的情况下才能正确工作)点的数量和类型。)

\n\n

您也可以使用贝塞尔曲线,但您需要生成圆及其扭曲形状的控制点。

\n\n

查看此示例应用程序,它使用 Catmull-Rom 样条线创建扭曲的圆形:

\n\n

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

\n\n

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

\n\n

在此输入图像描述

\n\n

具有围绕圆均匀分布的 8 个控制点的 Catmull-Rom 样条线,其中每个控制点到中心的距离随 \xc2\xb1 r/12 变化,看起来大约是正确的:

\n\n

在此输入图像描述

\n