UIView Animation Flip With Axis on at Top of View

Question

I have a UIView that I would like to animate a flip up. This isn't like UIViewAnimationOptionTransitionFlipFromTop because that places that axis in the middle of the view. I would like to have the axis at the top of the view, so that it flips up similar to how a pad of paper flips from the top axis (NOT a page peel).

[UIView transitionWithView:self.view duration:0.6
                   options:UIViewAnimationOptionTransitionFlipFromTopAxis // <---- Wish there was an option like this                 
                animations:^{
                    // Exchange the views here


                } completion:NULL];

I am thinking it isn't possible to do this with the standard UIView animation options. What is the alternative to this, where I can control the flip axis?

Answer 1

The simplest way would probably be to enclose the view you want to flip in a taller, offset, transparent container view and then flip that container. In other words:

  |-----|
  |     |
  |  B  |
  |     |
0 |     |
  ||---||
  || A ||
  ||---||
  |-----|

A is the view you want to flip up; B is the container; 0 is the top of the screen. Apply your transition to B; by flipping B across its middle, you flip A along its top.

You could also do something more complicated and just implement the flip yourself using Core Animation, but this is a bit easier.

Edited:

If you want to take the Core Animation approach, basically what you need to do is apply a CATransform3D to the layer to rotate it around the horizontal axis, i.e. theLayer.transform = CATransform3DMakeRotation(M_PI, 1, 0, 0). That’ll flip it across its middle, though, which is what you don’t want, so you also need to change the layer’s anchorPoint from its default value of (0.5, 0.5) to (0.5, 0) so that its “origin” is at the center of its top edge. You might also want to apply a perspective effect to the flip transformation using the CATransform3D’s m34 member, as described here.