笔画 fluid/strechy 的圆圈
Circle with fluid/strechy stroke
我和我的团队正在为客户开发应用程序。我们正在尝试了解如何实现这种动画(仅指圆形描边):
我们尝试使用 CADisplayLink
来设置和更改圆圈,但它产生了不流畅的结果。
我们找不到从 UIBezierPath
的 "components" 创建一个圆并更改每个锚点的方法。
任何关于如何实现这种效果或如何从分离的点构造圆的建议都将得到高度应用
此致,
Roi 和团队
我建议使用 Catmull-Rom 样条。这些允许您仅使用曲线上的点创建平滑曲线,而贝塞尔曲线要求您定义不在曲线上的控制点。
一旦你有了开始和结束 CGPath
s 就很容易创建一个从开始到结束状态的路径的 CAAnimation
(尽管只对 CGPath
进行动画更改如果动画中的起始路径和结束路径具有相同数量和类型的点,则工作正常。)
您也可以使用贝塞尔曲线,但您需要为圆及其扭曲的形状生成控制点。
查看这个使用 Catmull-Rom 样条创建扭曲圆形的示例应用程序:
http://wareto.com/animating-shapes-using-cashapelayer-and-cabasicanimation
(写在Objective-C,但技巧与Swift相同。)
带有 8 个控制点的 Catmull-Rom 样条均匀分布在一个圆上,每个控制点与中心的距离变化± r/12 似乎是正确的:
我和我的团队正在为客户开发应用程序。我们正在尝试了解如何实现这种动画(仅指圆形描边):
我们尝试使用 CADisplayLink
来设置和更改圆圈,但它产生了不流畅的结果。
我们找不到从 UIBezierPath
的 "components" 创建一个圆并更改每个锚点的方法。
任何关于如何实现这种效果或如何从分离的点构造圆的建议都将得到高度应用
此致,
Roi 和团队
我建议使用 Catmull-Rom 样条。这些允许您仅使用曲线上的点创建平滑曲线,而贝塞尔曲线要求您定义不在曲线上的控制点。
一旦你有了开始和结束 CGPath
s 就很容易创建一个从开始到结束状态的路径的 CAAnimation
(尽管只对 CGPath
进行动画更改如果动画中的起始路径和结束路径具有相同数量和类型的点,则工作正常。)
您也可以使用贝塞尔曲线,但您需要为圆及其扭曲的形状生成控制点。
查看这个使用 Catmull-Rom 样条创建扭曲圆形的示例应用程序:
http://wareto.com/animating-shapes-using-cashapelayer-and-cabasicanimation
(写在Objective-C,但技巧与Swift相同。)
带有 8 个控制点的 Catmull-Rom 样条均匀分布在一个圆上,每个控制点与中心的距离变化± r/12 似乎是正确的: