I’ve put a project I call MPFoldTransition up on GitHub. It provides a class you can use to add a fold transition to your application in just a single line of code (in most cases).
What is a fold transition? It’s an animation such as shown above (or as popularized by the Clear todo list app) where an object folds in upon itself until it disappears and the content surrounding it moves in to fill the gap. Except in this case, I’m doing it for an entire
UIViewController and not just a single
UITableViewCell. (For an in-depth analysis of what goes into making a folding animation, read my post here.)
Update: The GitHub project now includes flip transitions as well!
Update 2: The folding effect has been improved with gradient shadows.
Update 3: For a touch gesture-enabled container controller with page-flipping (not just a transition), see MPFlipViewController.
There are 3 style bits that can be combined to create 8 different animations.
Controls whether the current view collapses inward (Fold) or if the next view expands outward (Unfold).
Determines whether the next view slides in flat (Normal) or rotates in at right angles to the collapsing halves of the previous view (Cubic).
Sets whether the fold is vertical or horizontal.
Present a modal view controller
There are extension methods to
UIViewController to present or dismiss modal view controllers using fold transitions:
- (void)presentViewController:(UIViewController *)viewControllerToPresent foldStyle:(MPFoldStyle)style completion:(void (^)(BOOL finished))completion; - (void)dismissViewControllerWithFoldStyle:(MPFoldStyle)style completion:(void (^)(BOOL finished))completion;
UIViewController subclass you would call this to present your modal view controller:
[self presentViewController:modalViewController foldStyle:MPFoldStyleDefault completion:nil];
And then call this to dismiss it:
[self dismissViewControllerWithFoldStyle:MPFoldStyleUnfold completion:nil];
Tip: dismiss your modal controller using a style with the opposite fold bit (Fold or Unfold), so that you get the reverse animation.
Push a view controller onto a navigation stack
There are extension methods to
UINavigationController to push or pop a view controller using fold transitions:
- (void)pushViewController:(UIViewController *)viewController foldStyle:(MPFoldStyle)style; - (UIViewController *)popViewControllerWithFoldStyle: (MPFoldStyle)style;
UIViewController subclass you would call this to push a new view controller onto the stack:
[self.navigationController pushViewController:detailViewController foldStyle:MPFoldStyleDefault];
And then call this to pop it back off:
Tip: pop your view controller using a style with the opposite fold bit (Fold or Unfold) from the style used to push it onto the stack, so that you get the reverse animation.
Transition between any 2 views or controllers
MPFoldTransition has class methods for generic view and view controller transitions:
+ (void)transitionFromViewController:(UIViewController *)fromController toViewController:(UIViewController *)toController duration:(NSTimeInterval)duration style:(MPFoldStyle)style completion:(void (^)(BOOL finished))completion; + (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration style:(MPFoldStyle)style transitionAction:(MPTransitionAction)action completion:(void (^)(BOOL finished))completion;
If you really need to get under the hood (e.g. to adjust the timing curve), you can initialize your own instance of
MPFoldTransition, set the properties as desired, and then call the
perform method to execute the transition.
You can even incorporate modal or navigation stack fold segues without writing a single line of code! Simply use 1 of the 3 custom UIStoryboardSegue subclasses that are included. These cover modal presentation and push/pop to a navigation stack. Just create a segue between 2 controllers in your storyboard, select Custom as the segue type, then enter MPFoldModalSegue, MPFoldNavPushSegue, or MPFoldNavPopSegue as the Segue Class.
The GitHub project includes a sample project that demonstrates the use of all the different API’s as well as all of the transition styles.
iOS 5-only for now because I wrote it with ARC and included storyboard support.