Swift - 制作 CAShapeLayer 发光效果

如何解决Swift - 制作 CAShapeLayer 发光效果

我制作了一个圆形进度视图，如下所示：

这是 CAShapeLayer 的当前代码：

import UIKit

class CircularProgressView: UIView {

    fileprivate var progressLayer = CAShapeLayer()
    fileprivate var trackLayer = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        createCircularPath()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        createCircularPath()
    }
    
    var progressColor = UIColor.white {
        didSet {
            progressLayer.strokeColor = progressColor.cgColor
        }
    }
    
    var trackColor = UIColor.white {
        didSet {
            trackLayer.strokeColor = trackColor.cgColor
        }
    }
    
    fileprivate func createCircularPath() {
        self.backgroundColor = UIColor.clear
        self.layer.cornerRadius = self.frame.size.width/2
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width/2,y: frame.size.height/2),radius: (frame.size.width - 1.5)/2,startAngle: CGFloat(-0.5 * .pi),endAngle: CGFloat(1.5 * .pi),clockwise: true)
        trackLayer.path = circlePath.cgPath
        trackLayer.fillColor = UIColor.clear.cgColor
        trackLayer.strokeColor = trackColor.cgColor
        trackLayer.lineWidth = 10.0
        trackLayer.strokeEnd = 1.0
        layer.addSublayer(trackLayer)
        
        progressLayer.path = circlePath.cgPath
        progressLayer.fillColor = UIColor.clear.cgColor
        progressLayer.strokeColor = progressColor.cgColor
        progressLayer.lineWidth = 10.0
        progressLayer.strokeEnd = 0.0
        layer.addSublayer(progressLayer)
    }
    
    func setProgressWithAnimation(duration: TimeInterval,value: Float) {
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = duration
        animation.fromValue = 0
        animation.toValue = value
        animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
        progressLayer.strokeEnd = CGFloat(value)
        progressLayer.add(animation,forKey: "animateprogress")
    }
}

我尝试添加这样的动画扩展：

extension CAShapeLayer {
    enum GlowEffect: Float {
        case small = 0.4,normal = 2,big = 15
    }

    func doGlowAnimation(withColor color: UIColor,withEffect effect: GlowEffect = .normal) {
        self.masksToBounds = false
        self.shadowColor = color.cgColor
        self.shadowRadius = 0
        self.shadowOpacity = 1
        self.shadowOffset = .zero

        let glowAnimation = CABasicAnimation(keyPath: "shadowRadius")
        glowAnimation.fromValue = 0
        glowAnimation.toValue = effect.rawValue
        glowAnimation.beginTime = CACurrentMediaTime()+0.3
        glowAnimation.duration = CFTimeInterval(0.3)
        glowAnimation.fillMode = .removed
        glowAnimation.autoreverses = true
        glowAnimation.isRemovedOnCompletion = true
        self.add(glowAnimation,forKey: "shadowGlowingAnimation")
    }
}

像这样使用它：

progressLayer.doGlowAnimation(withColor: UIColor.systemBlue,withEffect: CAShapeLayer.GlowEffect.normal)

但没有任何改变。绿色 CAShapeLayer 上没有发光效果。我做错了什么？

解决方法

只需将您的 GlowEffect 枚举类型从 Float 更改为 CGFloat。

enum GlowEffect: CGFloat {
    case small = 0.4,normal = 2,big = 15
}

使用 CABasicAnimation 时，您应该为 .fromValue 和 .toValue 属性提供动画属性类型的值。否则动画不会发生。

参考

见Apple Docs。

var shadowRadius: CGFloat { get set }