How do I make an expand/contract transition between views on iOS?

Question

I\'m trying to make a transition animation in iOS where a view or view controller appears to expand to fill the whole screen, then contract back to its former position when done

Answer 1

After watching the Youtube iPad animation, I figured out that it's just an illusion. Let's say that there's a SearchViewController for the search results, and a DetailViewController for the video itself, and the additional info of the video.

DetailViewController has a method like - (id)initWithFullscreen which starts the view controller using the full screen space with the video.

So the sequence goes like this:

1. SearchViewController presents its results.
2. User clicks on a video.
3. DetailViewController is created with initWithFullscreen, but not presented
4. The "Zoom in" animation begins. (Notice that we are still on the SearchViewController, and this animation is just a simple View animation)
5. The "Zoom in" animation ends, presents the DetailViewController with animated:NO (as Anomie mentioned).
6. The DetailViewController is now presented, and using full space.

It doesn't seem that the youtube app is doing anything fancier, the give-away was that the "Zoom in" animation zooms to a black square, before presenting the full video.

Answer 2

1. Making the effect is simple. You take the full-sized view, initialize its transform and center to position it on top of the thumbnail, add it to the appropriate superview, and then in an animation block reset the transform and center to position it in the final position. To dismiss the view, just do the opposite: in an animation block set transform and center to position it on top of the thumbnail, and then remove it completely in the completion block.

   Note that trying to zoom from a point (i.e. a rectangle with 0 width and 0 height) will screw things up. If you're wanting to do that, zoom from a rectangle with width/height something like 0.00001 instead.

2. One way would be to do the same as in #1, and then call presentModalViewController:animated: with animated NO to present the actual view controller when the animation is complete (which, if done right, would result in no visible difference due to the presentModalViewController:animated: call). And dismissModalViewControllerAnimated: with NO followed by the same as in #1 to dismiss.

   Or you could manipulate the modal view controller's view directly as in #1, and accept that parentViewController, interfaceOrientation, and some other stuff just won't work right in the modal view controller since Apple doesn't support us creating our own container view controllers.