Animate UIProgressview Color Change

Question

I have an UIProgressView which I would like to change the colour as the progress increases. For example, if the progress fall below 40% the progressTintColor should become red, and if it's above 40% it should become blue.

Here is what I've tried

if value <= 40 {
    UIView.animate(withDuration: 5) {
        self.taskProgressView.progressTintColor = .red
    }
} else {
    UIView.animate(withDuration: 5) {
        self.taskProgressView.progressTintColor = .blue
    } 
}

Now, the colour change from red to blue and vice versa, however, it does not animate the colour changing over the 5 seconds duration.

How can I achieve this?

Answer 1

This can be done pretty easily using CAShapeLayers.

You need three layers:

• CAShapeLayer (for the track)
• CAShapeLayer (for the progress)
• CAGradientLayer (for the color effect).

You need to set the gradient layer as a mask of your track layer.

When changing the value, you can then use a CABasicAnimation to animate the progress change (you should simply animate the strokeEnd property).