0

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) :

enter image description here

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

rmaddy
  • 314,917
  • 42
  • 532
  • 579
Roi Mulia
  • 5,626
  • 11
  • 54
  • 105
  • If someone is going to down vote, please have the dignity to comment why, As I don't see a reason why should it down voted. – Roi Mulia Jun 25 '18 at 10:55

1 Answers1

4

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.)

enter image description here

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:

enter image description here

Duncan C
  • 128,072
  • 22
  • 173
  • 272
  • Perfect Duncan. Thank you for providing this answer. Much appreciated buddy. – Roi Mulia Jun 25 '18 at 12:24
  • Duncan, I actually spend a few good hours trying to convert your (great!) sample to what I wanted to achieve, It looks perfect! I'll be sure to send you a sample (if you'd like) when it's ready for release. Again thank you for your priceless help! – Roi Mulia Jun 25 '18 at 20:38
  • @RoiMulia I'd love to see it. Had you used CAAnimation before? – Duncan C Jun 25 '18 at 20:53
  • I did, but on far more simple tasks. By the way I have found a way to achieve this (partly) with UIBezierPath. You construct a circle from 4 arc, and to make the animations you change the control point with formula of sin(x) and cos(x). I'll make a project with the two solutions and send it over to you. Interesting approaches :) – Roi Mulia Jun 25 '18 at 20:55
  • Makes sense. With the work from my sample did you work with it in Objective-C or convert it to Swift? I have mountains of useful code I've written in Objective-C that I haven't found the time to convert, and this is just one example. – Duncan C Jun 25 '18 at 22:04