具有流体/弹性笔划的圆圈 [英] Circle with fluid/strechy stroke

问题描述

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

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

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

此致，
Roi 和团队

解决方案

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

一旦你有了开始和结束 CGPath ，就可以很容易地创建一个 CAAnimation 路径的从开始到结束状态(尽管动画更改为 CAAnimation>CGPath 仅当动画中的开始和结束路径具有相同数量和类型的点时才能正常工作.)

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

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

带有 8 个控制点的 Catmull-Rom 样条曲线，围绕一个圆均匀分布，其中每个控制点与中心的距离变化 ± r/12 似乎是正确的:

Me and my team are working on an app for a client. We are trying to understand how to achieve this kind of animations (refer only to the circle stroke) :

We tried using a CADisplayLink to set up and change the circle, but it generated non-fluid results. We couldn't find a way to create a circle from "components" of UIBezierPath and change each of the anchors.

Any suggestions on how to achieve this kind of effect, or how to construct a circle from seperated points, would be highly appricated

Best Regards,
Roi and the team

解决方案

I suggest using Catmull-Rom splines. Those allow you to create smooth curves using only points that are on the curve, whereas Bezier curves require that you define control points that are not on the curve.

Once you have beginning and ending CGPaths its pretty easy to create a CAAnimation of the path from it's starting to it's ending state (although animating change to a CGPath only works correctly if the starting and ending paths in the animation have the same number and type of points.)

You could probably also use Bezier curves, but you would need to generate the control points for the circle and it's distorted shape.

Check out this sample app that uses Catmull-Rom splines to create a distorted circle shape:

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

(Written in Objective-C, but the technique is the same in Swift.)

A Catmull-Rom spline with 8 control points evenly spaced around a circle where the distance from the center of each control points is varied by ± r/12 seems about right:

这篇关于具有流体/弹性笔划的圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！