material-components_material-components-ios/components/MaskedTransition

Masked transitions

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

Design & API Documentation

• Material Design guidelines: Radial Transformations
• API: MDCMaskedTransition

---

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];