Applying animation on a circular chart

Question

I have built a circular graph very similar to this example in paintcode:

http://www.paintcodeapp.com/news/animating-apple-watch-activity-rings-in-paintcode

I have successfully drawn out the control on my iOS view with ease, but now I would like to animate the graph so that it begins at 0 and eases towards the specified angle. Basically the animation should look like the first two seconds of the video in the URL above.

What is the best way to go about this type of animation?

FYI: I am working in C#/Xamarin but I am not fussy on syntax at all, so an Objective C or Swift example will do just fine.

Answer 1

I wrote a UIView subclass which does exactly what you're asking for. You just provide an array of rings along with a few other parameters, and it handles all of the setup and management for you.

https://github.com/lionheart/ConcentricProgressRingView

At the top of your UIViewController, import the module:

import ConcentricProgressRingView

Then, in your viewDidLoad:

let rings = [
    ProgressRing(color: UIColor.redColor()),
    ProgressRing(color: UIColor.blueColor()),
]

let margin: CGFloat = 2
let radius: CGFloat = 80
let progressRingView = ConcentricProgressRingView(center: view.center, radius: radius, margin: margin, rings: rings, defaultWidth: 20)
view.addSubview(progressRingView)

Once you've instantiated your ConcentricProgressRingView instance, animate a specific ring to a percentage with setProgress.

ring.arcs[1].setProgress(0.5, duration: 2)

Under the hood, this just uses CABasicAnimation and sets a few parameters which make it look "right". I know you're not using Swift, but if you want specific pointers, just check out the source code to see how I've solved it. Hope this helps!

Answer 2

You want to use CAShapeLayers, one for each arc, with a full-circle arc installed in each one, and the line cap style set to rounded.

Then you want to set the strokeEnd property to a small value (try .05). That will cause the shape to only draw 5% of it's arc.

Finally you want to submit CAAnimations to each shape layer that animate the strokeEnd value from the starting value to 1.0. That will animate the arcs drawing the full circle.

I don't have any ready-made sample code for you. I do have a sample project written in Objective-C that uses a very similar technique to create a "clock wipe" animation using a CAShapeLayer as a mask layer.

Take a look at the clock wipe animation in the project "iOS CAAnimationGroup demo" project on Github.