csharpblog.net

Hello from 38,000 feet somewhere over British Columbia, Canada en route to San Francisco to attend this year’s WWDC. In this series of tutorials we will look at some basic UIView Animations. UIView is an exceptionally powerful class that is pretty much the basis of everything UI in iOS. Pretty much every UIKit control inherits from UIView. UIView is the silent underdog of the UIKit. Not many people respect it and sometimes forget how powerful it actually is and how much it can simplify their lives. I’ve seen a lot of engineers diving straight into using CoreGraphics or CoreAnimation when a similar, if not identical, animation could be achieved using UIView and nothing but UIView. Please do not think that CG and CA are not useful, on the contrary but iOS and CocoaTouch are all about simplicity. If a solution to a problem is becoming too complex, then either the problem is not broken down sufficiently, the solution is wrong or a mixture of both.

So let’s look at some simple UIView animations. Please note that for the purposes of this tutorial, the use of ARC is assumed. The following is not encouraged in iOS 4.0 and above, instead you should aim to use block-based animation methods instead. This tutorial is using non block-based examples for simplicity.

Fade In Animation

The first animation is a simple Image Fade In. The screenshot below shows the final stage of the animation. When first loaded the envelope image is not visible until the button below is tapped. Once that is done the image will fade in slowly. The animation duration will take one second to complete. Of course the duration is completely configurable.

Let’s take a look at the code for this sample:

Header file:

//

// ViewController.h

// animationSample

//

// Created by Joseph Megkousoglou on 09/06/2012.

// Copyright (c) 2012 Joseph Megkousoglou. All rights reserved.

//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (nonatomic, strong) IBOutlet UIImageView *imgPhoto;

– (IBAction)btnShow:(id)sender;

@end

Source file:

#import “ViewController.h”

@interface ViewController ()

@end

@implementation ViewController

@synthesize imgPhoto = _imgPhoto;

– (void)viewDidLoad

{

[super viewDidLoad];

        // Do any additional setup after loading the view, typically from a nib.

}

– (void)viewDidUnload

{

[super viewDidUnload];

// Release any retained subviews of the main view.

}

– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation

{

return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);

}

– (IBAction)btnShow:(id)sender

{

[UIView beginAnimations:@”imgPhone Fade In Animation” context:nil];

[UIView setAnimationDuration:1.0];

self.imgPhoto.alpha = 1.0;

[UIView commitAnimations];

}

@end

The above code is pretty simple, but let’s go over some finer details. First of all you are starting by letting the compiler know that you want to perform an animation. You do this by calling:

+ (void)beginAnimations:(NSString *)animationID context:(void *)context

This is a very trivial class method of UIView you are calling, but it is the beginning of the animation magic! If your application has many different animations, it is advisable to pick a descriptive “animationID” as this will come in handy if you wish to debug this animation later on.

+ (void)setAnimationDuration:(NSTimeInterval)duration

setAnimationDuration allows you to specify how long you want this animation to last. The duration is measured in seconds.

+ (void)commitAnimations

Finally this how you tell the compiler that you are finished with your animation.

So here’s a couple of points so far. All these methods are class methods, because they will apply the animation to the current view. Secondly all the “stuff” you want to animate can now be easily included in between the begin and commit methods. This example only demonstrates the animation of a single control, but you can animate as many controls as you want in a single animation. Just remember that all the animations will take the same amount of time to complete.

So in this example all we are doing is setting the alpha value of the image from 0 to 1. This will result in the image becoming completely visible. If we just set the alpha value outside of a UIView animation it will just make the image instantly appear. By setting the value within the animation methods, we are telling the framework to slowly make the image visible over a period of one second. Basically imagine running a for loop from 0.0 to 1.0, incrementing the alpha value just the right amount in every iteration in order to reach 1.0 in one second. This is how you get to realise how powerful UIView’s animations are. If you were doing this manually you would need to keep track of the state of the control, ensure that it takes exactly one second (so you would have to ensure that the increments are specific to the performance of the device as some older iOS devices could take longer to execute this), and of course do all of this in a completely separate thread so the main UI thread is not blocked.

I hope this first tutorial gives you a first glimpse of how powerful UIView is. Of course you are only limited by your creativity in what you can do within the “begin” and “commit” methods! Have fun!!!

More coming soon!