与 Apple Watch 健身应用程序类似的渐变绘制圆环答案

【问题标题】：Drawing rings with gradient similar to the Apple Watch fitness app与 Apple Watch 健身应用程序类似的渐变绘制圆环
【发布时间】：2015-04-28 05:45:13
【问题描述】：

我是 Core Graphics 的新手，我想知道如何使用类似于 Apple Watch 健身应用的渐变绘制圆环。我正在尝试在 iOS 应用上执行此操作，因为我认为 WatchKit 目前尚不支持 Core Graphics。

我在以下网站上找到了一个非常好的教程来绘制戒指。

http://makeapppie.com/2015/03/10/swift-swift-basic-core-graphics-for-the-ring-graph/

但是我想弄清楚如何为描边颜色添加渐变。到目前为止，根据我的发现，没有直接的方法可以做到这一点。为了实现这一点，我想我需要找到以下问题的答案：

是否有在 Core Graphics 中创建圆形渐变的 API？
是否可以在 Core Graphics 中应用渐变作为笔触颜色？

谢谢

【问题讨论】：

找到解决方案的运气好吗？
从 watchOS 3 开始，您可以使用 SpriteKit。看看我的回答here。但是渐变可能有点棘手。你可以试试this

标签： ios swift core-graphics

【解决方案1】：

你现在必须找到你的问题的答案，但我会为每个试图创造相同事物的人回答它。

首先，您需要从 1-100 创建图像（命名它们是导入的，因此请注意名称）以创建环形动画。您可以在模拟器中使用此应用来创建环形图像：

GitHub - WatchRingGenerator

之后，您应该将动画图像导入您的项目（无论您将它们导入到 .xcassets 还是文件夹中，但请确保您的图像目标是您的手表应用程序而不是手表应用程序扩展或 ios 应用程序）

之后，您可以像这样创建动画：

 override func awakeWithContext(context: AnyObject?){
 super.awakeWithContext(context)
 imageView.setImageNamed("ringImage-")
 }

 override func willActivate() {
 imageView.startAnimatingWithImagesInRange(NSMakeRange(1, 46), duration: 1, repeatCount: 1)
 //This code will animate the ring from ringImage-1 to ringImage-46
 }

希望对你有帮助。

【讨论】：

【解决方案2】：

我是一名设计师，而不是一名开发人员，所以请尽情享受它的价值。作为一名设计师，我首先会用纯色制作戒指，没有渐变。然后我会在它上面放置一个层，它是一个半透明的完整环，具有从黑色到透明的角度（或径向）渐变。将不透明度（或 alpha）设置为 10-40%，具体取决于您想要的渐变强度。

您可以使用 Sketch 或 Illustrator 等设计应用程序来创建角度渐变或按照此处的说明进行绘制：Drawing Circular Gradient

希望对您有所帮助。

【讨论】：

【解决方案3】：

您可以使用 SpriteKit 和着色器来创建圆形路径渐变。查看this repo 中的方法。

干杯

【讨论】：