Masked transitions

A masked transition reveals content from a source view using a view controller transition.

Design & API Documentation

Installation

Installation with CocoaPods

To add this component to your Xcode project using CocoaPods, add the following to your Podfile:

pod 'MaterialComponents/MaskedTransition'

Then, run the following command:

pod install

Overview

A masked transition is a UIViewController transition that can be used to present a contextual expansion from a circular source view. This transition follows the motion timing defined by the section on Radial transformations in the Material Design guidelines.

Usage

Importing

Before using Masked Transition, you'll need to import it:

Swift

import MaterialComponents.MaterialMaskedTransition

Objective-C

#import "MaterialMaskedTransition.h"

Using MDCMaskedTransitionController to present a view controller

Create an instance of MDCMaskedTransitionController and assign it to the view controller's transitioningDelegate property prior to presenting the view controller:

Swift

let transitionController = MDCMaskedTransitionController(sourceView: button)
vc.transitioningDelegate = transitionController
// Must keep a reference to the transition controller
self.transitionController = transitionController
present(vc, animated: true)

Objective-C

MDCMaskedTransitionController *transitionController = [[MDCMaskedTransitionController alloc] initWithSourceView:button];
vc.transitioningDelegate = transitionController;
// Must keep a reference to the transition controller
self.transitionController = transitionController;
[self presentViewController:vc animated:YES completion:nil];

Customizing the presented frame

You can customize the presented frame of the view controller by assigning a calculateFrameOfPresentedView block on the transition controller instance. For example, to present a modal dialog centered in the screen you can use the following examples:

Swift

let transitionController = MDCMaskedTransitionController(sourceView: button)
transitionController.calculateFrameOfPresentedView = { info in
  let size = CGSize(width: 200, height: 200)
  return CGRect(x: (info.containerView!.bounds.width - size.width) / 2,
                y: (info.containerView!.bounds.height - size.height) / 2,
                width: size.width,
                height: size.height)
}
vc.transitioningDelegate = transitionController
vc.modalPresentationStyle = UIModalPresentationCustom;
// Must keep a reference to the transition controller
self.transitionController = transitionController
present(vc, animated: true)

Objective-C

MDCMaskedTransitionController *transitionController = [[MDCMaskedTransitionController alloc] initWithSourceView:button];
transitionController.calculateFrameOfPresentedView = ^(UIPresentationController *info) {
  CGSize size = CGSizeMake(200, 200);
  return CGRectMake((info.containerView.bounds.size.width - size.width) / 2,
                    (info.containerView.bounds.size.height - size.height) / 2,
                    size.width,
                    size.height);
};
vc.transitioningDelegate = transitionController;
vc.modalPresentationStyle = .custom
// Must keep a reference to the transition controller
self.transitionController = transitionController;
[self presentViewController:vc animated:YES completion:nil];