Drawing rings with gradient similar to the Apple Watch fitness app

Question

I am very new to Core Graphics, and I would like to know how it is possible to draw rings with gradients similar to the Apple Watch fitness app. I am trying to do this on an iOS app, as I think currently Core Graphics is not supported on WatchKit yet.

I found a very good tutorial on the following website to draw the rings.

http://makeapppie.com/2015/03/10/swift-swift-basic-core-graphics-for-the-ring-graph/

However I am trying to figure out how to add a gradient to the stroke color. So far based on what I have found there is no straight forward way to do this. In order to achieve this, I figured I need to find the answers to the following:

• Is there an API to create circular gradients in Core Graphics?
• Is it possible to apply the gradient as the stroke color in Core Graphics?

Thanks

Answer 1

You have must find the answer of your question for now but i will answer it for everyone trying to create same thing.

Firstly you need to create images from 1-100(naming them is importing so be careful with the names) to create ring animation. You can use this app in simulator to create ring images:

GitHub - WatchRingGenerator

After that you should import your animation images to your project(it doesn't matter if you import them in .xcassets or in folder but make sure your images target is your watch app not the watch app extention or the ios app)

After that you can create your animation like this:

 override func awakeWithContext(context: AnyObject?){
 super.awakeWithContext(context)
 imageView.setImageNamed("ringImage-")
 }

 override func willActivate() {
 imageView.startAnimatingWithImagesInRange(NSMakeRange(1, 46), duration: 1, repeatCount: 1)
 //This code will animate the ring from ringImage-1 to ringImage-46
 }

Hope it helps.