How to design and prototype custom transition animation and gesture interaction in Interface Builder with IBAnimatable

For most of the non-trivial apps, they may have more than one Scene (ViewController). In that case, we need to support navigation. Interface Builder is a great to prototype navigation like presenting or pushing another ViewController from current ViewController. To improve the user experiences, we can display transition animation when navigating from one scene to another. May 30th, 2016 as of this writing, out of the box, Interface Builder only supports a small set of transition animations for Present e.g. "Cover Vertical" and "Flip Horizontal". With IBAnimatable we can configure custom transition animation and gesture interaction in Interface Builder. As of this writing, IBAnimatable is the first and the only one open source library supports those features.

Configuring Present transition in Interface Builder

There are two ways to configure Present transition in Interface Builder with IBAnimatable. The first one is to use AnimatableViewController

Firstly, select a UIViewController then configure the custom class to AnimatableViewController in Identity inspector ()

Then we can configure Transition Animation, Transition Duration and Interactive Gesture properties in Attributes inspector ().

Property	Description	Example
Transition Animation	The animation effect when Present or Dismiss a `ViewController`, you can find all supported transition animations in Transition Animators section. Please notices, The animators named with `System**` do not support the Present* transition.	`Fade` for fade animation, some animator can support parameters, e.g. `Portal(Forward)` for portal forward animation, and `Portal(Backward)` for portal backward animation.
Transition Duration	The duration of the transition animation in seconds. The default value is `0.7`	`0.5` means half a second, `2` means two seconds
Interactive Gesture	The gesture used to Dismiss the `ViewController`, you can find all supported interactive gestures in Interactive Animators section. There is no gesture for Dismiss if it is unset (nil). Some Transition Animator has a default gesture, you can set this property to `Default` to use the default gesture. You can find all default gesture in Transition Animators	`Default` for `FadeAnimator` is `Pan(Horizontal)` gesture which means pan horizontally. And `Pinch(Close)` means pinch close gesture.

Once we configure those properties, ALL Transition (please notice it is all, including Present and Exit Segues) for this ViewController will use the configured animation effect. The transition animation will look like this based on the settings above.

You can see the example in "TransitionsInInterfaceBuilder.storyboard" and play around different configurations. Then open the App and tap on "Playground" button, and tap on "transitions" cell to navigate to Transitions Scene. Tap on "IB" button to see the configurations you made in "TransitionsInInterfaceBuilder.storyboard".

If you want to have separate animation effect for different Present Transition, see the section Configuring Present transition in Interface Builder via Segue.

Configuring Present transition in Interface Builder via Segue

In some case, we may want to have different animation effect for various Present Transition. IBAnimatable provides a set of custom Segues to support that. You can find all supported Segues in Segues section.

To use custom Segue, we can control drag from one ViewController to another ViewController, then select a custom Segue e.g. "present portal with dismiss interaction". Because Interface Builder doesn't support @IBInspectable for Segue, we are not able to change the transition direction, duration and dismissal gesture. There are one or two Segues for each Transition Animator. One is without dismissal interaction, and one's with (if this transition animator has interactive dismissal gesture). For example, for PortalAnimator, we have "present portal" for Portal animation without dismissal interaction, and have "present portal with dismiss interaction" for Portal animation with default dismissal interaction, which is Pinch(Close).

After we select "present portal with dismiss interaction", we need to check the Module in Attributes inspector (). The App may crash if the field is empty. It probably is a bug of Interface Builder. To fix it just simply click on the Module field and hit enter, it should show IBAnimatable. If everything is ready, we can see the transition animation like this as below. We can have more than one Segue within the same ViewController. They will have different transition animation based on the selected Segue.

You can see the example in "TransitionsInInterfaceBuilder.storyboard" and play around different configurations.

Configuring Push transition in Interface Builder

To use Push transition, we need to have a UINavigationController. Firstly, select a UINavigationController then set the class to AnimatableNavigationController in Identity inspector ()

Then we can configure Transition Animation, Transition Duration and Interactive Gesture properties in Attributes inspector (). Those properties are as same as in Configuring Present transition in Interface Builder section. The differences are we can use System***Animator classes in Transition Animation, e.g. SystemCube(Left) for System Cube transtion.

Once we configure those properties, all Push Transitions inside the NavigationController will use the configured animation effect. We usually don't have different effects inside the same NavigationController, so we don't provide Push Segues to support different transition animations. If you still want to have different transition animations, we can use Apple default API to achieve that. Please check out UINavigationControllerDelegate.

You can see the example in "TransitionsInInterfaceBuilder.storyboard" and play around different configurations.

Transition Animators

IBAnimatable provide a broad set of Transition Animators / Controllers. We can use them in Interface Builder as Transition Animation as described in Configuring Present transition in Interface Builder and Configuring Push transition in Interface Builder, or programmatically in code. They are all standard Transition Animators / Controllers conform to UIViewControllerAnimatedTransitioning.

You can see all supported Transition Animators in the demo App, open the App and tap on "Playground" button, then tap on "transitions" cell to see all transitions.