featherless 44515ba81a
Convert MaskedTransition from a MotionTransitioning Transition type to a vanilla UIKit type (#3070)
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)
}
```
2018-04-02 12:28:45 -04:00
..

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