圈子进度查看活动应用程序

Question

我正在尝试创建一个动画的径向图表,看起来像Apple创建的活动应用程序.我提供了一个图像来显示我想要的结果:

你知道如何获得这个结果吗？如果您有任何想法,请关注以下几点？

1. 在每个圆圈内创建渐变
2. 在圆形头部创建阴影

非常感谢你提前.

Answer 1

看看我的自定义控件,我试图尽可能接近Activity应用程序设计,一切都可以自定义.

https://github.com/maxkonovalov/MKRingProgressView

算法背后的基本思想非常简单.

要绘制颜色变化的弧线:

1. 生成圆锥形渐变图像

您可以使用Photoshop中的预渲染图像或动态生成自己的图像.我从这里使用渐变图像生成器:https://github.com/maxkonovalov/MKGradientView.

2. 剪辑渐变图像以仅显示圆弧

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

绘制阴影更简单:

1. 在进度弧后面绘制阴影(此处显示50%不透明度)

我绘制一个圆形形状,匹配阴影的弧形末端.

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

2. 剪切阴影以适应进度圆

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

最终结果如下: