重新创建 Apple Watch 健身追踪器“进度”栏 - CAShapeLayer 描边上的渐变
Recreate Apple Watch fitness tracker ‘progress’ bar - gradient on CAShapeLayer stroke
我正在编写一个可以充分利用 Apple Watch 健身追踪器设计的应用程序，此处：
到目前为止，我已经创建了基本轮廓，它只是一个带有椭圆 CGPath 的 CAShapeLayer。我使用 strokeStart 和 strokeEnd 来设置进度动画。我的问题出现在对轮廓应用渐变时。如何将上述渐变应用于 CGPath 的笔画？
我们为一个 iOS 应用程序做了这个。但很快就停止了，因为它很快就会陷入困境。
我认为 Apple 正在使用图像......就像他们在 Lister 示例中所做的那样
无需使用 Core Graphics 或 GL 即可完成此操作的最简洁方法是创建一个图层，其中包含您希望圆环填充的角度渐变，用包含圆形路径的 CAShapeLayer 对其进行遮罩（使用适当的线宽和上限设置），然后，正如您目前所做的那样，使用形状图层的 strokeEnd 属性 来设置“填充”百分比。请注意，没有内置的方法来创建角度渐变 - 您可以使用 this answer 中的建议之一。
edit：此外，您还需要一对半圆形“帽”图像，在环的两端各有一个——当填充百分比接近 100% 时，顶部的区域将显示两者之间的不连续性开始和结束颜色。在上面的示例图像中，您需要在开始时像 ( 这样定向的红色半圆，以及像 ) 这样定向的粉红色半圆，并在末端使用 translation/rotation 变换。
其他编辑：此外，由于端盖半圆将沿渐变移动，因此您需要它来更改颜色，随着填充量从 0% 开始从起始颜色插值到结束颜色到 100%。最好的方法是使用具有半圆形路径的形状图层，因为您可以设置它的 fillColor 而无需重新绘制图像内容。
我正在编写一个可以充分利用 Apple Watch 健身追踪器设计的应用程序，此处：
到目前为止，我已经创建了基本轮廓，它只是一个带有椭圆 CGPath 的 CAShapeLayer。我使用 strokeStart 和 strokeEnd 来设置进度动画。我的问题出现在对轮廓应用渐变时。如何将上述渐变应用于 CGPath 的笔画？
我们为一个 iOS 应用程序做了这个。但很快就停止了，因为它很快就会陷入困境。 我认为 Apple 正在使用图像......就像他们在 Lister 示例中所做的那样
无需使用 Core Graphics 或 GL 即可完成此操作的最简洁方法是创建一个图层，其中包含您希望圆环填充的角度渐变，用包含圆形路径的 CAShapeLayer 对其进行遮罩（使用适当的线宽和上限设置），然后，正如您目前所做的那样，使用形状图层的 strokeEnd 属性 来设置“填充”百分比。请注意，没有内置的方法来创建角度渐变 - 您可以使用 this answer 中的建议之一。
edit：此外，您还需要一对半圆形“帽”图像，在环的两端各有一个——当填充百分比接近 100% 时，顶部的区域将显示两者之间的不连续性开始和结束颜色。在上面的示例图像中，您需要在开始时像 ( 这样定向的红色半圆，以及像 ) 这样定向的粉红色半圆，并在末端使用 translation/rotation 变换。
其他编辑：此外，由于端盖半圆将沿渐变移动，因此您需要它来更改颜色，随着填充量从 0% 开始从起始颜色插值到结束颜色到 100%。最好的方法是使用具有半圆形路径的形状图层，因为您可以设置它的 fillColor 而无需重新绘制图像内容。