View animations on the iPhone are wonderful. Used properly they will delight your users and help your application stand out. The iOS provides a suite of methods for animating your interface, including the excellent  UIView class method + (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations, which takes a block of animations that let you, for example, smoothly resize or move a view or adjust it’s alpha value to fade it in and out.

But what if you want to do a more complex transition? You might be tempted to dip into Core Animation and transformation matrixes. You have complete control over the animation, the timing, callbacks and so on. For a quick flip or other common transformation, though, UIView remains your best friend.

UIView offers two methods for complex animated transitions:

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView 
	duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options 
	completion:(void (^)(BOOL finished))completion
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration 
	options:(UIViewAnimationOptions)options animations:(void (^)(void))animations 
	completion:(void (^)(BOOL finished))completion

These aren’t the most straightforward methods, as the confusion as StackOverflow indicates, and the documentation doesn’t clearly explain what the fromView, toView and withView should be or even the animations themselves. Yet, for a particular kind of transition, things couldn’t be easier.

In our case we want to transition from one image to another using UIImageView. Specifically we want to flip from one image to the other, with the second image as the backside of the first. Like turning a business card over to view the reverse side.

The first point to be clear on is the views, or view, involved. You might think that a transition will involve two UIImageViews, each displaying a single image, and that we would use the transitionFromView:toView: method. While it might be possible to do it this way, we have it much simpler.

It seems that UIImageView has some transition deliciousness baked right into it.  We don’t actually need two separate image views each holding its own image. UIImageView can perform the transition itself. We only need the single UIImageView and the two images we want. Which means we’ll be using the transitionWithView: method instead.

Make sure you have a UIImageView on the screen and it is already displaying an image. Flip from the first image to the next with a single call to transitionWithView:

UIImageView *imageView = ...;
UIImage *secondImage = ...;

[UIView transitionWithView:imageView duration:0.5 
	options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
	imageView.image = secondImage;
} completion:nil];

That’s it. With our view in place, the second image loaded, and our animation specified, the UIImageView transition machinery takes care of everything. We end up with a lovely transition from the front side to the back side of a single image view with nothing more than a familiar call to the UIImageView’s image setter.

Animations are awesome. From the start they helped make the iPhone a fun, amazing device. While complex animations can be confusing, the iOS helps, and in many cases you don’t need to look any further than UIKit.

 

Leave a Reply