如何在swift中从图像创建循环加载器

Posted 2021-04-18

我做了一些研究，但不幸的是只发现了一些允许彩色圆形加载器而不使用图像的库。

所以这是我的问题，我有一个循环倒计时，在我必须实现的设计中使用复杂的光晕，我觉得很难再现如图所示。此倒计时的进度通过围绕圆圈的3秒钟内的这种辉光来显示。

我最初的想法是尝试修改UIView + Glow，以便发光不会发生变化，但即便如此，当我的UIView径向隐藏时，我会停下来。

所以我现在想要简单地导出外部发光，使得进度条成为图像并径向隐藏（最终会更快更简单，而不是尝试手动完全相同的发光）。

有没有人知道我应该从哪里开始寻找或者我应该做什么来隐藏使用角度/拉伸的圆形图像的一部分？

编辑：这里的发光看起来像是用圆形标签（黑色圆圈）覆盖，用于显示倒计时值。

答案

首先，我要感谢@ 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")
}

我似乎不能简单地告诉我的弧是一个完整的圆圈，所以我去了半圈一次，然后是另一半圆圈

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