Apple announced a redesigned Apple Books store at the WWDC 2018 conference. Apple Books now has an increased focus on rich, long-form content compared to the previous interface. Intrigued by the UI of the new app, I’ve decided to spend some time delving deeper in order to gain a better understanding of how it works and I will, of course, be bringing you with me! Throughout this series, I’ll be looking at different aspects of the interface before rebuilding them from scratch. In this inaugural post, I’ll be recreating the Apple Books UI animations.

I obviously have no access to the internals of the real Apple Books implementation. This is simply a recreation. Please note: I focused my efforts on building the UI so the content that you see is merely a placeholder.

Let’s get started!

Apple Books UI Animations

It has been a year since Apple first launched the Apple Books redesign and I’m still impressed by the fluidity of the user experience. I love how the interface animates when the user selects a book – particularly how the book both opens and closes based on the velocity of the gesture.

The interface immediately reacts to the user’s input, meaning that it can be stopped at any point in the process and can even change course midway. That’s pretty impressive!

Let’s have a look at the basics of the animation…

There are two screens in this transition – the ‘Shop’ view and the ‘Detail’ view. In the transition above we can see how the ‘Detail’ view is presented.

For the purposes of this post, I’ll be looking at the presentation of the animation. In future posts, however, I’ll look at more complex animations.

If you’d like to recreate the animation for yourself, you can download the code from my Github.

Composing the animation:
UIViewControllerTransitioningDelegate.

I used different approaches throughout my investigation but in the end I opted for the UIViewControllerTransitioningDelegate.

Why? I needed to present another screen with a custom animation.

<p> CODE: "https://gist.github.com/WildStudio/a14774f1debc68b59eed7e526e3f3629.js"</p>

‍This was made easier by making the `MainViewController` handle the transition by setting it as the transition delegate: UIViewControllerTransitioningDelegate.

This is what the implementation looked like…

<p> CODE: "https://gist.github.com/WildStudio/339caa9e27ac8d2f6dbba6110ba1b9c2.js"</p>

Now that I’d set up the transition delegate, I was able to concentrate on writing the animation code.

Implementing the presentation:
UIViewControllerAnimatedTransitioning.

It’s best to have an object deal with the animation, as opposed to a View Controller, as this maintains a separation of concerns.

I created an `AnimationController` class that conformed to NSObject and UIViewControllerAnimatedTransitioning. This method allowed me to define an animator object which creates the animations for transitioning a View Controller on or off screen within a fixed amount of time.  

I wanted the background to fade in and the ‘Detail’ view to slide up from the book frame. In order to achieve this, I needed to connect the book frame to the object animator by tapping an item from the `MainViewController`:

<p> CODE: "https://gist.github.com/WildStudio/1f79193b059f3c78ce03ca22773780dc.js"</p>

I could then implement the func animateTransition (using transitionContext: UIViewControllerContextTransitioning). This handled the transition of both the presenting and destination View Controllers.

All that was left to do was set up the initial and final position of the destination View Controller aka my `DetailViewController`:

<p> CODE: "https://gist.github.com/WildStudio/9d77bf694e1aa04893e2e0458868c87c.js"</p>

The final transition looked like this…

But, wait…

If you refer back to the Apple Books app, there’s a little bit of bounce at the end of the animation. In order to implement this, I used UIViewPropertyAnimator instead of UIView.animateWithDuration.

This gave me more control and meant that I could add the spring animation that gave it its natural motion and speed. This is one of those small details that makes such a difference where user experience is concerned.

To create the bounce, I used UISpringTimingParameters:

<p> CODE: "https://gist.github.com/WildStudio/b42d52f20854d5ffdd3d6550aaaad004.js"</p>

My final animation code looked like this...

<p> CODE: "https://gist.github.com/WildStudio/f58cb27be79a07e7d47c4174f8f10ca7.js"</p>

And my recreation looked like this...

Pretty good, huh?!

Give it a go! You can run the app without the spring animation by using this commit OR with the spring animation by using this commit.

In the next post, we’ll be exploring how to build the interactive animations featured in the Apple Books app.

If you want to learn more about the physics behind spring animations, check out Christian Schnorr’s excellent post on Demystifying UIKit Spring Animations.

---

‍Do you like the Apple Books redesign? Are you going to attempt to recreate the animation? Tweet us and we’ll be sure to retweet the responses!

We Are Mobile First is a digital product agency based in Barcelona helping to transform businesses in a mobile-first world. Follow us on Twitter, LinkedIn and Medium to be notified of our future posts and stay up-to-date with our company news.

We share weekly content on everything from how to build an image classifier app with Apple’s COREML to how to use IDEs effectively.

‍

(Hero image credit: Apple Support)