• Stars
    star
    4,554
  • Rank 9,342 (Top 0.2 %)
  • Language
    Objective-C
  • License
    Other
  • Created over 11 years ago
  • Updated almost 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A collection of iOS7 animation controllers and interaction controllers, providing flip, fold and all kinds of other transitions.

View Controller Transitions Library

With iOS 7 you can easily create custom view controller transitions that can be used in a range of contexts (push, pop, modal …). This project provides a library of custom animations which can be dropped directly into your project. It also has a number of 'interaction controllers' which can be used with any of the custom animations in order to make your transitions interactive.

The library currently contains the following animations, which can be made interactive with either a swipe or pinch gesture.

Flip Fold Crossfade Explode
Turn Cards NatGeo Portal
Cube Pan

Contents

A brief introduction to custom transitions

The following provides a very brief introduction to the concepts, for more detailed coverage I would thoroughly recommend reading Chapter 3 of iOS 7 By Tutorials - which I wrote! (I've heard the other 15 chapters are pretty good too ;-)

There are two key classes involved in a custom transition:

  • Animation controller - this class is responsible for performing the custom transitions. When you indicate that a custom transitions should be used, you provide an animation controller. This class performs the required animation, then informs the framework when it has completed.
  • Interaction controller - this class is responsible for managing interactive transitions - these are transitions that typically controlled by a gesture, allowing the user to swipe, pinch or perform some other action to navigate between view controllers. Importantly, interaction controllers allow transitions to be cancelled, i.e. a user can start the navigation, change their mind, and reverse it!

NOTE: Animation and interaction controllers are entirely independent, this means you can wire up any interaction controller with any animation controller - which is pretty awesome.

Adding custom transitions to your project

This sections gives a brief overview of the steps required to add custom view controller transitions to your project. You might also want to look at the code for the demo app (in the TransitionsDemo folder) for reference. If you already know how the iOS 7 custom view controller transitions work, feel free to skip this section!

Grabbing the code

There are a couple of ways you can incorporate transitions from this library into your code:

  1. CocoaPods - simply add a reference to VCTransitionsLibrary to your pod file.
  2. Manual file copy - if you are not using CocoaPods, you can simply copy the required files into your project. The AnimationControllers and InteractionControllers folders contain all the code that is required.

Using an animation controller

The AnimationControllers folder contains a number of animate controllers, which provide custom transitions, which can be integrated into your project as follows:

Custom present / dismiss transitions

The UIViewControllerTransitioningDelegate protocol is used to supply animation controllers for present / dismiss transitions. When a view controller is presented or dismissed the transitioningDelegate property of the view controller being presented or dismissed is used to supply this delegate. Simply return one of the animation controllers in response to the animationControllerForPresentedController: presentingController: sourceController: message for presenting, and animationControllerForDismissedController: for dismissing.

Custom navigation controller transitions

The UINavigationControllerDelegate protocol has methods that can be used to provide animation controllers. Simply return an animation controller in response to the navigationController: animationControllerForOperation: fromViewController: toViewController: message.

Notice that this message has an 'operation' argument that allows you to return different animations for push and pop operations. All of the animation controllers in this library subclass CEReversibleAnimationController which allows you to play the animation in reverse. This is commonly used in conjunction with the navigation controller as follows:

- (id<UIViewControllerAnimatedTransitioning>)navigationController:
                                (UINavigationController *)navigationController
   animationControllerForOperation:(UINavigationControllerOperation)operation
                fromViewController:(UIViewController *)fromVC
                  toViewController:(UIViewController *)toVC {
    
    // reverse the animation for 'pop' transitions
    _animationController.reverse = operation == UINavigationControllerOperationPop;
    
    return _animationController;
}

Custom tab bar controller transitions

The UITabBarControllerDelegate protocol has methods that can be used to provide animation controllers. Simply return an animation controller in response to the tabBarController: animationControllerForTransitionFromViewController: toViewController: message.

In order to determine the animation direction, you can compare the indices of the two view controller as shown below:

- (id <UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController
            animationControllerForTransitionFromViewController:(UIViewController *)fromVC
                                              toViewController:(UIViewController *)toVC {
    
    NSUInteger fromVCIndex = [tabBarController.viewControllers indexOfObject:fromVC];
    NSUInteger toVCIndex = [tabBarController.viewControllers indexOfObject:toVC];
    
    _animationController.reverse = fromVCIndex < toVCIndex;
    return _animationController;
}

Using an interaction controller

Interaction controllers work in conjunction with an animation controller in order to make a transitions interactive, i.e. allow a user to control a transitions using gestures. This interactivity allows a use to move forwards, backwards and even cancel a transitions.

The interaction controller is responsible for adding gesture recognisers to the view and triggering the navigation in response to gestures from the user.

Interactive dismiss transitions

The UIViewControllerTransitioningDelegate protocol that is used to supply animation controllers is also used to supply interaction controllers. An example implementation, that uses a swipe interaction together with a flip animation, is show below:

// instance variables, typically instantiated in your init method
CEFlipAnimationController *_animationController;
CESwipeInteractionController *_interactionController;

- (id<UIViewControllerAnimatedTransitioning>)
      animationControllerForPresentedController:(UIViewController *)presented
                           presentingController:(UIViewController *)presenting
                               sourceController:(UIViewController *)source {
    
    // allow the interaction controller to wire-up its gesture recognisers
    [_interactionController wireToViewController:presented 
                                    forOperation:CEInteractionOperationDismiss];
       _animationController.reverse = NO;
    return _animationController;
}

- (id<UIViewControllerAnimatedTransitioning>)
     animationControllerForDismissedController:(UIViewController *)dismissed {
    _animationController.reverse = YES;
    return _animationController;
}

- (id<UIViewControllerInteractiveTransitioning>)
           interactionControllerForDismissal:
                (id<UIViewControllerAnimatedTransitioning>)animator {
                
    // provide the interaction controller, if an interactive transition is in progress
    return _interactionController.interactionInProgress
                ? _interactionController : nil;
}

Note that in the above code the interactionInProgress property of the interaction controller is checked. This is because your might want to allow the user to dismiss the view controller using a button as well as via an interaction. Also, you must tell the interaction controller the operation it should perform (i.e. pop, dismiss).

Interactive pop transitions

The UINavigationControllerDelegate protocol also has an equivalent method for returning interactions controllers. A typically implementation, which follows the same pattern as above, is shown:

// instance variables, typically instantiated in your init method
CEFlipAnimationController *_animationController;
CESwipeInteractionController *_interactionController;

- (id<UIViewControllerAnimatedTransitioning>)
                 navigationController:(UINavigationController *)navigationController
      animationControllerForOperation:(UINavigationControllerOperation)operation
                   fromViewController:(UIViewController *)fromVC
                     toViewController:(UIViewController *)toVC {
    
    // wire the interaction controller to the to- view controller
    [_interactionController wireToViewController:toVC
                                    forOperation:CEInteractionOperationPop];
    
    _animationController.reverse = operation == UINavigationControllerOperationPop;
    
    return _animationController.reverse;
}

- (id <UIViewControllerInteractiveTransitioning>)
                         navigationController:(UINavigationController *)navigationController 
  interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>)animationController {
    
    // provide the interaction controller, if an interactive transition is in progress
    return _interactionController.interactionInProgress
                ? _interactionController : nil;
}

Interactive tab transitions

The UITabBarControllerDelegate protocol has an equivalent method for returning interactions controllers. As with the navigation controller example above, the interaction controller needs to add its gesture recognisers to the view controllers that the tab bar controller navigates between. Unfortunately the tab bar delegate methods don't get fired when the first view controller is presented, so I opt for a slightly messier implementation using Key-Value observing:

@implementation TabBarViewController {
    CEFoldAnimationController *_animationController;
    CESwipeInteractionController *_swipeInteractionController;
}

- (id)initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder]) {
        self.delegate = self;
        
        // create the interaction / animation controllers
        _swipeInteractionController = [CESwipeInteractionController new];
        _animationController = [CEFoldAnimationController new];
        _animationController.folds = 3;
        
        // observe changes in the currently presented view controller
        [self addObserver:self
               forKeyPath:@"selectedViewController"
                  options:NSKeyValueObservingOptionNew
                  context:nil];
    }
    return self;
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object
                        change:(NSDictionary *)change
                       context:(void *)context
{
    if ([keyPath isEqualToString:@"selectedViewController"] )
    {
    	// wire the interaction controller to the view controller
        [_swipeInteractionController wireToViewController:self.selectedViewController
                                             forOperation:CEInteractionOperationTab];
    }
}



