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!

Advertisements

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!!!

WWDC 2011 – Day 0

Registration for this year’s WWDC is less than an hour away. Despite knowing what to expect I am still excited, surprised and thrilled to all the excitement and attention this event attracts. You only need to look around you and there are like-minded geeks everywhere. On my flight to San Francisco yesterday, I was surprised to see three guys, sitting next to each other, with their MacBooks on coding away together and debating technical solutions. While I spent a few hours, with an ex-colleague, debating and discussing design ideas.

Fellow attendees are all over San Francisco. I hooked up with a number of guys from Twitter last night for some drinks. We all walked past Moscone West, and we all took pictures of the venue. Show me another IT company or event that attracts such a passionate response. Yes there’s Google I/O and TechEd, but nothing like WWDC.

Here’s some pictures of Moscone West from last night. See you after registration!

wpid-photo1-2011-06-5-08-112.jpg

wpid-photo3-2011-06-5-08-111.jpg

WWDC 2011 – Day -1 (Minus 1)

The pilgrimage begins. In just over an hour, I will be on my way to San Francisco for this year’s WWDC. The last few days have been very exciting in the world of Apple rumours. Some true and some not. But most interestingly is Apple’s slip up on displaying information about ‘automatic download’ over-the-air updates in iOS 5. Of course it will all be revealed in less than 48 hours. I am slightly disappointed as I expected Apple to release 10.6.8 on Friday in preparation for Monday’s Keynote. Of course that is a disappointment as we are all expecting Steve to make Lion available on Monday. That might actually not be the case though :-(.

One final thought, as I am getting ready to board my flight. Apple has now surpassed RIM in US Smartphone usage. I can only expect that Monday’s preview of iOS 5 will make Apple’s competitors push their bar even higher. Apple chose to abandon their usual April preview of iOS, like they have done in the past. I can only assume that what they will be releasing is a much bigger upgrade than 3.0 to 4.0 was.

WWDC 2011 – Day -3 (Minus 3)

Everything seems to be going like clockwork. Apple just released the WWDC 2011 App. It’s available on iTunes this year. But you will need an Apple ID that is associated with a WWDC Ticket to view any content. I am afraid I can’t disclose anything in the App or any of the scheduled sessions. But I can say this, Apple did listen to feedback from last year and added some nice touches that will make everyone’s life at the conference much easier!

Also banners have started appearing around the Moscone West centre and the main ones seem to focus on:

Lion + 5 + iCloud = WWDC

wpid-map-2011-06-2-21-55.png

WWDC 2011 – Day -4 (Minus 4)

Well Day -5 was certainly very interesting and full of surprises from Apple. First of all Apple confirmed that Steve Jobs will be the Keynote speaker. Although the PR story goes on to state that Steve won’t be doing all the work this year, and that “a team of Apple executives” will help him along. Well we can only guess who these guys are, usual crowd. The one question that will be on everyone’s mind is, why isn’t Steve doing the Keynote by himself? Is he just filling in the gaps between the VPs of all the different technologies presented? Is he still too ill to actually host a two-hour keynote by himself? Let’s hope not.

So Apple officially let the cat out yesterday. iCloud. So iCloud is actually going to happen. But what is it? What will it do? Did Apple invest billions of dollars in a new North Carolina data centre so that we can all just store our music and videos there? I don’t think so. I can’t possibly see Steve going on stage on Monday in Moscone West and saying “guess what? here’s Apple’s DropBox!”. No that is not Apple. Apple innovates rather than throw something together quickly. Also we are forgetting the most important aspect here. This is after all a Developers conference and not an iTunes/iPod Media Event. iCloud will have to do more than just storage and will have to have some relevance to developers.

On a final thought, yesterday Lodsys did actually file law suits against some high profile developers that use In-App purchasing in their Apps. Personally I think it very lame of Lodsys to go after these guys, when there is a very clear licensing agreement between Apple and Lodsys. This will certainly be a breaker for Lodsys. Apple is more than certainly going to back the devs up, and Lodsys will pay and will pay well!

There are already images of Moscone West getting decorated with the usual Apple logo, but as I am not in San Francisco for another 3 days, here’s one picture from last year’s event.

wpid-img_2123-2011-06-1-08-37.png