在手表应用程序中创建进度圈作为WKInterfaceImage

Question

我正在尝试为我的应用程序的Apple Watch版本创建一个进度圈。我知道我们不能使用UIViews (这将使事情变得更容易！)因此，我正在寻找替代方案。

基本上，我想创建一个这样的原型：

​

​

我希望做的事情是添加背景层作为一个普通的WKInterfaceImage，然后在顶部的进度箭头/线作为一个WKInterfaceImage，它根据计算的百分比绕着圆圈旋转。

我已经计算了百分比，所以基本上，我正在寻找的是一些帮助旋转箭头的数学代码。

有没有人知道这是否可能，如果是的话，有人能帮我吗？我并不是在应用程序运行时更新圆圈；它只需要在Watch app启动时更新，以与iOS版本相对应。

谢谢!

Answer 1

从watchOS 3开始，可以使用SpriteKit。

SKShapeNode可以绘制形状，因此可以创建径向环。

1. 将WKInterfaceSKScene添加到storyboard中的界面控制器，并通过插座将其连接起来。
2. 在接口控制器的唤醒方法中设置它

覆盖功能唤醒(withContext context: Any?) { super.awake(withContext: context) scene =SKScene(大小:CGSize(宽度: 100，高度: 100)) scene.scaleMode = .aspectFit interfaceScene.presentScene( scene ) }

• 创建形状节点并将其添加到场景中

设分数: CGFloat =0.75let path = UIBezierPath(arcCenter：.zero，radius: 50，startAngle: 0，endAngle: 2* .pi *分数，顺时针: true).cgPath让shapeNode = SKShapeNode(path: path) shapeNode.strokeColor = .blue shapeNode.fillColor = .clear shapeNode.lineWidth =4 shapeNode.lineCap = .round shapeNode.position = CGPoint(x: scene.size.width / 2，y: scene.size.height / 2) true

​

​

Answer 2

另一种解决方案是创建100张图片，每个数字都有一个帧。这样，您就可以使用'startAnimatingWithImagesInRange:duration:repeatCount‘方法来显示动画了。

问题是很难对每个框架进行自定义。有人考虑过这个问题并创造了一个生成器。你可以通过这个名字找到它：

径向条形图生成器

此链接将帮助您自定义框架：http://hmaidasani.github.io/RadialChartImageGenerator/

此外，在git链接上也有相同的示例。对于具有单个弧形帧的100帧，在磁盘上的大小约为1.8MB。

Answer 3

WatchKit中(目前)还没有iOS上可用的大部分内容。特别是，你想做的一些事情几乎是不可能的。(片刻的希望之光)。特别是，您不能旋转图像。或者，您可以旋转图像，但您必须在手机上执行此操作，然后在运行时将图像传递给手表。此外，您不能轻松地合成图像-但是，有一种方法可以做到。

一种方法是按照您希望的方式在手机上构建整个旋转、合成的图像，并使用WKInterfaceButton setBackgroundImage:将最终数据传递给按钮。不幸的是，您可能会发现这在模拟器中很慢，而且很可能在实际的手表上效果不佳。很难确定，因为我们没有一个，但这是通过蓝牙在飞行中发送图像。所以你不会得到流畅的动画或者很好的响应时间。

一个更好的方法是在手表上用你的方式破解它。这依赖于两个技巧:第一，将组与背景图像分层在一起。第二，使用-WKInterfaceImage startAnimatingWithImagesInRange:duration:repeatCount:.

对于第一个技巧，将一个Group放到您的布局中，然后将另一个group放入其中，然后(可能)在其中放置一个按钮。然后使用-WKInterfaceGroup setBackgroundImage：，图像将合成在一起。确保你使用适当的透明度，等等。

对于第二个技巧，请参考官方文档-本质上，您将需要一系列图像，每个可能的旋转值对应一个图像，正如erdekhayser所说。现在，这可能看起来令人震惊(确实如此)，也可能不切实际(事实并非如此)。这实际上是苹果推荐的创建微调器和类似产品的方式-至少目前是这样。是的，这可能意味着生成360种不同的图像，尽管由于屏幕较小，我的建议是每隔3-5度左右进行一次(没有人能够区分不同)。

希望这能有所帮助。