iOS Quick Tips - Flip Animation

Whenever you have views in your fancy applications you`re probably thinking about some animations to make navigation smoother between some screens or between views.
Let`s imagine that we are building a card based game and that at some point we want to touch the card and it`ll flip revealing it front side.

Start by creating a new project on xcode. File > New > New Project or simply command+shift+N.
Select single view application and click next. Fill the info in the next screen, don`t check anything and let iphone device selected.

Create two new files a view nib and a view controller named FlipAnimationCardView and FlipAnimationCardViewController.
After creating them open the nib and attach its file owner to our view controller and attach our root view to the view controller.
After it you can put two UIButton, make them fullscreen with different image in each one, them link them and its touch up actions to our view controller.
The video bellow show how to do these steps.

Now we can place our animation in action with onCardBackTouched and onCardFrontTouched.
UIView has a static methods for animation, we`ll use transitionWithView but you can play with animateWithDuration too.



In the code above we are saying to the UIView class that we want a transition using btnCardBack during 1.5 seconds and we are setting the animation to be a Flip From Right type and telling the UIView to animate it with a EaseInOut curve so it will be smooth. There are more options and you only need to separate the parameters with | so the function identify what it have to do.
During the animation we ask the view to change btnCardBack and btnCardFront alpha property to 0.0 and 1.0, so it will vanish from the screen showing the front part (btnCardFront).
Every property that can be animated and is inserted into animations block will be animated by the UIView method.

The code above only animate our back part of the card, how can we animate its front card at the same time so it will appear like we are really flipping it?

We need to add this second part, the same code but passing btnCardFront as the view to use in the transition.

From here you can insert this into onCardBackTouched and the result should be 

Before we go testing lets tie app delegate to our new view controller so it`ll appear when the app execute.

Your appdelegate.h should be like this



In the .m file your didFinishLaunching method should be similar to this


Now build your code and test it on the simulator, you will see the card flipping nice and smoothly, but when you touch it again nothing happens, why? Because we didn`t created any animation to make it flip back. To do this insert the following code into onCardFrontTouched



If you execute it at this stage you will see the card flip back after you see the front part, very nice and not so hard to do. This code we made works for both fullscreen and not-fullscreen cards, but there is a shortcut for fullscreen cards.

Change our touch actions code to be like this



Cleaner than before but doesn`t work for cards smaller than the screen the reason is that transitionFromView:toView: animate the view and its parent.

Now to the last golden egg, what if we want the card to flip automagically after some time? We have two options performSelector and NSTimer, the first one will call our method after a time delay the second is a timer that can be scheduled to happen and have a loop parameter.
They have its pros and cons and I`ll not discuss this right now and for this tip we will use performSelector.
I decided to use viewWillAppear, but you can call your performSelector or register your timer wherever you want.

Add viewWillAppear to you view controller or code the performSelector inside it passing onCardBackTouched as parameter



Build and play with it, you can go further and flip it back automagically, insert multiple cards, make a category helper class to call this code from a view instance or something similar, just have fun!