代码之家  ›  专栏  ›  技术社区  ›  James Woodrow

如何从swift中的图像创建循环加载程序

  •  0
  • James Woodrow  · 技术社区  · 8 年前

    所以这是我的问题,我有一个循环倒计时,在我要实现的设计中使用了一个复杂的辉光,我发现很难重现,如图所示。这个倒计时的进程是由这个辉光围绕着一个圆圈前进了3秒来表示的。

    所以我现在想简单地导出使进度条成为图像的外部辉光,然后径向隐藏它(这样做最终会更快更简单,而不是试图手动生成完全相同的辉光)。

    有没有人知道我应该从哪里开始寻找,或者我应该如何使用角度/半径来隐藏圆形图像的一部分?

    编辑:下面是辉光与圆形标签(黑色圆圈)叠加的样子,用于显示倒计时值。

    enter image description here

    1 回复  |  直到 8 年前
        1
  •  0
  •   Community Mohan Dere    6 年前

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

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

    如果您有任何改进,我很乐意尝试一下,因为我相信我的解决方案是没有优化的