如何快速从图像创建循环加载器

Question

我做了一些研究，但不幸的是，我只找到了一些允许使用彩色圆形装载机且不使用图像的库。

所以这是我的问题，我有一个循环倒数计时，在我要实现的设计中，它使用了一个复杂的发光，我发现它很难再现，如图所示。发光过程围绕一个圆圈持续3秒钟，显示了倒计时的进度。

我最初的想法是尝试修改UIView + Glow，以使辉光不会发生变化，但是即使到那时，当我将UIView径向隐藏时，我也会停下来。

因此，我现在正在考虑简单地导出使进度条作为图像的外部发光，并径向隐藏该图像（最终这样做会更快，更简单，而不是尝试手动生成完全相同的发光）。

有人知道我应该从哪里开始看或者应该使用角度/弧度隐藏圆形图像的一部分吗？

编辑：下面是发光效果，上面叠加了圆形标签（黑色圆圈），用于显示倒计时值。

Answer 1

首先，我要感谢@ Carpsen90的帮助，尽管他的回答并非我所需要的，但它帮助我了解了如何使用CABasicAnimation并结合了this answer的灵感使用图像和CAShapeLayer

找到了解决我问题的方法

那些想知道我在做什么的人是我使用的代码

// countdownGlow is the glow (white and red part of my image)
func animateMask() {
        let arcPath = CGMutablePath()
        arcPath.move(to: CGPoint(x: self.countdownGlow.frame.width / 2, y: 0))
        arcPath.addArc(center: CGPoint(x: self.countdownGlow.frame.width / 2, y: self.countdownGlow.frame.width / 2), radius: self.countdownGlow.frame.width / 2, startAngle: CGFloat(-1 * Double.pi / 2), endAngle: CGFloat(-3 * Double.pi / 2), clockwise: false)
        arcPath.addArc(center: CGPoint(x: self.countdownGlow.frame.width / 2, y: self.countdownGlow.frame.width / 2), radius: self.countdownGlow.frame.width / 2, startAngle: CGFloat(-3 * Double.pi / 2), endAngle: CGFloat(-5 * Double.pi / 2), clockwise: false)
        let ringLayer = CAShapeLayer(layer: self.countdownGlow.layer)
        ringLayer.path = arcPath

        ringLayer.strokeEnd = 0.0
        ringLayer.fillColor = UIColor.clear.cgColor
        ringLayer.strokeColor = UIColor.black.cgColor
        ringLayer.lineWidth = self.countdownGlow.frame.width / 2

        self.countdownGlow.layer.mask = ringLayer
        self.countdownGlow.layer.mask?.frame = self.countdownGlow.layer.bounds

        let swipe = CABasicAnimation(keyPath: "strokeEnd")
        swipe.duration = 3
        swipe.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        swipe.fillMode = kCAFillModeForwards
        swipe.isRemovedOnCompletion = true
        swipe.toValue = 1.0
        ringLayer.add(swipe, forKey: "strokeEnd")
}

我似乎无法简单地告诉我圆弧是一个完整的圆，所以我先走了半个圆，然后又跑了一个半圆

如果您有任何改进，我很乐意尝试一下，因为我确信我的解决方案根本没有优化