A Material Design-style transition, inspired by this animation from Dmytro Prudnikov.

Definitions

smallView

The small view in the presenting view controller to transition from.

largeView

The large view in the presented view controller to transition to.

viewsToFadeIn

The views in the presented view controller that fade in at the end of the transition. (Optional)

Usage

In the presenting view controller, initialise a property for the transitioning delegate:

self.transitioningDelegate = [MZMaskZoomTransitioningDelegate new];

Assign the smallView and transitioningDelegate in prepareForSegue:sender::

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
  self.transitioningDelegate.smallView = sender; // The view you are transitioning from.
  ...
  segue.destinationViewController.transitioningDelegate = self.transitioningDelegate;
  segue.destinationViewController.modalPresentationStyle = UIModalPresentationCustom;
}

Implement the MZMaskZoomTransitionPresentedViewController protocol in the presented view controller:

@synthesize largeView, viewsToFadeIn;

- (NSArray *)viewsToFadeIn
{
  return @[self.label1, self.label2, self.label3]; // Any views you want to fade in at the end of the transition.
}

- (UIView *)largeView
{
  return self.someLargeView; // The view you are transitioning to.
}

Other options

duration

Default duration is 0.25 seconds.

presenting

Default is YES. It's set to NO when dismissing a view controller (see MZMaskZoomTransitioningDelegate).

dismissToZeroSize

Default is NO. Set to YES if you want the dismiss transition to shrink the view down to zero. This is useful if the smallView in the presenting view controller is no longer visible (e.g. item was deleted).

Installation

Acknowledgements

• Transition inspired by Dmytro Prudnikov's User Profile Interface Animation (found here)
• Avatars from Placeit
• Names generated by uinames.com
• Colours chosen from Google's Material Design spec and flatuicolorpicker.com

License

MaskZoomTransition is released under the MIT license. See LICENSE for details.