This simplifies the layers between the app developer and the transition implementation while also allowing us to reduce the complexity of the MotionTransitioning APIs. In the near future we will remove nearly all of the MotionTransitioning abstractions in favor of providing a small set of tools and APIs for building plain UIKit transitions.
Notably:
- MaskedTransition is now a private API.
- There is a new MaskedTransitionController type that must be instantiated and stored for the lifetime of the presented view controller.
- MaskedTransition is no longer a Transition type.
- MaskedTransition now simply implements the animated view controller transitioning APIs.
- MaskedTransitionController vends MaskedTransition instances as required.
Example usage:
```swift
let transitionController = MDCMaskedTransitionController()
func didTapFab(fab: UIView) {
let vc = SomeViewController()
vc.view.autoresizingMask = [.flexibleLeftMargin, .flexibleTopMargin,
.flexibleRightMargin, .flexibleBottomMargin]
// Customize the transition
transitionController.sourceView = fab
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.modalPresentationStyle = .custom
vc.transitioningDelegate = transitionController
showDetailViewController(vc, sender: self)
}
```
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];