CODEWITHSUNDEEP
iphoneuiviewtransition
user907418
user907418

Reputation: 33

How to implement flip transition effect for UIView

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.

Upvotes: 3

Views: 8796

Answers (3)

macbirdie
macbirdie

Reputation: 16193

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.

Upvotes: 0

saiy2k
saiy2k

Reputation: 1862

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

Upvotes: 1

vishy
vishy

Reputation: 3231

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..

Upvotes: 3

Related Questions