Simple UIView Animations – Part 2

WWDC 2012 registration has now opened! But I still have time for coffee at the Ferry Building and a quick second tutorial on UIView Animations.

In this tutorial we will build on top of our last sample. So far we have managed to fade in a picture on our App’s main UIView. Now we will go ahead and make things a little bit more interesting by mixing UIView animations and CoreGraphics transformations. This is a very simple yet very powerful technique. Let’s go ahead and rotate our image.

Our UI is now slightly changed. We have added a new “Rotate Photo” button, which when tapped it will make the photo of the Golden Gate Bridge rotate by 180 degrees (upside down). Of course the rotation will be animated and last one second.

wpid-image2-2012-06-10-09-03.png

Let’s take a look at the code.

– (IBAction)btnRotate:(id)sender

{

[UIView beginAnimations:@”imgPhoto Rotate” context:nil];

[UIView setAnimationDuration:1.0];

CGAffineTransform transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(180));

self.imgPhoto.transform = transform;

[UIView commitAnimations];

}

As in the previous sample, we declare our UIView animations and the only difference here is that we define a CoreGraphics affine transformation matrix. By using the CGAffineTransformMakeRotation we are defining an affine transformation matrix constructed from the given rotation value. The value is in radians. To simplify this, you can define a DEGREES_TO_RADIANS macro that converts degrees to radians:

#define DEGREES_TO_RADIANS(angle) (angle / 180.0 * M_PI)

Again please remember that had you not included your transform in a UIView animation it would have simply rotated the image instantly without animating the effect. So go ahead and have fun with this.

In the next tutorial we will start combining multiple control animations!

Off to register at Moscone West!

Simple UIView Animations – Part 1

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.

wpid-image1-2012-06-9-08-46.png

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!

WWDC 2012 – Minus 4 days

4 days until this year’s Apple WWDC in San Francisco. This is a very special WWDC indeed as it will be the first post-Steve WWDC, where Tim Cook is expected to give the Keynote address. As always there are tons of rumours flying about. Here’s my predictions for what will be announced:

  1. Mountain Lion – this is a given, but we will get even more details on new features and APIs available.
  2. iOS 6 preview – it will come as a great shock to everyone if Apple doesn’t preview this during the keynote.
  3. Google Maps replacement APIs. MapKit is to be revamped to work with the new alleged Apple mapping service.
  4. New hardware – not sure on this one. If any hardware is demoed it will be the new iPhone. I am not expecting new computer models to be released.

Let’s be realistic. This year’s keynote is what? An hour and a half long? Well I bet only 2 topics will covered. Last year’s keynote was 2 hours and only 3 topics were covered: Lion, iOS 5 and iCloud.

Very exciting never the less, as tons of new APIs are too be announced in iOS and OS X!!! Looking forward to new MapKit and Facebook APIs.

See you all there in 4 days!!!