Question

我是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中将渐变应用为笔触颜色？

由于

Answer 1

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

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

GitHub - WatchRingGenerator

之后你应该将你的动画图像导入你的项目（如果你在.xcassets或文件夹中导入它们并不重要，但要确保你的图像目标是你的手表应用而不是手表app扩展或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
 }

希望它有所帮助。

Answer 2

我是一名设计师，而不是开发人员，所以请把它当作它的价值。作为设计师，我首先会创建纯色的环，没有渐变。然后我会在它上面放一层，这是一个半透明的完整环，具有从黑色到透明的角度（或径向）梯度。根据你想要的渐变强度，将不透明度（或alpha）设置为10-40％。

您可以使用Sketch或Illustrator等设计应用创建角度渐变或按照此处所述绘制它：Drawing Circular Gradient

希望有所帮助。

Answer 3

您可以使用SpriteKit和着色器创建圆形路径渐变。在this存储库中查看方法。

欢呼

具有类似于Apple Watch健身应用程序的渐变的绘制环

3 个答案: