View cycle progress as an activity app

Question

I am trying to create an animated radial diagram that looks like an activity application created by Apple. I provide an image to show what I would like to receive:

Do you know how to get this result? If you have an idea, can you focus on the following points?

• Create a gradient inside each circle
• Create a shadow on the head of the circle

Thank you in advance.

Answer 1

Check your user control, I tried to bring it as close as possible to the design of the Activity application, and everything is configured.

https://github.com/maxkonovalov/MKRingProgressView

---

The basic idea of ​​the algorithm is quite simple.

:

Photoshop . : https://github.com/maxkonovalov/MKGradientView.

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

:

• ( 50%)

, .

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

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

:

Answer 2

, , , .

https://github.com/hmaidasani/RadialChartImageGenerator