57
  1. Is there a simple way to do the Curl page flipping animation? A Curl animation is animation of pages flipping, including the page above rolling and the shadows over the lower page.
  2. What is the recommended way to do a "gallery" that displays two pages at a time (just like a book)?

    Is it:

    1. Letting the adapter display a linear layout of two images at a time? (it won't let me show a page flipping over the other like a book)
    2. Using two pages, placing somehow one near the other, and then when it's time to animate -move the next two pages over? What is the better way that would enable displaying the left page flipping over the right page?
1

4 Answers 4

22

I'm implementing a 2D page curl in the native canvas. Check my answer in: Implement page curl on android?

EDIT: The code project of my implementation: http://code.google.com/p/android-page-curl/ EDIT2: Links updated

5
  • First, thanks for the links to a 3đ attempt. Switcher is nice but it does not implement what they did in Apple. You should see it in iBooks to understand.
    – Meymann
    Feb 28, 2011 at 4:47
  • @Meymann it's not a flipper (named the project a bit badly...) it's a page curl effect. The project logo is just a screen shot from the app itself. Try it out.
    – Moss
    Feb 28, 2011 at 16:12
  • 1
    You know what? I take it back. Well, it's still not the Curl as Apple presents it but it's very impressive and yeah, when the price for Apple like curl is compatibility and lots of time, I'd rather change the requirements to use your code.
    – Meymann
    Jul 6, 2011 at 4:44
  • Nice to hear it :D I hope that soon the curl will have it's adapter so that it will use any existing Android view.
    – Moss
    Jul 6, 2011 at 8:13
  • Yup, I suppose it should be satisfactory for now. If I wait for an Apple Curl, I should wait long. Apple did put plenty of money on it so I bet it's patented or so. I don't believe that in Android people will do it soon. After all, transparency and reflection is so much work for so little wow effect. I guess that those who wish to do real 3D effect will use something like Unity 3D.
    – Meymann
    Mar 3, 2013 at 9:29
6

I am using this code. Its really really perfect for any one to understand and use. Thanks a lot to Harism

GitHub Link for Page Curl Animation in android With OpenGL

1
  • Hey hi , I am also using the code by harism but got into a issue when try to go back to the previous pages the index doesn't stay correct and bitmaps doesn't get refreshed at the right indexes. stackoverflow.com/q/16772734/1503130 , this is a thread I have created, Please help with a suggestion or idea.
    – Prateek
    May 28, 2013 at 6:27
2

I haven't worked on the android before, but it seems to me the best way to do a page flipping type of display would be to draw it in three layers. The first being the first page's text, the second being the "page" underneath, and the third being the next page. If you draw them from back to front, the only thing the user will see will be the text on the first page.

Now, Once you have that, you'll want to do some sort of curling/flipping animation based on whatever controls you are using. Simply choose whatever method works best for you for doing that animation, but while you are doing that, have the part of the page that isn't there anymore alpha'd out. This will allow you to see the text of the page underneath (Okay, I lied. You'll need a background behind that text too).

The problem at this point is you're still drawing the text twice over the same space, so you'll want to blend the first page's text with the animation under it. In this way, the text that is over the 0 alpha sections will be invisible. It won't bend with the animation, so that may still be an issue, but depending on the speed of the flip that might be fine still. When the animation is done, simply set the first page = the second, the animation reset to plain white, and the second page = the new second page.

The shadow effect can be done simply by partially alphaing out some black behind the page turn animation. Draw over second page (as the animation layer already is doing) and voila!

I believe your two page question could use a very similar method. Good luck

4
  • Thanks but I guess there are a few things that you might have not understood about Android and the problem: A. The CURL means rolling of a page. Shifting pages one on top of another requires 2 pages in Android and one simple animation. The CURL involves a mathematical model with twisting, 3D and shading. B. In Android, you should interpolate the animations, each in a different path and acceleration, in a way that the shadow and the pages are synchronised. This is almost impossible. Even if you succeed, the performance would be awkward. Thanks M.
    – Meymann
    Jun 26, 2010 at 16:02
  • Meymann: I think you just contradicted your question and called the task of doing a page curl impossible. Lunin is right, though, the best way to accomplish a page curl is to do a strictly 2D animation (which can be done fairly easily on most Android device processors) on a canvas control. This can be animated using a timer. It could be done with OpenGL, sure, but nearly half of Android devices are running either without hardware acceleration or on sub-par GPUs. 3D is a poor choice of implementation. A simply 2D version (with some gradient drop shadows, of course) would fit the bill.
    – mattbasta
    Jun 28, 2010 at 6:34
  • Again: "Curl" is the act of flipping pages. Flipping with an effect of shadowing, and having the tip of the page rolled (with transparency, shadowing AND 3D) over the lower page. CURL in iPhone OS is a fruit of a month of research and mathematical models. With Android, you can shift one page over another. Shading means another perfectly synchronized layer (another problem), and there is no way of 3D rolling a view with just 2D graphics.
    – Meymann
    Jul 15, 2010 at 9:21
  • scuse the necro - is there any way of doing a grab of each page and working with the images rather than the actual pages?
    – overbyte
    Sep 16, 2011 at 10:07
1

This is 3d animation project (based on OpenGL 2.0) - http://anettosoftware.co.uk/npc.php

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.