重新创建Apple Watch健身追踪器的“进度”栏-CAShapeLayer笔触的渐变 [英] Recreate Apple Watch fitness tracker ‘progress’ bar - gradient on CAShapeLayer stroke

问题描述

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

I'm writing an app that could make good use of the Apple Watch's fitness tracker design, here:

到目前为止，我已经创建了基本轮廓，只是CAShapeLayer与椭圆的CGPath。我使用strokeStart和strokeEnd设置进度动画。当对轮廓应用渐变时，我的问题来了。

So far, I've created the basic outline which is just a CAShapeLayer with a CGPath of an ellipse. I use strokeStart and strokeEnd to animate the progress. My problem comes when applying a gradient to the outline. How do I apply a gradient like above to the stroke of a CGPath?

推荐答案

最简单的方法是不必将其拖放到CGPath的笔划上直到Core Graphics或GL都将创建一个包含要填充圆环的角度渐变的层，然后使用CAShapeLayer对其进行遮盖，该CAShapeLayer包含您的圆形路径（具有适当的线宽和盖帽设置），然后，如当前为此，请使用形状图层的 strokeEnd 属性设置填充百分比。请注意，没有内置的方法可以创建角度渐变-您可以使用

The cleanest way to do this without having to drop down to Core Graphics or GL is to create a layer containing the angle gradient that you want the ring filled with, mask it with a CAShapeLayer containing your circular path (with the appropriate line width and cap settings), then, as you’re currently doing, use the shape layer’s strokeEnd property to set the "fill" percentage. Note that there isn’t a built-in way to create an angle gradient—you can use one of the suggestions in this answer for that.

edit：另外，您将需要一对半圆形的帽图像，在环的每个末端都有一个-当填充百分比接近100％时，顶部的区域将显示开始和结束颜色之间的不连续性。在上面的示例图片中，您需要一个红色的半圆形，像这样的（开头，一个粉红色的半圆形，像这样的）

edit: Also, you’ll need a pair of semicircular "cap" images, one at each end of the ring—as the fill percentage gets close to 100%, the region at the top will reveal the discontinuity between the start and end color. In your example image above, you’d need a red semicircle oriented like this ( at the start, and a pink one oriented like this ) with a translation/rotation transform tracking the end.

附加编辑：此外，由于封端半圆将沿着梯度移动，因此您将需要它来更改颜色，随着填充量从0％到100％从开始颜色到结束颜色进行插值。最好的方法是使用具有半圆形路径的形状图层，因为您可以设置该图层的 fillColor 而不必重新绘制图像内容。

additional edit: Also also, since the end-cap semicircle will be moving along the gradient, you’ll need it to change color, interpolating from the start color to the end color as the fill amount goes from 0% to 100%. Best way to do that is with a shape layer with a semicircular path, since you can set the fillColor of that without having to redraw image contents.

这篇关于重新创建Apple Watch健身追踪器的“进度”栏-CAShapeLayer笔触的渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！