Animate that Apple Thing in iOS

That Thing can be just about anything.  Basic animation in iOS is super easy and here’s an example using a label that contains nothing except some text to show the user.

Take a look at this screenshot (click on it if you need to see it a bit larger).  Here’s the lay of the land.  You are looking at your Storyboard screen.  You have a view in front of you.  You have a label you plopped onto the view.  You want to show it to the user upon some event, say a button click, and then make it disappear after a couple of seconds.  You want it to animate in and out, so it fades in effect, and is pleasant to the eye.

ios UILabel scott sappenfield

UILabel in storyboard screenshot

In your case, you have the label visible on your screen so you can work with it in the Interface Builder.  However, you don’t want the user to see the label until some event occurs, again, perhaps a button click.  You can set the alpha transparency factor in the properties using the Interface Builder, but you can also set it in code.  That’s what we’ll do just to demonstrate.

But first things first, let’s call this label something. In your view controller’s header .h file, you have it titled something amazingly uninteresting and forgettable, and unmaintainable as LabelNotifications. Please don’t do this in practice!

@property (weak, nonatomic) IBOutlet UILabel *LabelNotifications;

And in your view controller’s corresponding .m file, you synthesized it. I like using an underscore followed by a lowercase letter, but that’s just what I like to do.

@synthesize LabelNotifications = _labelNotifications;

And in your .m file, you can now get on with setting the transparency we talked about, say in your viewDidLoad method.

[_labelNotifications setAlpha:0.0];

Finally, this should be very straightforward. Perhaps this is the code you put in your event method (button click perhaps). Fade in for a couple of seconds to alpha transparency 1.0 and then fade out for a few more seconds after a couple second delay, setting the alpha back to 0.0.

        _labelNotifications.text = @"I am a label. I am going to fade in and out for the user!";
        [UIView animateWithDuration:2.0
                              delay:0.0
                            options:UIViewAnimationCurveEaseInOut
                         animations:^ {
                             _labelNotifications.alpha = 1.0;
                             NSLog(@"Animating notification label in");
                         }
                         completion:^(BOOL finished) {
                             if(finished)
                             {
                                 [UIView animateWithDuration:3.0
                                                       delay:2.0
                                                     options:UIViewAnimationCurveEaseInOut
                                                  animations:^(void)
                                  {
                                      _labelNotifications.alpha = 0.0;
                                      NSLog(@"Animating notification label out");
                                  }
                                                  completion:^(BOOL finished)
                                  {
                                  }];
                             }
                         }];

And that is all there is to it. Easy.

Advertisements
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: