OGeek|极客世界-中国程序员成长平台

标题: ios - 使用 UIBezierPath 和 iOS 绘制矩形填充圆形动画 [打印本页]
作者: 菜鸟教程小白    时间: 2022-12-11 18:42
标题: ios - 使用 UIBezierPath 和 iOS 绘制矩形填充圆形动画

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

它会做这样的动画:

Spinner a nimation

动画中有一个小故障，当圆圈被填充并且 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 的情况下实现此动画？如果我只能画这个


Best Answer-推荐答案


我可以想到两种方法来摆脱使用 cornerRadius:

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

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

  1. 动画线宽和填充形状的半径

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

希望这会有所帮助。

关于ios - 使用 UIBezierPath 和 iOS 绘制矩形填充圆形动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46224518/





欢迎光临 OGeek|极客世界-中国程序员成长平台 (https://ogeek.cn/) Powered by Discuz! X3.4