我在 github 上有这个:https://github.com/evertoncunha/EPCSpinnerView
它做这个动画:
动画中有一个小故障,当圆圈正在填充并且 View 正在调整大小时,我不想修复它。
故障发生是因为我通过设置层角来填充圆圈的方式,所以它看起来像一个圆圈,并且我随着动画的进展增加了 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 的情况下实现此动画?如果我只能画这个
最佳答案
我可以想到两种方法来避免使用 cornerRadius
:
- 使用蒙版圆角,使用形状图层填充
您可以创建一个实心圆的 CAShapeLayer
,并将框架设置为 View 的边界,然后将其分配给图层的 mask
属性。您可以在设置 View 大小的动画时设置此 mask 的大小。其次,稍后您需要创建一个额外的形状(可能类似于您旋转的圆圈),并在此层上制作线宽动画。掩码将确保线条不会向外生长,而只会向内生长。
- 为填充形状的线宽和设置动画
您将需要创建一个与第一个选项中描述的相似的圆形图层,但您不仅需要为线宽设置动画,还需要为半径设置动画。例如:假设您的 View 大小为 40x40。当然,在填充动画开始时,形状图层也需要为 40x40。然后将线宽设置为 20pts,并将圆的半径设置为 20pts 到 10pts。半径为 10pts 且线宽为 20pts 的圆将显示为半径为 20pts 的实心圆。
希望这对您有所帮助。
关于ios - 用 UIBezierPath 填充圆形动画和 iOS 绘制矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46224518/