At the end of the tutorial, I’ll provide you with the resources needed to do this for an iPhone and an iPad in portrait orientation (landscape orientation resources are also included). If you’re targeting a different device configuration/orientation, then by the time you’re finished with the tutorial, you should have an idea of how to produce the page curl resources on your own (hint: the “animation” only consists of two images files).
While we don’t have an API for creating page curls just yet, it can still be done. Currently, there are two ways to implement the effect in Corona:
- Use a frame-based animation. This requires you have several full-screen images that will “flip” through to create the animation (similar to how you’d animate a character, but using much larger resources). This method is obviously a resource-hog (and could actually crash your app, depending on your target device).
- Create an “optical illusion” using a single image, a bitmap mask, and transitions (recommended).
In case you haven’t already guessed, we’ll be going over option #2.
Step 1. Preliminary Work
In order to create page curl effect, you’ll obviously need some pages. Most likely, the “pages” in your app will probably be represented by display groups. For the sake of simplicity, we’ll use two static images to represent the pages: page1.jpg and page2.jpg.
You’ll also need two more images. One that will represent the “page curl”, and a bitmap mask. With the mask, pay close attention to the fact that it has black edges on the top, bottom, and right-sides of the image:
And here’s the code to load the pages, and the curl image (loading the bitmap mask will come later):
Step 2. Page Curl Functions
The functions below are responsible for beginning the next and previous page-turning effects. I’ll explain the logic behind it all, but first, here’s the code:
The gotoNext() is responsible for a “next page” curl effect, while the gotoPrevious() does the opposite (initiates a “previous page” curl effect).
Here’s the order-of-logic for the gotoNext() function:
- Insert the page-to-turn and the curl image into the ‘turnGroup’ display group.
- Apply the bitmap mask to the turnGroup.
- Ensure the reference point for the page and curl is set to the bottom right.
- Rotate the curl image and place it in its start position.
- Begin the transition.
And here’s gotoPrevious() in a nutshell:
- Ensure the curl image is visible.
- Setup the onComplete listener for the transition (which is responsible for hiding the page curl and removing the bitmap mask from the turnGroup).
- Begin the animation transition.
Step 3. Initiate the Page Curl
For demonstration purposes, I’ll call gotoNext() after a 2 second delay, and then 3 seconds later the page will turn back to the first page:
timer.performWithDelay( 2000, function() gotoNext( page1, curlPage, 500 ); end )
timer.performWithDelay( 5000, function() gotoPrevious( curlPage, 500 ); end )
And here is is in action:
And there you have it—a lightweight, efficient way to implement a great-looking page curl effect in Corona. Remember, you’ll have to create your own page curl graphic and mask depending on your target resolution and orientation, but as long as you make them look similar to the one’s shown in this tutorial, the outcome should be the same.
Also, depending on your target resolution, you may have to make small adjustments as far as where the page curl image initially begins, how fast the animation goes, etc. In the project files, I’ve included masks and pages for iPhone and iPad dimensions in both portrait and landscape orientations.
When you’re ready: Download the project files from Github.
Posted by Jonathan Beebe. Thanks for reading...