Update: thanks to Elliott’s comment, I was able to remove the screen capturing portion of the code since UIKit captures the screen FOR us immediately before the animation fires. This eliminates a lot of memory usage. Thanks Elliott!
I’m a big fan of the Square iPhone app. It is a great service with a beautiful and extremely well-designed interface.
But this isn’t a commercial for Square—I’m going to walk you through step-by-step how to implement that really cool page curl animation they use when you hit the “Clear” button. Don’t know what I’m talking about? Here’s the effect in action:
So if you have got an application that does something and then clears the screen, how do you go about implementing this in your own app?
There are four basic steps involved in creating this effect:
- Add a blank transparent UIView to your stack.
- Do all the clearing of interface elements and reset everything the way you want.
- Initialize the page curl effect to peel away the dummy UIView.
- Remove the UIView from the view hierarchy and then from memory.
Here’s a demo video of what we’re going to make:
Let’s walk through the steps. (Note: This tutorial assumes you know how to create IBOutlets and IBActions and connect them in Xcode’s Interface Builder view.)
First we want to create an IBAction for your button that’s going to initialize the action. Create the method in your .m and .h files and wire up the action to the appropriate interface element (usually a UIButton).
Next, we’ll add the code to actually perform our task. We’ll be using blocks to handle the completion instead of delegate methods because it just makes the code a little cleaner.
Here’s my IBAction that’s wired to my UIButton in the interface:
As you can see from all the inline comments: I created the view, added the view as a subview to my view controller’s main view, cleared everything off the screen, peeled back that subview, and released it from memory.
Check out the example project on github. Fork it and use it!
Feel free to leave comments, improvements, or alternate solutions below.
Thanks for the great write up!
…I am new to iOS; is this similar (would you imagine) to what Flipbook does when the orientation of the iPad is changed? Thanks!
What Flipbook does is actually move the interface elements when it detects that the orientation has changed. That’s not really the same as what I’m doing here.
That’s not actually how it’s done! But I’ll tell you how.
We throw a transparent useless view over the top of that area, and then transition it away using a page curl. Since the page curl transition is already caching the contents of the screen for use during the transition, taking another picture is just wasteful.
We immediately clear and reset all the fields once we kick off the animation. UIKit captures the screen at the transition call time, and we get an awesome page curl to an empty payment view.
Awesome! Thanks for the insight! I may revise some code to make it a bit cleaner and take advantage of the transition caching. I didn’t realize that the animation cached itself like that.
This is cool, and it’s good to know how to take and use a screenshot (that could come in handy). However, in this case that part doesn’t seem to be necessary. If I remove the code that creates and adds the screenshot view, the animation seems to still work the same.
My understanding of UIView’s transitionWithView:… (as opposed to transitionFromView:toView:…) is that by default it animates changes to the subviews by taking a screenshot for the “before” state and animating between that and one with the applied “after” state.
When doing this, you probably should also move the assignment of the text field to the empty string into the “animations” block (though I tried it both ways and got the same animation on 4.3).
Thanks Troy, I actually updated the github repos and the code here to reflect that. I was unaware that UIKit cached the image during the transition, but that makes sense.
I just saw that you did it while I was writing my comment.
However, the creation and removal of the empty view is still not necessary, so it can get even simpler.
Yeah, i guess it would only be necessary if you wanted to peel away a single portion of the screen like the Square app.
Correct.
The additional view is used because page curl is normally a full screen transition, and we just want it to tear away a section.
[...] away the interface in an iOS app – Skookum Blog http://skookum.com/blog/ios-peeling-effect/ I’m going to walk you through step-by-step how to implement that really cool page curl animation [...]
Thanks! …I had not looked at Flipbook for a while and forgot what happens…
@Elliott
I’m trying to make this animation with just part of the screen.
I made UIView on top (empty view), and when I try to make animation with this view, there is no animation, because this view doesn’t have content and animation doesn’t capture this area.
Can you help me and give me directions where I made a mistake.
Thanks!
P.S. Code snippet: http://snipt.org/xkpy