Please follow me on twitter for live coverage of this year’s WWDC Keynote.
Please follow me on twitter for live coverage of this year’s WWDC Keynote.
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.
Let’s take a look at the code.
[UIView beginAnimations:@”imgPhoto Rotate” context:nil];
CGAffineTransform transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(180));
self.imgPhoto.transform = transform;
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!
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:
// Created by Joseph Megkousoglou on 09/06/2012.
// Copyright (c) 2012 Joseph Megkousoglou. All rights reserved.
@interface ViewController : UIViewController
@property (nonatomic, strong) IBOutlet UIImageView *imgPhoto;
@interface ViewController ()
@synthesize imgPhoto = _imgPhoto;
// Do any additional setup after loading the view, typically from a nib.
// Release any retained subviews of the main view.
return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
[UIView beginAnimations:@”imgPhone Fade In Animation” context:nil];
self.imgPhoto.alpha = 1.0;
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.
setAnimationDuration allows you to specify how long you want this animation to last. The duration is measured in seconds.
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!
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:
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!!!
Today Apple released this year’s WWDC 2012 Schedule. As it is customary the last 2 years, Apple also releases great iOS apps for attendees to keep track of their schedule.
Today Apple finally announced this year’s WWDC dates. http://developer.apple.com/wwdc
Recently we worked with Microsoft on a case study project for the launch of SQL Server 2012. Read the full story and watch the video on Microsoft’s web site.
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!
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.
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