如何在进度条 UIView 中添加动画

Question

我想在基于 UIView 的进度条中添加动画。 这是我的代码。

@IBDesignable class PlainHorizontalProgressBar: UIView {
    @IBInspectable var color: UIColor = .green {
        didSet { setNeedsDisplay() }
    }

    var progress: CGFloat = 0 {
        didSet { setNeedsDisplay() }
    }
    
    private let progressLayer = CALayer()
    private let backgroundMask = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayers()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayers()
    }
    
    private func setupLayers() {
        layer.addSublayer(progressLayer)
    }
    
    override func draw(_ rect: CGRect) {
        backgroundColor = .grey
        backgroundColor?.setFill()
        
        UIBezierPath(roundedRect: rect, cornerRadius: rect.height * 0.25).fill()
        
        backgroundMask.path = UIBezierPath(roundedRect: rect, cornerRadius: rect.height * 0.25).cgPath
        layer.mask = backgroundMask
    
        let progressRect = CGRect(origin: .zero, size: CGSize(width: rect.width * progress, height: rect.height))
    
        progressLayer.frame = progressRect
        layer.addSublayer(progressLayer)
        progressLayer.backgroundColor = color.cgColor
    }

}

这里的场景是，我有 ViewController A 和 ViewController B，我在 ViewController B 上有这个进度条，当我来的时候，我正在将一个值从 ViewController A 分配给 ViewController B（例如：myView.progress = 0.5）到 ViewController B 我的进度条已经填满了一半，但我想要的是，当我来到 ViewController B 时，当我降落在 viewController B 上时，它应该动画并填充在我面前。

Answer 1

这里的主要问题是您的draw 实现是错误的。或者，更好地说，您的 draw 实现根本不应该存在。 draw 中唯一应该发生的事情就是绘图。

如果您要添加子图层，您需要一个特定的方法，该方法只被调用一次以添加子图层。

如果您要更改其中一个子图层的框架，则需要另一种特定方法来更改（已经存在的）子图层的框架。将其分开后，如何为帧中的变化设置动画就会更加明显。事实上，因为这是一个图层，所以动画会自动发生。

class PlainHorizontalProgressBar: UIView {
    
    var color: UIColor = .green {
        didSet { update() }
    }

    var progress: CGFloat = 0 {
        didSet { update() }
    }
    
    private let progressLayer = CALayer()
    private let backgroundMask = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayers()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayers()
    }
    
    private func setupLayers() {
        layer.addSublayer(progressLayer)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        backgroundMask.path = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.bounds.size.height * 0.25).cgPath
        layer.mask = backgroundMask
        update()
    }
    
    func update() {
        let progressRect = CGRect(origin: .zero, size: CGSize(width: self.bounds.size.width * progress, height: self.bounds.size.height))
        progressLayer.frame = progressRect
        progressLayer.backgroundColor = color.cgColor
    }

}

关于允许将 progress 值设置在 1 到 100 之间的部分是基本算术问题，留给读者练习。