Animate a CALayer frame change

Question

I'm trying to create a Custom Progress Bar View and the idea is to have a timer that will update every second. However, the transition from the progress is not so smooth.

If I reduce the timer interval to something like 0.01 instead of 0.1 the "animation" works nicely; however, I'm trying to avoid it.

There's some way to make this animation smooth using 1 second on the Timer interval?

class CustomProgressBar: UIView {
    
    private let progressLayer = CALayer()
    
    var progress: CGFloat = 1.0 {
        didSet {
            setNeedsDisplay()
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        addSublayers()
        startTimer()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        addSublayers()
        startTimer()
    }
    
    private func startTimer() {
        Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(updateProgressBar), userInfo: nil, repeats: true)
    }
    
    override func draw(_ rect: CGRect) {
        let backgroundMask = CAShapeLayer()
        backgroundMask.path = UIBezierPath(roundedRect: rect, cornerRadius: rect.height * 0.5).cgPath
        layer.mask = backgroundMask
        
        updateLayer(rect: rect, color: .white)
        
        backgroundColor = .black
        progressLayer.backgroundColor = UIColor.white.cgColor
    }
    
    private func addSublayers() {
        layer.addSublayer(progressLayer)
    }
    
    @objc func updateProgressBar() {
        progress -= 0.1
    }
    
    private func updateLayer(rect: CGRect, color: UIColor?) {
        
        let progressRectBorderSize = rect.height * 0.2
        let width: CGFloat
        width = max(rect.width * progress - (progressRectBorderSize * 2), 0)
        
        let progressRect = CGRect(origin: CGPoint(x: progressRectBorderSize, y: progressRectBorderSize), size: CGSize(width: width, height: rect.height - (progressRectBorderSize * 2)))
        
        let progressBackgroundMask = CAShapeLayer()
        let progressBackgroundMaskRoundedRect = CGRect(x: 0, y: 0, width: progressRect.width, height: progressRect.height)
        progressBackgroundMask.path = UIBezierPath(roundedRect: progressBackgroundMaskRoundedRect, cornerRadius: progressRect.height * 0.5).cgPath
        progressLayer.mask = progressBackgroundMask
        
        progressLayer.frame = progressRect
    }
}

If you update progress every one second, it seems to me that you have gotten what you are supposed to get. — El Tomato, Aug 18 '21 at 00:46

score 1 · Answer 1 · answered Aug 18 '21 at 01:24

Here is how I create CustomProgressBar for you according to your needs.

I gave it a run, it works smoothly. You can customize it according to your Design needs.


class CustomProgressBar: UIView {
    
    private var progressLayerBackground = CAShapeLayer()
    private var progressLayer = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
    override func draw(_ rect: CGRect) {
        
        progressLayerBackground = createBarShapeLayer(strokeColor: .black, rect: rect, margin: 10)
        layer.addSublayer(progressLayerBackground)
        
        progressLayer = createBarShapeLayer(strokeColor: .white, rect: rect, margin: 10)
        progressLayer.lineWidth = 15
        progressLayer.strokeEnd = 0 // This define how much will be width of bar at start.
        layer.addSublayer(progressLayer)
        animateBar()
                
        backgroundColor = .white
        progressLayerBackground.backgroundColor = UIColor.white.cgColor
    }
    
    private func addSublayers() {
        layer.addSublayer(progressLayerBackground)
    }
    
    private func createBarShapeLayer(strokeColor: UIColor, rect: CGRect, margin: CGFloat) -> CAShapeLayer {
        let layer = CAShapeLayer()
        
        let linePath = UIBezierPath()
        linePath.move(to: CGPoint(x: rect.width - margin, y: rect.height /  2))
        linePath.addLine(to: CGPoint(x: rect.minX + margin , y: rect.height /  2))
        
        layer.path = linePath.cgPath
        layer.strokeColor = strokeColor.cgColor
        layer.lineWidth = 20
        layer.strokeEnd = 1
        layer.lineCap = .round
        
        return layer
    }
    
    private func animateBar() {
        let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
        
        basicAnimation.toValue = 1
        basicAnimation.duration = 2 // This defines how much will be duration of animation.
        basicAnimation.fillMode = .forwards
        basicAnimation.beginTime = CACurrentMediaTime() + 0.5
        basicAnimation.isRemovedOnCompletion = false
        progressLayer.add(basicAnimation, forKey: "moveHorizontally")
    }
}

Demo: https://drive.google.com/file/d/1iGwcPPe7uQROa9s276t4SIsHY42fTJ1D/view?usp=sharing

Animate a CALayer frame change

1 Answers1