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?

Instead of animation - also look into ‘Gradient’s. Might be easier for what you’d like to achieve. — impression7vx, Sep 13 '19 at 04:07
I think this code could be help you: https://stackoverflow.com/questions/40320727/fill-uiimageview-with-other-color-animated — Sagar Chauhan, Sep 13 '19 at 04:23

score 1 · Accepted Answer · answered Sep 13 '19 at 04:17

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).

answered Sep 13 '19 at 04:17

inexcitus

2,471
2
26
41

Looks interesting, but I have never use CAShapeLayer before. I'll have a look and try it – The1993 Sep 13 '19 at 04:45

Animate UIProgressview Color Change

1 Answers1