6

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

user4781334
  • 374
  • 2
  • 8
  • Any luck on finding the solution? – Brabbeldas Jul 26 '15 at 18:10
  • As of watchOS 3 you can use SpriteKit. Take a look at my answer [here](https://stackoverflow.com/questions/27073029/creating-progress-circle-as-wkinterfaceimage-in-watch-app/45434310#45434310). However the the gradient might be a bit tricky. You could try [this](https://stackoverflow.com/questions/40188058/how-to-draw-a-circle-path-with-color-gradient-stroke) – AKM Aug 01 '17 at 09:58

2 Answers2

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.

ysnzlcn
  • 558
  • 6
  • 18
0

I am a designer, not a developer, so take this for what it's worth. As a designer I would first create the rings with solid colors, without gradient. I would then place a layer on top of it that is a semitransparent full ring that has an angular (or radial) gradient from black to transparent. Set the opacity (or alpha) to something like 10-40% depending how strong of a gradient you want.

You can use a design app like Sketch or Illustrator to create an angular gradient or draw it as explained here: Drawing Circular Gradient

Hope that helps.

Community
  • 1
  • 1
Guido
  • 1
  • 1