Circle with fluid/strechy stroke

Question

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

Answer 1

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: