Delightful Interactive Animations
Learn how to build interactive iOS animations using UIViewPropertyAnimator
Animations are an essential part of modern mobile applications. They give users feedback on their actions and notify about what’s going on in the app. On top of that animations give a higher quality look and feel to your app.
In this article, I’ll show how to build interactive animations that are quite similar to the ones you’ve seen in the Spotify iOS application.
Initial setup
Let’s start with creating UI elements we’d like to animate. We’ll be using the next classes in this article:
PlayerViewController- defines the player's UI.TabBarController- contains a tab bar view and hasPlayerViewControlleradded as a child.TransitionCoordinator- handles user gestures and runs animations for thePlayerViewControllerandTabBarControllerviews.
The view controllers classes are quite self-explanatory and TransitionCoordinator could be defined as follows:
➊ Defines the player’s state that could be either open or closed.
➋ The collection of running property animators. We’ll add a property animator to the collection when we create one and remove when the animation is finished.
Interactive animations with UIViewPropertyAnimator
There are different APIs you can use to run an animation on iOS depending on the level of control and customization you want. In iOS 10 Apple introduced UIViewPropertyAnimator that offers more capabilities and a greater degree of control than UIView.animate. It works nicely in conjunction with UIPanGestureRecognizer and could be easily used to create interactive animations.
Let’s add a pan gesture recognizer handler so that we can interactively pull the player’s view up or down.
As you can see above, there are three functions that drive the view controller’s transition. Let’s dive into details and analyze them.
The startInteractiveTransition function is called when the pan gesture begins. It creates all of the animators and pauses ones immediately.
While the user is dragging the player’s view we call updateInteractiveTransition function that sets the completion percentage of the animation via fractionComplete property:
When the user’s finger is lifted off we continue or reverse animations based on the gesture’s direction:
Transition animations
As you might notice, we are using createTransitionAnimators function to create animators when the pan gesture begins:
Now let’s have a look at the animations we run on transition between closed and open states.
Frame animation
First, let’s define frame animation for the player and tab bar views. This is a spring animation that doesn’t oscillate or overshoot its target value. In this case we should create the UIViewPropertyAnimator instance with 1.0 dampingRatio value:
It is important to note that scrubsLinearly property of the UIViewPropertyAnimator is true by default. This causes the animator to use a linear timing function during scrubbing.
Content animations
Next, let’s animate the content of our views with fade in and fade out animations. These animations take less time to finish compared to frame animation. In order to create this effect, we perform a keyframe animation inside of the property animator with relative start time and duration:
As you can see, we set scrubsLinearly to false, which causes the animator to use the specified timing curve and maintain its pacing when it's being driven interactively.
A similar approach could be used to create animations for transition between open and closed states. Just like that, we've created the player screen that could be animated interactively on pan gesture.
Conclusion
Animation is a great way to notify a user about what’s going on and add a polished look and feel to your application. In this article we’ve learned how to build interactive animations using UIViewPropertyAnimator.
You can find the project’s source code on Github. Feel free to play around and reach me out on Twitter if you have any questions, suggestions or feedback.
Thanks for reading!
Originally published at https://www.onswiftwings.com.
