圆形进度视图像活动应用程序

我正在尝试创build一个看起来像Apple创build的活动应用程序的animation辐射图。 我提供一个图像来显示我想要的结果：

你知道如何获得这个结果吗？ 如果你有什么想法可以请你注意以下几点？

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

非常感谢你提前。

Answer 1

看看我的自定义控件，我试图尽可能接近活动应用程序devise，并且一切都是可定制的。

https://github.com/maxkonovalov/MKRingProgressView

---

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

绘制颜色变化的弧线：

1. 生成一个圆锥形的渐变图像

您可以使用Photoshop中的预渲染图像或dynamic生成自己的图像。 我从这里使用一个渐变图像发生器： 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) 

最后的结果是这样的：

Answer 2

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

https://github.com/hmaidasani/RadialChartImageGenerator