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 MDCMaskedTransition to present a view controller

Create an instance of MDCMaskedTransition and assign it to the view controller's mdm_transitionController.transition property prior to presenting the view controller:

Swift

vc.transitionController.transition = MDCMaskedTransition(sourceView: button)
present(vc, animated: true)

Objective-C

vc.mdm_transitionController.transition = [[MDCMaskedTransition alloc] initWithSourceView:button];
[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 instance. For example, to present a modal dialog centered in the screen you can use the following examples:

Swift

let transition = MDCMaskedTransition(sourceView: button)
transition.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.transitionController.transition = transition
present(vc, animated: true)

Objective-C

MDCMaskedTransition *transition = [[MDCMaskedTransition alloc] initWithSourceView:button];
transition.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.mdm_transitionController.transition = transition;
[self presentViewController:vc animated:YES completion:nil];