0

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?

Nic Hubbard
  • 41,587
  • 63
  • 251
  • 412

1 Answers1

3

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.

Community
  • 1
  • 1
Noah Witherspoon
  • 57,021
  • 16
  • 130
  • 131
  • I do like this idea, but I am wondering if Core Animation will give me a little more flexibility. My implementation is more advanced that what I described, and will use multiple flip views like this. Would CA be faster? – Nic Hubbard Dec 09 '11 at 21:56
  • Probably. Updated my answer to elaborate on that. – Noah Witherspoon Dec 09 '11 at 23:46
  • I had a chance to try this and am getting the following error: Semantic Issue: Assigning to 'CGAffineTransform' (aka 'struct CGAffineTransform') from incompatible type 'CATransform3D' (aka 'struct CATransform3D'). What did I do wrong? – Nic Hubbard Dec 13 '11 at 17:22
  • Sounds like you’re trying to apply the transform to a view instead of a layer. You need to do `theView.layer.transform = ...`, not just `theView.transform`—UIView does have a `transform` property, but it doesn’t do 3D, only affine transformations. – Noah Witherspoon Dec 13 '11 at 17:57