Custom Segue Animation With Autolayout In Swift

While working on my new app, I wanted to make some nice segue animation when user selects item from tableview and detail is shown. With autolayout it was bit tricky from the beginning, but I succeeded and here’s the result:

Segue Animation

So how to do it? First we need to create custom segue, with no default animation.

And set it properly in IB.

 

Now let’s implement animation. In DetailViewController class, I have animateOnEntry() function, which I call in viewDidLoad(). Animation is done by changing autolayout’s constraints. To work with those, I’m using great autolayout library SnapKit. Here’s the code:

First I’m setting initial positions(some UI items are outside the screen). Then I’m updating constraints’s values for final position of items. To move nameLabel and contactImage from the exact position as it was in tableview, we need to have y-axis coordinate(yOrigin) for specific cell. We can calculate it in prepareForSegue():

 

If you’re wondering why I’m doing this:

It’s because font size can’t be changed dynamically, so I set font size to 24, then resize label and this way it’s as if it had font size 19. Then it grows back to 24:

 

And that’s it. It was fun and I’m starting to love autolayout. Cheers!