How to implement flip transition effect for UIView

Question

How to implement flip transition effect for UIView, as in flipboard application. here I already have a pattern that will flip from left to right or from right to left. But here I want to implement flash flip from top to bottom or top to bottom.

Answer 1

you can use the following line of codes for this kind of animation

[UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:5]; [UIView transitionFromView:view2 toView:view1 duration:3 options:UIViewAnimationOptionTransitionFlipFromBottom completion:NULL]; [UIView commitAnimations]; 

u can set the duration and transition of the animation as per requirement .. worked only in ios5 ..

Answer 2

check out this tutorial: http://www.gethugames.in/blog/2012/02/extended-epgltransitionview.html and this project: https://github.com/saiy2k/EPGLTransitionView

PS: His own blog and link to my EPGLTransitionView plugin

Answer 3

Here is the concept of how I would try to approach the problem. Maybe I will try to realize this in my free time so that I can have a sample at hand.

• When the animation starts, take a snapshot of the current UIView, reading its graphic context into a bitmap
• Create three (yes, three - bear with me_) UIView with dimensions so that they make up two halves of the flipped view, with two views for the area of ​​the right half
• Draw half the bitmap in the left view (first), the right half in the right view (second) in their respective drawRect: implementations drawRect:
• Hide original view
• Create the next view we want to switch to
• also get its contents into a bitmap
• hide next view
• make a third temporary UIView to draw the right half of the image (third)
• place the third under the second
• Animate half of the second flip along its left edge
• make the second show the left half of the next view
• Do the rest of the flip animation
• After making the transition, show the next view, hide all temporary views
• Et voila! At least I hope so.

I think that instead of these three UIViews, you could instead use one UIView with three layers of CAL.

And the problem is an interactive transition when the user swipes the pages with a finger.

I also think that there is the problem of flipping the image to have a double-sided layer. They did not have the opportunity to play with these properties and what they can help achieve.

Another solution would be to create a texture from the contents of the UIView and place an OpenGL surface on top of it (alpha-transparent CAEAGLLayer -based, of course). Then what you will do with the triangular buttons that are textured with this image is limited only by your imagination. I suppose that would also make it possible to create a Genie-like cart-to-cart animation used by the Mail iOS app.

Change: Oh, sorry, I was thinking about flipboards from right to left, and not from top to bottom, but the general idea, of course, is the same.