Flash! You're It!

... Wait, what?

Posted by Grego on July 13, 2015

Back Story

I had some images and text being swapped around on a particular ViewController on a button press. While I liked the speed at which my content was able to update, it was too jittery and felt like it lacking something. So I decided to make the screen flash white and fade out as a transition. This way the screen flashes and the content changes at the same time. It’s a cheap and effective trick to enhance the experience of your application, which doesn’t require a lot of time or effort to implement.

How To

Here’s how I did it.

Add a new UIView to your ViewController

Create a new UIView ivar on your ViewController. I called mine _flashView:

@implementation ViewController
{
  UIView *_flashView;
}

Initialize and attach the UIView

Initialize and attach the UIView to your ViewController. You can safely throw this somewhere in your viewDidLoad.

_flashView = [[UIView alloc] initWithFrame:CGRectMake(0, 0,
    self.view.frame.size.width,
    self.view.frame.size.height)];
_flashView.backgroundColor = [UIColor whiteColor];
_flashView.alpha = 0.0f;
[self.view addSubview:_flashView];

You can customize the color to your liking.
Note that we set the alpha property to 0.0f before attaching the subview.

Create the flashScreen method

Create the method that calls the UIView animation:

- (void)flashScreen
{
  _flashView.alpha = 0.6f;

  [UIView beginAnimations:@"flash" context:nil];
    [UIView setAnimationDuration:1.0f];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
    _flashView.alpha = 0.0f;
  [UIView commitAnimations];

}

Here I set the alpha property to 0.6f. This means that the view will come into view at 60% opacity. I did this because I found that 100% was too blinding when firing the flash method in rapid succession.

Room For Improvement

Some ideas for improving this code:

If you wanted to, you could pass in the starting opacity, duration, animation curve and initial background color as arguments to this method to make it more generic and flexible. This was a specific implementation to fit my specific needs, but if we make this code more generic we could reuse the code in multiple projects easier.