圈子进度视图，如活动应用

Question

我正在尝试创建一个动画的子午线图表，看起来像Apple创建的活动应用程序。我提供了一个图像来显示我想要的结果：

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

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

非常感谢你。

Answer 1

查看我的自定义控件，我尝试尽可能接近Activity应用程序设计，并且所有内容都可以自定义。

https://github.com/maxkonovalov/MKRingProgressView

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

使用更改颜色绘制弧线：

1. 生成圆锥形渐变图像



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

1. 剪裁渐变图像以仅显示圆弧



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)

1. 剪影以适应进度圈



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

最终结果如下：

Answer 2

这不是你需要的，因为它似乎为你生成图像，但你可以从源头获得一些好的信息。

https://github.com/hmaidasani/RadialChartImageGenerator