iosobjective-canimationxamarinpaintcode

Applying animation on a circular chart


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

Circular graph drawn 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.


Solution

  • 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!