How to Implement Continuous Flashing Colour Animation on a UITableViewCell with Start/Stop Control?

Question

In my iOS app I am using UITableView with max. 8 rows (number of rows can change but maximum is 8). I am downloading some data which are processed and presented in the table view.

If some data are not correct (out of range or anything) I need to inform the user about that. This warning should be row flashing. If some value on position 2 is not correct, row 2 should be flashing (white/red).

I need advice what is the best way how to implement that.

Only idea I have is to implement backgroud timer which runs in 500ms interval and everytime checks the array with data and if some data are not correct, it changes background color of the particular row (if the backgroud color is white, it is changed to red and oposite). This should look like flashing.

Is that OK or do you have better idea? Thanks

Answer 1

UIView

You could use the animation methods of UIView to handle the animation side of things...

This question has a couple of answers that should how you might repeat an animation, with a check in-between each cycle to see if the animation should continue or stop.

However, given that you want to start a continuous animation and interrupt/stop it based on some other event, I think using a CABasicAnimation might be better...

CABasicAnimation

You could use a CABasicAnimation to animate the backgroundColor of the UITableViewCell.

For example, here is some code that I've used to animate the colour of a UIView:

// UIView* _addressTypeTokenView;
// UIColor* _tokenOnColour;
// UIColor* _tokenOffColour;

CABasicAnimation* colourChange = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
colourChange.fromValue = (__bridge id)(_tokenOffColour.CGColor);
colourChange.toValue = (__bridge id)(_tokenOnColour.CGColor);
colourChange.duration = 0.6;
colourChange.delegate = self;
_addressTypeTokenView.layer.backgroundColor = _tokenOnColour.CGColor;
[_addressTypeTokenView.layer addAnimation:colourChange forKey:@"colourChangeAnimation"];

You will want to create an animation that repeats forever. (According to a related question on this topic) it's legitimate to use HUGE_VALF to create such an animation. E.g.

colourChange.repeatDuration = HUGE_VALF;

Once you've created the CABasicAnimation you add it to the CALayer of the view in question, along with a key:

- (void)addAnimation:(CAAnimation *)anim forKey:(NSString *)key

In my example above, I've used the key @"colourChangeAnimation":

[_addressTypeTokenView.layer addAnimation:colourChange forKey:@"colourChangeAnimation"];

That key can be used later to remove the animation, with this method:

- (void)removeAnimationForKey:(NSString *)key

You're still going to need to check regularly whether or not the data is still valid. If it becomes valid, you can remove the animation to stop the flashing effect.

You could do that checking in the view controller with a timer, or maybe have a model object handle the checking of data validity and use a delegate callback for communication with the view controller (to separate the responsibility and keep your view controller tidier).

However you handle the checking of the data validity, the CABasicAnimation approach provides a clean way to start and stop the animation.