Question

我在github上有这个：https://github.com/evertoncunha/EPCSpinnerView

这是动画：

动画中有一个小故障，当圆圈正在填充并且视图正在调整大小时，我不想修复它。

故障的发生是因为我通过设置图层角来填充圆圈的方式，所以它看起来像一个圆圈，我用动画进度增加了lineWidth，看起来它喜欢从外面填充。来自EPCDrawnIconSpinner.swift文件：

let ovalPath = UIBezierPath()
ovalPath.addArc(withCenter: CGPoint(x: ovalRect.midX, y: ovalRect.midY),
                radius: ovalRect.width / 2,
                startAngle: start * CGFloat.pi/180,
                endAngle: end * CGFloat.pi/180, clockwise: true)
layer.cornerRadius = rect.size.height/2
ovalPath.lineWidth = 14 + ((frame.size.width) * progress)

有没有更好的方法可以在不执行图层cornerRadius的情况下实现此动画？如果我只能画这个

Answer 1

我可以想到两种方法可以避免使用cornerRadius：

使用蒙版圆角，并使用形状图层填充

您可以创建一个填充圆圈的CAShapeLayer，并将框架设置为视图的边界，然后将其分配给图层的mask属性。您可以在设置视图大小的动画时设置此蒙版的大小。其次，您需要稍后创建一个额外的形状（可能类似于您的旋转圆），并在此图层上执行线宽动画。面具将确保线不会向外生长，而只是向内生长。

为填充形状的线宽和半径设置动画

您需要创建一个类似于第一个选项中描述的圆形图层，但不仅仅是为线宽设置动画，您还需要为半径设置动画。例如：假设您的视图大小为40x40。当然，在填充动画开始时，您的形状图层也需要为40x40。然后，您将线宽设置为20pts，并将圆的半径设置为20pts到10pts。半径为10pts且线宽为20pts的圆将显示为半径为20pts的实心圆。

希望这有帮助。

Answer 2

我最终得到了以下解决方案：

fileprivate func drawPathCompleted(_ ovalRect: CGRect) {

     var size: CGFloat = ovalRect.size.width

     var current = size*(1-progress)

     var pos: CGFloat = lineWidth/2

     while size > current {
       let ovalPath = UIBezierPath(ovalIn: CGRect(x: pos, y: pos, width: size, height: size))
       ovalPath.lineCapStyle = .round
       ovalPath.lineWidth = lineWidth
       ovalPath.stroke()
       let decr = lineWidth/2
       size -= decr
       pos += decr/2
     }
}

在此提交中，第243行： https://github.com/evertoncunha/EPCSpinnerView/commit/87d968846d92aa97e85ff4c58b6664ad7b03f00b#diff-8dc22814328ed859a00acfcf2909854bR242

使用UIBezierPath和iOS绘制矩形填充圆圈动画

2 个答案: