重新创建Apple Watch健身追踪器'进度'栏 - CAShapeLayer中风渐变

Question

我正在编写一款可以充分利用Apple Watch健身追踪器设计的应用程序，在这里：

到目前为止，我已经创建了基本轮廓，它只是一个带有椭圆CGPath的CAShapeLayer。我使用strokeStart和strokeEnd为进度设置动画。在向轮廓应用渐变时出现问题。如何将上述渐变应用于CGPath的笔划？

Answer 1

最简单的方法是在不必下拉到Core Graphics或GL的情况下创建一个包含您希望环填充的角度渐变的图层，使用包含圆形路径的CAShapeLayer（使用相应的线条）对其进行遮罩然后，正如您当前所做的那样，使用形状图层的strokeEnd属性来设置“填充”百分比。请注意，没有内置的方法来创建角度渐变 - 您可以使用this answer中的一个建议。

编辑：此外，你需要一对半圆形的“帽子”图像，每一个在环的两端 - 当填充百分比接近100％时，顶部的区域将显示开始之间的不连续性并结束颜色。在上面的示例图片中，您需要一个红色的半圆，一开始就像这个(，一个粉红色的半圆就像这个)一样，有一个跟踪结束的平移/旋转变换。

额外编辑：另外，由于端盖半圆将沿着渐变移动，因此当填充量从0％变为100时，您需要它来改变颜色，从开始颜色到最终颜色进行插值％。最好的方法是使用具有半圆形路径的形状图层，因为您可以设置fillColor，而无需重新绘制图像内容。

Answer 2

我们为iOS应用程序做了这个..但很快停止了，因为它很快陷入困境。 我认为Apple正在使用图像..就像他们在Lister示例中所做的那样