How to implement flip transition effect for UIView

Question

How to implement flip transition effect for UIView as like in "flipboard" application. here i already have sample which will make flip from left to right or right to left. But here i want to implement fold flip from bottom to top or top to bottom.

try to search FGallery in Github code projects..download code and see there is animation on seeAll button — Mehul Mistri, Jan 25 '12 at 11:02
Thank you for your response...Here i want to implement view transition effect like in "Flipboard" application.But FGallery not have such transition effect. — user907418, Jan 25 '12 at 11:14

vishy · Answer 1 · 2012-01-25T12:38:28.687

3

you can use the below line of codes for this kind of animations

[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 animation transition as per the requirement.. was working only in ios5..

edited Jan 25 '12 at 12:38

answered Jan 25 '12 at 11:25

vishy

3,241
1
20
25

Please see the flipboard application its not have curldown animation. – user907418 Jan 25 '12 at 11:27
1

Note that transitionFromView is iOS 4.0 and later – Joel Mar 06 '12 at 06:18
1

You don't need the beginAnimations/commitAnimations calls. Just use the transitionFromView: call and it should work fine. – sabes Mar 03 '14 at 18:55

saiy2k · Answer 2 · 2012-07-09T14:01:53.780

1

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

PS: Its my own blog and link to my fork of EPGLTransitionView

edited Jul 09 '12 at 14:01

answered Mar 03 '12 at 04:53

saiy2k

1,852
1
23
42

how to implement bottom to to flip like option 2 in your project.? – Preetam Jadakar Oct 21 '13 at 11:02
you have created new project and said it contains both top-down and down-top flips...but i can't fount at https://github.com/saiy2k/EPGLTransitionView – Preetam Jadakar Oct 21 '13 at 11:04
you can reverse the direction of flips, but switching the `fwdDirection` parameter of `[[EPGLTransitionView alloc] initWithView1: andView2: delegate: fwdDirection:];` – saiy2k Oct 29 '13 at 11:21

score 0 · Answer 3 · edited Sep 22 '19 at 13:06

Here's a concept of how I would try to approach the problem. Maybe I'll try to implement it in free time to have a sample handy.

The moment you start the animation, make a snapshot of current UIView by reading its graphics context into a bitmap
Create three (yeah, three -- bear with me_) UIViews with sizes so that they make up for two halves of the view to be flipped, with two views for area of the right half
Draw half of the bitmap on the left view (first one), right half on the right view (second one), in their respective drawRect: implementations
Hide the original view
Create the next view we want to transition to
get its contents into a bitmap as well
hide the next view
make the third temporary UIView to draw the right half of the image (third one)
position the third one under the second one
Animate half of the flip of the second one along its left edge
make the second one display left half of the next view
Make the rest of the flip animation
After having done the transition, show the next view, hide all temporary views
Et voilla! At least I hope.

I think that instead of those three UIViews you could use one UIView with three CALayers instead.

And there's an issue of doing the transition interactively, with the user sliding his finger over the pages.

I also I think there's an issue of the flipping view to have a two-sided layer. Haven't had the opportunity to play with those properties and what they can help to achieve.

Another solution would be to create a texture from UIView's contents and put up an OpenGL surface over it (alpha-transparent CAEAGLLayer-based one of course). Then what you'll do with the triangles that are textured with that image is only limited by your imagination. I guess that would also allow to create a Genie-like move-to-trash animation that Mail iOS app uses.

Edit: Oh, sorry, I was thinking of a right-to-left flipboard-style flip, not top-to-bottom, but overall idea is the same of course.

How to implement flip transition effect for UIView

3 Answers3