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 UIView
or 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.
Features
There are 3 style bits that can be combined to create 8 different animations.
Direction
Controls whether the current view collapses inward (Fold) or if the next view expands outward (Unfold).
Mode
Determines whether the next view slides in flat (Normal) or rotates in at right angles to the collapsing halves of the previous view (Cubic).
Orientation
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;
From your 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;
From your 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:
[self.navigationController popViewControllerWithFoldStyle:MPFoldStyleUnfold];
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.
Storyboard support
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.
Demo project
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 version
iOS 5-only for now because I wrote it with ARC and included storyboard support.