How to fade out the background color of UIView - iOS 5

Question

I'm having trouble trying to get a custom UIView class to fade its background. I checked the following StackOverflow questions, but they don't seem to work for me.

Fade background-color from one color to another in a UIView

How do you explicitly animate backgroundColor CALayer?

So, I have a custom UIView where users can draw things. If what they draw is wrong, I want the background color to fade to red and then go back to white.

I have this custom method in a custom UIView called

- (void)indicateMistake; 

When I call this method, I want it to perform background color animation, so I have this in the method:

 CABasicAnimation* fade = [CABasicAnimation animationWithKeyPath:@"backgroundColor"]; fade.fromValue = (id)[UIColor whiteColor].CGColor; fade.toValue = (id)[UIColor redColor].CGColor; [fade setDuration:3]; [self.layer addAnimation:fade forKey:@"fadeAnimation"]; 

But nothing happens when I do this.

So, I tried a dumb rotation animation to see if it even works:

 CABasicAnimation* rotate = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; rotate.toValue = [NSNumber numberWithInt:M_PI]; [rotate setDuration:1]; [self.layer addAnimation:rotate forKey:@"rotateAnimation"]; 

For some reason, the work and the custom UIView are spinning.

Then, after reading more StackOverflow answers, I tried this:

 [UIView animateWithDuration:3 animations:^{ [self setBackgroundColor: [UIColor redColor]]; } completion:^(BOOL finished) { [self setBackgroundColor: [UIColor whiteColor]]; }]; 

This immediately changes color from red and then back to white. Sometimes it’s so fast that sometimes I don’t see it happen. If I comment [self setBackgroundColor: [UIColor whiteColor]]; It will remain red. But there node is a gradual effect from white to red.

I have run out of ideas .. Any help would be appreciated!

Answer 1

So, I have a custom UIView where users can draw things.

I assume this means that you have implemented -drawRect:

IIRC, by default (if UIView.clearsContextBeforeDrawing set), the context is filled with the background color of the view, calls -drawRect: and the resulting raster map is drawn on the screen instead of the background color. Animating this would mean animating between two bitmaps, which is not something special in Core Animation. (I could be wrong in the details here, but that explains the behavior).

The easiest fix is ​​to set the background color to [UIColor clearColor] and animate the background color of the view behind the one you are drawing onto. This means that the view does not need to be redrawn, only re-arranged over the "background".

Answer 2

 [UIView animateWithDuration:0.3f animations:^{ fade.layer.backgroundColor = [UIColor redColor].CGColor; } 

Suppose you previously set your anti-aliasing mode to the white color that you want before.

The reason your last animation attempt returns to white is because in your animation completion suggestion, withDuration, you return the view to white.

This completion clause is executed when the animation is finished, so the animation (white-red) happens, and then your compiler completes and jumps the image with a gradual fading to white.

As an added bonus:

I'm sure you might be wondering how you can get back to white.

Well, let's say that pressing the UIButton button calls this function, called "animateColors". So, with that said, just implement BOOL.

 - (void)animateColors { if (!isRed) { [UIView animateWithDuration:0.3f animations:^{ fade.layer.backgroundColor = [UIColor redColor].CGColor; }]; isRed = YES; } else if (isRed) { [UIView animateWithDuration:0.3f animations:^{ fade.layer.backgroundColor = [UIColor whiteColor].CGColor; }]; isRed = NO; } } 

Obviously, you want to declare a boolean property, isRed, in your interface or header file.

Answer 3

I tried my code as is. It worked perfectly - it gradually disappeared from my eyes from white to red, and then jumped back to white, as you would expect. Therefore, if this does not work for you, something else happens.

A very useful diagnostic tool is to extract your nasty code and create a project consisting of nothing. What I did is what you should do. Create a brand new Single View application project. Now you have a view controller and its presentation. Implement this method:

 - (void)viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; CABasicAnimation* fade = [CABasicAnimation animationWithKeyPath:@"backgroundColor"]; fade.fromValue = (id)[UIColor whiteColor].CGColor; fade.toValue = (id)[UIColor redColor].CGColor; [fade setDuration:3]; [self.view.layer addAnimation:fade forKey:@"fadeAnimation"]; } 

Run the project. Fade works great. So you see what is wrong, not in this code! This is somewhere else. Perhaps you have another code that also does things for color - another animation that crushes this. Perhaps some link does not apply to what you think. Perhaps something is covering the layer, so you cannot see it (sublayer). Who knows? You did not show the entire project (and should not). It is important to make sure that the code works so that you can understand what is really wrong. And I showed you how to do it.