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 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 -5 (Minus 5)

Lion, iPhone, iOS 5, iCloud….

What ever happened to Apple TV? Do you really think Apple will just drop a “non-hobby” project in your living room and stop making money out of it? I don’t think so. As a matter of fact I think iOS 5 will be the OS to actually allow devs to start making money out of Apple TV with Apps. Well maybe not Apps, but maybe “enhanced widgets”. Over the next few days I will look more in-depth into widgets and iOS 5. Maybe Apple is combining functionality?

My feeling and opinion on the matter, is that Apple should introduce a Widget platform for developing widgets that would work across all iOS devices. Think about it, we have universal apps for iPhone & iPad. Same code but different UI. Well why not have widgets for all iOS devices (inc Apple TV) same code, different UI.

I have to say it is fascinating that there has been no mention of this anywhere, with all the rumours flying about.

WWDC 2011 – Day -6 (Minus 6)

In one week from now, 5,000 developers will be patiently lining up outside Moscone West in anticipation of this year’s Keynote speech. Everyone is wondering whether Steve Jobs will indeed make the usual appearance or not. Judging by the apparent push, by Apple Executives, to get as many journalists as possible to the event this year – I would safely say that Steve is bound to make an appearance. I mean after all, this is a major launch event. Two new operating systems, for a number of different platforms and potentially new hardware and new cloud services. COME ON! Steve will be there with bells on!

So our first rumour predication for this year’s Keynote is Lion. Well this is not really a rumour, when people like myself have installed the preview versions. It is more than guaranteed that Lion will be let free some time during June. Apple has just released another build of the upcoming Snow Leopard 10.6.8 update. One subtle addition to this build, is an improvement of the Mac App Store in preparation for Lion. Apple is certainly making Lion available through the App Store, all the previews have been exclusively available on the App Store only.

If I had to predict on something ground breaking for Lion, it would have to be something to do with Apple’s new North Carolina Data Centre (remember that one!). I have a feeling that the so called “iCloud” stuff, that Apple has been spending billions of dollars on, will be something of a glue between Macs & iOS devices.

Even though it is only very early in the morning still in San Francisco, I know exactly what I will be doing in exactly a week from now. Lining up for one of the top seats at Moscone West. See you there devs!

WWDC 2011 – Day -7 (Minus 7)

A whole year has already passed and WWDC is once again upon us. In one week from now Apple will once again open the doors of the Moscone West Conference Centre for all the eager developers. For the next two weeks I will extensively cover this year’s WWDC. I need to remind you all that with the exception of the Keynote, all other sessions are under NDA. Of course remember to follow me on twitter as I will be covering the WWDC 2011 Keynote live from San Francisco.

Day -7 (Minus 7)

Sunday 5 June is Day 0 and when delegates can collect their precious WWDC 2011 badge. Yes precious! This year’s tickets sold out in less than 8 hours, substantially quicker than last year’s 8 days. Tickets are still available on eBay, but will set you back more than twice of what Apple charged for this event.

Rumours Roundup

There are so many rumours circulating the Internet right now, on what will and won’t make it to this year’s Keynote, that is hard to know where to begin. I have hand selected some of the rumours, that I personally believe to be true. Over the next few days I will delve into more details about each one. But for now here is a list of all things Keynote!

  1. OS X Lion
  2. iOS 5
  3. iCloud
  4. iPhone 5
  5. Xcode & SDK Updates

The above list of course is only what I think will be addressed at the Keynote session. Of course more will be revealed once Apple sends out this year’s session list, the more “session to be announced” slots, the more new stuff to cover!

Maybe, just maybe Apple will introduce the iPhone 5 at the WWDC.

Image, courtesy of Ed Johnson.

wpid-iphone5small-2011-05-29-12-21.png