I had presented about iOS animations at LetSwift conference last year. I classified the animations by researching the modern iOS app. There are 4 modern animation patterns.
-
Launch Animation
-
Loading Animation
-
View Transition
-
Interruptible Animation
Before look at the animation patterns, Let’s take a look principle of animation. This principle is helping you when to decide the easing functions on your animation code.
The principle of the animation
The Illusion of Life: Disney Animation
In 1981, Frank Thomas and Ollie Johnston define the twelve principles of animations. I select the 4 principles which can reflect UI animation. These principles affect the easing functions in the Animation framework.
The core animation framework has an easing function. We can set the easeIn, easeInOut, easeOut, and linear with duration time. Keep in mind these principles, I’ll show the examples and guides about easing function.
This principle can reflect the launch animation, view transition and morphing icons.
The secondary action principle reflects the physics effect, keyFrame animation, and interruptible animation.
Easing functions
Robert Penner is the creator of the easing function. It is widely used in various programming languages. The easing functions are basically inspired by twelve principles of animations. Let’s look at which easing function are suitable for UI.
uber app
Look at Side Menu. The speed of showing and hiding the menu is different. Isn’t it?
Here is my guide about the easing function.
-
Use ease-out when the view will appear.
-
duration 150ms – 350ms
-
-
Use ease-in or linear when the view will disappear.
-
duration 100ms – 150ms
-
Modern iOS Animation
Launch Animation
The launch animation is the first impression and gives a delightful experience to the user. Technically, an iOS app is fetching data from the server, and It takes time to show the interface. So the fancy iOS apps use the launch animations while loading data.
I make the launch animation. I’ll post about how to make your launch animation.
Loading Animation
The loading animation displayed on the placeholder does not cover the screen, so it looks much cleaner.
I make the loading animation. I’ll post about how to make your loading animation.
View Transition
ViewTransition gives seamless experience compare to push view controller and present view controller, which is the default iOS presenting style. Technically you can implement your view transition style using UIViewControllerAnimatedTransitioning. I’ll post about UIViewControllerAnimatedTransitioning.
Interruptible Animation
You can see how Interruptible Animation works on the Apple Maps app. When you swipe up and down, then It will be starting Animation to expand the content. Interruptible Animation allows canceling while animating. Apple introduces this feature on iOS 10, and it called UIPropertyAnimator. I’ll also post about it soon.
Conclusion
I introduce the modern iOS animation styles. There are four kinds of patterns, and I’ll post how to implement these four patterns using CoreAnimation. If you want to get more information, then please look at references.
References
Google Fundamentals Design and UX
Disney 12 Principle Animations
Understand-the-12-principles-of-animation
Books
Raywenderlich iOS Animation Book
iOS Core Animation: Advanced Techniques
Youtube
WWDC
Shawn 