- (id <UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController
            animationControllerForTransitionFromViewController:(UIViewController *)fromVC
                                              toViewController:(UIViewController *)toVC {
    
    NSUInteger fromVCIndex = [tabBarController.viewControllers indexOfObject:fromVC];
    NSUInteger toVCIndex = [tabBarController.viewControllers indexOfObject:toVC];
    
    _animationController.reverse = fromVCIndex < toVCIndex;
    return _animationController;
}

-(id<UIViewControllerInteractiveTransitioning>)tabBarController:(UITabBarController *)tabBarController interactionControllerForAnimationController:(id<UIViewControllerAnimatedTransitioning>)animationController
{
    return _swipeInteractionController.interactionInProgress ? _swipeInteractionController : nil;
}

@end

Transitions Library

The following is a graphical illustration of the various transitions. All animation controllers have a duration property that configures the animation duration.

Fold animation - CEFoldAnimationController

Animates between the two view controllers using a paper-fold style transition. You can configure the number of folds via the folds property.

Flip animation - CEFlipAnimationController

Animates between the two view controllers using a page-flip transition.

NatGeo animation - CENatGeoAnimationController

Animates between the two view controllers using transition inspired by City Guides by National Geographic. It's an adoptation of MHNatGeoViewControllerTransition to iOS7 APIs.

Turn animation - CETurnAnimationController

Animates between the two view controllers by performing a 3D flip, to reveal the destination view on the back.The turn animation has a flipDirection property that specifies the turn orientation.

Crossfade animation - CECrossfadeAnimationController

Animates between the two view controllers by performing a simple cross-fade.

Explode animation - CEExplodeAnimationController

Animates between the two view controllers by slicing the from- view controller into lots of little pieces, then randomly spinning and shrinking them.

Cards animation - CECardsAnimationController

Gives the impression of one view controller pushing the other to the back. It looks a lot more cool than these static screenshots!

(courtesy of Tope - AppDesignVault)

Portal animation - CEPortalAnimationController

The top-most view controller parts in the middle to reveal the view controller beneath.

(courtesy of FreddyF)

Cube animation - CECubeAnimationController

This transition gives the appearance of rotating the faces of a cube.

(courtesy of Andrés Brun)

More Repositories

1

LinqToObjectiveC

Brings a Linq-style fluent query API to Objective-C
Objective-C
724
star
2

applause-button

A zero-configuration medium-style button for adding applause / claps / kudos to web pages and blog posts
JavaScript
426
star
3

ReactiveSwiftFlickrSearch

A Swift implementation of a Flickr-search application that uses MVVM and ReactiveCocoa
Swift
377
star
4

chasm

A simple compile-to-WebAssembly language
TypeScript
346
star
5

wasm-sudoku-solver

a WebAssembly-powered AR sudoku solver
JavaScript
345
star
6

awesome-public-streaming-datasets

A list of free datasets that provide streaming data
341
star
7

ReactNative-PropertyFinder

A property finder application written using React Native
JavaScript
276
star
8

wasm-rust-chip8

A WebAssembly CHIP-8 emulator written with Rust
Rust
256
star
9

langchain-mini

🦜️🔗 This is a very simple re-implementation of LangChain, in ~100 lines of code
JavaScript
247
star
10

ReactiveTwitterSearch

A ReactiveCocoa 4.0 MVVM example
Swift
215
star
11

iOS-ClearStyle

This project is a gesture-driven iOS to-do list application modelled on the iPhone Clear application.
Objective-C
195
star
12

ffmpeg-wasm-streaming-video-player

An example of using FFmpeg.wasm to perform streaming transcoding within the browser
JavaScript
156
star
13

json-transforms

A recursive, pattern-matching, approach to transforming JSON structures.
JavaScript
133
star
14

CETableViewBinding

Demonstrates a binding helper that makes it easier to bind UITableView instances to ReactiveCocoa ViewModels
Objective-C
120
star
15

d3-wasm-force

A re-implementation of d3-force with WebAssembly.
TypeScript
105
star
16

d3fc-webgl-hathi-explorer

A T-SNE scatter plot implemented using D3FC's WebGL series
JavaScript
94
star
17

angular2-todo

A todo list implemented using Angular 2
TypeScript
91
star
18

ReactiveFlickrSearch

A ReactiveCocoa-MVVM application that searches Flickr
Objective-C
89
star
19

assemblyscript-regex

A regex engine for AssemblyScript
TypeScript
86
star
20

ReactSwift

A prototype implementation of React in Swift
Swift
77
star
21

wasmweekly

Website for the WebAssembly weekly newsletter
HTML
74
star
22

UIKit-Dynamics-Playground

The code to accompany the article published here: http://www.raywenderlich.com/50197/uikit-dynamics-tutorial
Objective-C
68
star
23

wasm-game-of-life

Conway's Game of Life - hand written in WebAssembly
WebAssembly
59
star
24

atari2600-wasm

An Atari 2600 emulator written in AssemblyScript compiled to WebAssembly
JavaScript
56
star
25

wasm-mandelbrot

A mandelbrot rendered using a variety of WebAssembly tools (emscripten, AssemblyScript, asm.js, etc ...)
JavaScript
55
star
26

RWReactivePlayground

A project to accompany an article I wrote on ReactiveCocoa, a simple sign-in form.
Objective-C
52
star
27

yahoo-finance-d3fc

A complex financial chart built with D3 and d3fc
JavaScript
51
star
28

RWTwitterInstant

A project to accompany an article I wrote on ReactiveCocoa, a twitter search application
Objective-C
43
star
29

applause-button-server

The server-side component for the applause button
JavaScript
42
star
30

mandelbrot-threaded-webassembly

A simple demonstration of WebAssembly threads
WebAssembly
41
star
31

angular2-goldilocks-seed

A seed project for Angular 2.0 / TypeScript development
JavaScript
40
star
32

redux-reducer-array

An app that demonstrates a method for applying redux reducers to arrays of items
JavaScript
36
star
33

rust-webassembly-serverless

An AWS lambda function written in Rust using WebAssembly
Rust
31
star
34

ReactiveSwiftLondon

A Twitter Search app with Sentiment Analysis, powered by ReactiveCocoa
Swift
27
star
35

SwiftFunctionalLife

An implementation of Conway's Game of Life using functional concepts in Swift
Swift
27
star
36

CERangeSlider

A range slider control for iOS
27
star
37

SwiftReactivePlayground

A project that accompanies my talk, ReactiveCocoa made Simple with Swift
Swift
27
star
38

wasm-faas

A simple WebAssembly-powered serverless platform written in Rust.
Rust
26
star
39

running-report-card

Creates a narrative report card from Strava user's running data
HTML
25
star
40

assemblyscript-temporal

An implementation of TC39 temporal for AssemblyScript
TypeScript
24
star
41

WP7-ClearStyle

This project is a gesture-driven Windows Phone to-do list application modelled on the iPhone Clear application.
C#
20
star
42

SimulatorEnhancements

Enhances the iOS simulator, providing accelerometer and geolocation data
Objective-C
20
star
43

SimulatorEnhancements-Server

Enhances the iOS simulator, providing accelerometer and geolocation data.
JavaScript
17
star
44

Avalon

A prototype binding framework for iOS - to support the MVVM pattern
Swift
16
star
45

SwiftMandelbrot

A project that shows how the simple task of computing a Mandelbrot set can be split up across multiple threads
Swift
14
star
46

jekyll-pagination-infinite-scroll

A demonstration of Jekyll pagination with infinite scroling
CSS
13
star
47

Knockout-jQueryMobile

A simple example of integration between jQueryMobile with KnockoutJS
JavaScript
8
star
48

d3fc-label-layout

A D3 layout that places labels avoiding overlaps using either a greedy or simulated annealing strategy
JavaScript
8
star
49

time-travel-trader

An app that demonstrates the use of Hot Module Reload and Time Travel within the context of a trading platform
TypeScript
7
star
50

timezone-viz

An interactive timezone visualisation
JavaScript
7
star
51

BindingWithBond

An example app that demonstrates the Swift Bond binding framework
Swift
7
star
52

gifbot

A GitHub bot that serves up animated GIFs on demand!
JavaScript
7
star
53

wasm-interference

A hand-coded WebAssembly interference pattern thingy
WebAssembly
7
star
54

iOS-Reversi

An iPad Reversi game that I am writing for a RayWenderlich tutorial
Objective-C
6
star
55

d3fc-financial-chart

Illustrates the patterns you should consider when creating high performance complex charts
WebAssembly
6
star
56

grunt-mdspell

A grunt task that spell checks markdown files
JavaScript
6
star
57

mondo-expenses-app

An example Mondo app that obtains transactions tagged with #expenses
HTML
5
star
58

ReversiEight

A Windows 8 Reversi board game
C#
5
star
59

assemblyscript-temporal-tz

An implementation of time-zone aware TC39 temporal classes for AssemblyScript
TypeScript
5
star
60

PropertyFinder-HTML5

Property Finder is an HTML5-based cross-platform mobile application for Windows Phone and iPhone.
JavaScript
5
star
61

awesome-lists-bot

A bot that runs various checks against 'awesome list' projects
JavaScript
4
star
62

d3fc-github-viz

A visualisation of github repository statistics
JavaScript
4
star
63

openfin-tabbed-interface

A demo app that shows how to create a Chrome-style tear-out desktop HTML5 interface with OpenFin.
CSS
4
star
64

finwasm-smart-contract

A smart contract demonstration that allows sign-up for a fictitious meetup event
HTML
4
star
65

tiny-ssg

A tiny static site generator that can be used to replace Assemble, etc ...
JavaScript
4
star
66

perspective-rs

A prototype implementation of Perspective in Rust
Rust
4
star
67

wasm-lang-inference

Exploring techniques that may allow us to infer the language used to write WebAssembly modules
Rust
4
star
68

WP8-MapGestures

An enhanced set of multi-touch gestures for the Windows Phone 8 map control
C#
3
star
69

colineberhardt.github.com

HTML
3
star
70

awesome-stars

★★★ Adds the star counts to awesome lists ★★★
JavaScript
3
star
71

d3fc-technical-indicator

Components for calculating technical indicators on data series
JavaScript
2
star
72

rollup-plugin-webassembly

A rollup plugin that inlines (base64 encoded) and imports WebAssembly modules
JavaScript
2
star
73

d3fc-financial-feed

An API for fetching financial time-series data from different sources including Quandl and Coinbase
JavaScript
2
star
74

Monoliths-To-Components-With-D3

From monoliths to components with D3 - A presentation about building re-useable charting components with d3fc
JavaScript
2
star
75

html5-revolution

An impress.js powered presentation about the rise of HTML5 and death of plugins
1
star
76

ServerlessNodeHttpPost

A simple servless template for lambdas exposed via the gateway using HTTP POST
JavaScript
1
star
77

natter

JavaScript
1
star
78

d3fc-webgl-example

An example of the D3FC with WebGL rendering
JavaScript
1
star
79

Xamarin-cross-platform-charting

Demonstration of using ShinobiCharts Xamarin bindings to create a cross-platform app for data visualisation
C#
1
star
80

PropertyCross-Site

Website for PropertyCross
CSS
1
star
81

d3fc-brush

Adapts the D3 brush, making it easier to create data-driven brushed charts.
JavaScript
1
star
82

minerva-transcript-trove

A GPT-powered command line tool for analysing meeting transcripts, generating meeting summaries, action lists and querying. The goal of this project is to create a valuable knowledge-base from meeting minutes, helping you become more organised and efficient.
JavaScript
1
star