How to design and prototype custom presentation animation in Interface Builder with IBAnimatable

For most of the non-trivial apps, we have to present some modal view controller (Scene in Interface Builder). August 20th, 2016 as of this writing, out of the box, Interface Builder only supports fullscreen modals with limited animations e.g. "Cover Vertical" and "Flip Horizontal". Using IBAnimatable we can configure how to present a modal in the interface builder, for example, the presentation animation, the dismissal animation, the modal size, the dimmingView appearance, and a lot more.

Configuring a Presentation in Interface Builder

In order to configure a presentation in Interface Builder with IBAnimatable, you need to use AnimatableModalViewController

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

Then we can configure the Presentation Animations, Transition Duration and Modal specs properties in Attributes inspector ().

To present your controller, you can do either using segues as well as presenting it programmpatically. Note: If you don't want to use the interface builder, you can fully customise your presentation by code. The system is the same.

You can find that example in the demo application by choosing "Playground", then tap on "presentations". Config your presentation by choosing the your favorite setup, then just press "Present" in order to see the result.

Modal Position

IBAnimatable provides a broad set of prebuild position for your modal. We can use them in Interface Builder as Modal Position as described in Configuring a Presentation in Interface Builder, or programmatically in code.

Center

TopCenter

BottomCenter

LeftCenter

RightCenter

CustomCenter

The following screenshot is using CustomCenter(120,320)

CustomOrigin

The following screenshot is using CustomOrigin(20,20)

Modal Size

IBAnimatable provides a broad set of prebuild size for your modal. We can use them in Interface Builder as Modal Width and Modal Height as described in Configuring a Presentation in Interface Builder, or programmatically in code.

Half

The following screenshot is using Full as with, and Half as height

Full

The following screenshot is using Full as with, and Full as height

Custom

The following screenshot is using Custom(300) as with, and Custom(300) as height

Golden ratio

Divide your screen according to the golden number

| GoldenRatio, GoldenLarge | ≈ 62 % of the screen size (width or height) | | GoldenSmall | ≈ 38 % of the screen (width or height) |

Others ratio

| Third | A third of the screen (width or height) | | Quarter | A quarter of the screen (width or height) | | Fifth | A fifth of the screen (width or height) | | Sixth | A sixth of the screen (width or height) | | Seventh | A seventh of the screen (width or height) | | Eighth | A eighth of the screen (width or height) | | ThreeQuarters | Three quarters of the screen (width or height) | | TwoThirds | Two thirds of the screen (width or height) |

Presentation Animators

IBAnimatable provides a broad set of Presentation Animators. We can use them in Interface Builder as Presentation Animation and Dismissal Animation as described in Configuring a Presentation in Interface Builder, or programmatically in code. They are all standard Transition Animators 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 "presentations", then play with the different options.

Flip

CrossDissolve

Cover

Zoom

DropDown

Keyboard Translations

If your modal contains a UITextField or UITextView, you can adjust its position when the keyboard is opening. IBAnimatable provides a broad set of translation when the keyboard is opening. We can use them in Interface Builder as Keyboard Transalation as described in Configuring a Presentation in Interface Builder, or programmatically in code.

moveUp

aboveKeyboard

stickOrMoveUp

You can see all supported Keyboard Translation in the demo App, open the App and tap on "Playground" button, then tap on "presentations", then play with the different options.

Presenting over current context

Using the above configuration, you can't have the same result as using UIModalPresentationStyle.overCurrentContext, but IBAnimatable have a workaround to support it while supporting all the above customisation.

That can be useful in a few cases, for example: having a split view controller, but you may want to present a controller over the first one, and let the second one clickable. You can see an example in the demo app: Playground -> Presentation -> Over context.

Using storyboards and segues

In order to use this feature in storyboards, you have to use a custom segue. To use custom Segue, we can control drag from one ViewController to another ViewController, then select a custom Segue and set its class to PresentOverCurrentContextSegue.

Using that usage allow you to use all the features of a custom presentation while writing 0 lines of code.

You can see an example in "Presentation.storyboard".

Programatically

For this special case, AnimatableModalViewController has another property that's not designable:

Anywhere before presenting your viewController, just set the contextFrameForPresentation that it should have. For example, if you want your presented view controller to have the same frame as the viewController presenting it, you will just have to do:

modalViewController.contextFrameForPresentation = presentingVC.view.frame
modalViewController.present(presentingVC, animated: true)

That's all. You have presented a controller over the current context with a custom configuration!

Contribution

If you'd like to add more presentation options to IBAnimatable, it is super easy, please have a look at:

• How to develop a presentation animator.
• How to develop a keyboard translation.
• How to develop a custom modal size.
• How to develop a custom modal position.

Let's have some fun 😉. If you have any question, please open an issue.