Circle Progress View like activity app

Question

I am trying to create an animated radial chart that looks like the activity app created by Apple. I provide an image to show what I would like as result:

Do you know how to obtain this result? If you have any idea could you please focus on the following points?

1. Create the gradient inside each circle
2. Create the shadow on the head of the circle

Thank you very much in advance.

Answer 1

Check out my custom control, I tried to make it as close as possible to the Activity app design, and everything is customizable.

https://github.com/maxkonovalov/MKRingProgressView

---

The basic idea behind the algorithm is quite simple.

To draw arc line with changing color:

1. Generate a conical gradient image

You can use a prerendered image from Photoshop or generate your own dynamically. I use a gradient image generator from here: https://github.com/maxkonovalov/MKGradientView.

2. Clip gradient image to show only the arc

CGContextSaveGState(ctx)
CGContextAddPath(ctx, arcPath)
CGContextClip(ctx)
CGContextDrawImage(ctx, gradientRect, gradientImage)
CGContextRestoreGState(ctx)

Drawing the shadow is even simpler:

1. Draw shadow behind your progress arc (shown with 50% opacity here)

I draw a circle shape matching arc's end for the shadow.

CGContextSetShadow(ctx, offset, shadowRadius)
CGContextAddPath(ctx, shadowPath)
CGContextSetFillColorWithColor(ctx, shadowColor)
CGContextFillPath(ctx)

2. Clip the shadow to fit into the progress circle

CGContextSaveGState(ctx)
CGContextAddPath(ctx, circlePath)
CGContextClip(ctx)
// Draw shadow...
CGContextRestoreGState(ctx)

And the final result looks like this: