bogtan / Hero

Supercharged transition engine for iOS.

Introduction

Hero is a library for building iOS view controller transitions. It provides a layer on top of the UIKit's cumbersome transition APIs. Making custom transitions an easy task for developers.

Features

With Hero, you can easily mix & match these effects to build your own custom transition.

At its core, Hero is similar to Keynote's Magic Move. It checks the heroID property on all source and destinations views. Every matched view pairs are then automatically transitioned from it's old state to it's new state.

Hero can also construct animations for unmatched views. It is easy to define these animations via the heroModifiers property. Hero will run these animations alongside the Magic Move animations. All of these can be interactive, too.

By default, Hero provides dynamic duration & easing based on the Material Design Motion Guide. The duration is determined by the distance and size change. The easing curve is selected base on whether or not the view is entering or exiting the screen. It save you the hassle while providing consistent and delightful animations.

Hero does not make any assumption about how the view is built or structured. It will not modify any of your views' states other than hiding them during the animation. This means that it works with autolayout, programmatic layout, UICollectionView(without modifying its layout object), UITableView, UINavigationController, UITabBarController, etc...

Video Demos

The following videos give you a general idea of what you can do with Hero

1. Video overview of the example project.
2. Video overview of the built-in debugger that display timeline, arc curve, and 3d informations.
3. Video overview of the usage with Injection App to provide dynamic modifications in realtime. Changing HeroID or HeroModifiers without recompiling!

Installation & Usage Guide

Hero is available on Carthage & Cocoapods. See the usage guide for instructions.

NOTE: Hero won't work on iPhone 7 Simulators due to a bug by Apple. Try using other simulators or a real device when working with Hero.

Usage Example 1

View Controller 1

redView.heroID = "foo"
greyView.heroID = "bar"

View Controller 2

isHeroEnabled = true
redView.heroID = "foo"
greyView.heroID = "bar"
greenView.heroModifiers = [.translate(x:0, y:100), .scale(0.5)]

Usage Example 2

View Controller 1

greyView.heroID = "foo"

View Controller 2

isHeroEnabled = true
greyView.heroID = "foo"

// collectionView is the parent view of all red cells
collectionView.heroModifiers = [.cascade]
for cell in redCells {
	cell.heroModifiers = [.fade, .scale(0.5)]
}

You can do these in the storyboard too!

Contribute

We welcome any contributions. Please read the Contribution Guide.

License

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