ZOZolaZoomTransition

Zoom transition that animates the entire view heirarchy. Used extensively in the Zola iOS application.

Code Quality Rank: L2

Programming language: Objective-C

License: MIT License

Tags: UI     Modal Transition    

Latest version: v1.0.1

README

ZOZolaZoomTransition

ZOZolaZoomTransition is a zoom transition that animates the entire view heirarchy. It is used extensively in the Zola iOS application.

It looks like this:

Example

ZOZolaZoomTransition ships with a fully functional demo project. Listed below are the basic implementation steps. Assume a typical "Master-Detail" scenario where the "master" controller contains a UICollectionView, and the "detail" controller is pushed onto the stack when a cell is tapped. The transition will be animated from the selected cell's imageView, to the detailController's imageView:

1. Implement this UINavigationControllerDelegate method and return an instance of ZOZolaZoomTransition:

  - (id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController     
                                     animationControllerForOperation:(UINavigationControllerOperation)operation 
                                                  fromViewController:(UIViewController *)fromVC 
                                                    toViewController:(UIViewController *)toVC {

      // Determine if we're presenting or dismissing
      ZOTransitionType type = (fromVC == self) ? ZOTransitionTypePresenting : ZOTransitionTypeDismissing;

      // Create a transition instance with the selected cell's imageView as the target view
      ZOZolaZoomTransition *zoomTransition = [ZOZolaZoomTransition transitionFromView:_selectedCell.imageView
                                                                                 type:type
                                                                             duration:0.5
                                                                             delegate:self];

      return zoomTransition;
  }

1. Implement the two required ZOZolaZoomTransitionDelegate methods to provide the starting and finishing frames for the target view (see [ZOZolaZolaZoomTransition.h](ZOZolaZoomTransition/ZOZolaZoomTransition.h) for detailed documentation). Frames must be returned relative to the provided relativeView:

  - (CGRect)zolaZoomTransition:(ZOZolaZoomTransition *)zoomTransition
          startingFrameForView:(UIView *)targetView
                relativeToView:(UIView *)relativeView
            fromViewController:(UIViewController *)fromViewController
              toViewController:(UIViewController *)toViewController {

      if (fromViewController == self) {
          // We're pushing to the detail controller. The starting frame is taken from the selected cell's imageView.
          return [_selectedCell.imageView convertRect:_selectedCell.imageView.bounds toView:relativeView];
      } else if ([fromViewController isKindOfClass:[ZODetailViewController class]]) {
          // We're popping back to this master controller. The starting frame is taken from the detailController's imageView.
          ZODetailViewController *detailController = (ZODetailViewController *)fromViewController;
          return [detailController.imageView convertRect:detailController.imageView.bounds toView:relativeView];
      }

     return CGRectZero;
  }

  - (CGRect)zolaZoomTransition:(ZOZolaZoomTransition *)zoomTransition
         finishingFrameForView:(UIView *)targetView
                relativeToView:(UIView *)relativeView
            fromViewController:(UIViewController *)fromViewComtroller
              toViewController:(UIViewController *)toViewController {

      if (fromViewComtroller == self) {
          // We're pushing to the detail controller. The finishing frame is taken from the detailController's imageView.
          ZODetailViewController *detailController = (ZODetailViewController *)toViewController;
          return [detailController.imageView convertRect:detailController.imageView.bounds toView:relativeView];
      } else if ([fromViewComtroller isKindOfClass:[ZODetailViewController class]]) {
          // We're popping back to this master controller. The finishing frame is taken from the selected cell's imageView.
          return [_selectedCell.imageView convertRect:_selectedCell.imageView.bounds toView:relativeView];
      }

      return CGRectZero;
  }

Supplementary Views

ZOZolaZoomTransition supports an optional array of supplementary views that will be drawn on top of, and animated with, the other views in the animation. Two common use cases for supplementary views are:

1. To draw views that are on top of, but not a child of, the target view.
2. To draw views that are clipped by the edge of the screen when the transition begins and therefore appear cut off during the animation.

This is best illustrated with an example. The row of cells below is clipped by the bottom of the screen when the user taps the left most cell. Here are two screenshots mid-transition:

Without supplementary views:

With supplementary views: (the "Group Gift" banner and the two cells to the right have been added as supplementary views and are therefore drawn on top of the animation)

App Extensions

ZOZolaZoomTransition makes use of UIApplication's beginIgnoringInteractionEvents and endIgnoringInteractionEvents methods which are not available inside of app extensions. To use ZOZolaZoomTransition in an extension, define the following preprocessor macro in the extension target's build settings: ZO_APP_EXTENSIONS=1

Setup Instructions

Install with CocoaPods by adding the following to your Podfile:

platform :ios, '7.0'
pod 'ZOZolaZoomTransition', '~> 1.0.1'

Or do it manually by adding ZOZolaZoomTransition.h & ZOZolaZoomTransition.m to your project.

Limitations

• ZOZolaZoomTransition currently only works with UINavigationController transitions. We still need to add support for modal transitions, ideally without changing the API. Pull requests welcome!
• No support for interactive transitions yet (although this should be pretty straightforward to implement)

Requirements

ZOZolaZoomTransition requires iOS 7.0 or higher.

License

ZOZolaZoomTransition is available under the MIT license. See the LICENSE file for more info.