Draw rings with a gradient similar to the Apple Watch fitness app

Question

I am very new to Core Graphics, and I would like to know how to draw rings with gradients similar to the Apple Watch fitness app. I am trying to do this in an iOS application, since I think that Core Watch is currently not supported by WatchKit.

I found a very good tutorial on the following website to draw 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 color of the stroke. So far based on what I have found, there is no direct way to do this. To achieve this, I decided that I needed to find answers to the following questions:

• Is there an API for creating circular gradients in Core Graphics?
• Can a gradient be applied as a stroke color in Core Graphics?

thanks

Answer 1

Now you must find the answer to your question, but I will answer it to everyone who is trying to create the same.

First, you need to create images from 1-100 (their names are imported, so be careful with the names) to create a ring animation. You can use this application in the simulator to create ring images:

GitHub - WatchRingGenerator

After that, you should import your animated images into your project (it doesn’t matter if you import them into .xcassets or into a folder, but make sure that the purpose of your images is your viewing application, not the extension of the clock application or ios application)

After that, you can create your animation as follows:

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 this helps.

Answer 2

I am a designer, not a developer, so take this for what it costs. As a designer, I would first create rings with solid colors, without a gradient. Then I placed a layer on top of it, which is a translucent full ring having an angular (or radial) gradient from black to transparent. Set the opacity (or alpha) to about 10-40% depending on how much you want the gradient.

You can use a project application, such as Sketch or Illustrator, to create an angular gradient, or draw it as described here: Drawing a circular gradient

Hope this helps.

Answer 3

You can use SpriteKit and shaders to create a circular path gradient. Check out the approach in this repo.

Hurrah