带有CALayer的动画进度加载器— Swift和Xcode

开发iOS应用程序时，通常需要从CDN中获取图像，这可能需要一些时间，具体取决于图像的大小，服务器速度和设备的网络连接。 在此获取时间内，您的UI将已经呈现，并且您想显示图像获取进度的可视指示器。 在iOS上，您具有默认的UIActivityIndicatorView 。 它可以工作，但是您可以轻松创建更具个性化的新对象。

要求

• Xcode
• Swift的知识
• Apple Swift官方文档（https://developer.apple.com/documentation/quartzcore）
• 斯威夫特游乐场

让我们深入研究代码

首先，我们需要创建装载机的形状。 对于此示例，我们需要一个循环加载器。

让我们创建跟踪图层，以显示加载程序的形状。

 让trackLayer = CAShapeLayer（） 

  trackLayer.position = CGPoint（x：50，y：50） 
  trackLayer.lineCap = CAShapeLayerLineCap.round 
  trackLayer.lineWidth = 2 
  trackLayer.fillColor = UIColor.clear.cgColor 
  trackLayer.strokeColor = UIColor（红色：80/255，绿色：80/255，蓝色：80/255，alpha：0.5）.cgColor 
  trackLayer.anchorPoint = CGPoint（x：0.5，y：0.5） 

现在已经创建了图层，我们想要定义圆形。

  trackLayer.path = UIBezierPath（arcCenter：.zero，半径：10，startAngle：0，endAngle：2 * CGFloat.pi，顺时针：true）.cgPath 

为了显示跟踪图层，我们必须将其添加到视图中。

  view.layer.addSublayer（trackLayer） 

如果您在操场上跑步，您会在左上角看到一个圆形。

做得好，我们已经准备好跟踪层。 现在，我们需要创建一个新图层，该图层将与跟踪图层重叠并根据加载进度进行填充。

 让shapeLayer = CAShapeLayer（） 

  shapeLayer.position = CGPoint（x：50，y：50） 
  shapeLayer.lineCap = CAShapeLayerLineCap.round 
  shapeLayer.lineWidth = 2 
  shapeLayer.fillColor = UIColor.clear.cgColor 
  shapeLayer.strokeColor = UIColor（红色：246/255，绿色：250/255，蓝色：251/255，alpha：0.9）.cgColor 
  shapeLayer.anchorPoint = CGPoint（x：0.5，y：0.5） 
  shapeLayer.path = UIBezierPath（arcCenter：.zero，半径：10，startAngle：0，endAngle：2 * CGFloat.pi，顺时针：true）.cgPath 

  view.layer.addSublayer（shapeLayer） 

我们差不多完成了，只需要更改形状层的方向即可。 目前，我们的形状图层笔划从右上角开始，我们需要像常规加载程序一样从顶部中心开始画线。

  shapeLayer.transform = CATransform3DMakeRotation（-CGFloat.pi / 2，0，0，1） 

在将shapeLayer添加到视图图层之前，添加此行。

瞧，我们完成了。 要为进度加载器设置动画，您需要更改图层的strokeEnd属性。 请记住，该值必须介于0和1之间（以百分比表示）。

  shapeLayer.strokeEnd = 0.5 // 50％的加载进度 

如果您想在操场上看动画，您将需要做更多的工作。

首先，让我们为操场添加无限执行，否则您将无法看到任何动画，因为操场将在函数中的最后一条语句之后停止，异步代码将无法工作。

 导入PlaygroundSupport 

  PlaygroundPage.current.needsIndefiniteExecution = true 

为了模拟加载进度，我们将使用Timer ，该计时器在每个时间段将执行一段代码。 在我们的案例中，代码块更改了strokeEnd属性。

  Timer.scheduledTimer（withTimeInterval：0.2，重复：true，块：{（timer）in 
  shapeLayer.strokeEnd + = 0.1 
 如果shapeLayer.strokeEnd> 1 { 
  timer.invalidate（） 
  } 
  }） 

如果您在操场上玩耍，您会在2秒钟内看到装载机动画。