The simplification of UI design enables the focus in animation. In this lesson, you’ll learn the basic techniques to animations such as slide, scale and color transitions. Then, you’ll learn about the more advanced techniques introduced in iOS for transitional interfaces and physics animations combined with gestures.
Introduction to Animations
Animations should enhance the app experience. They make your app more engaging and dynamic. Good animations should provide feedback on taps and gestures, and give a sense of direct manipulation.
Animation Basics
There are a number of basic animation techniques that we use to transition from point A to point B. These animations are so common that they can be found of every platform, from Web to iOS.
Typically, you don’t need to set more than 2 animation states: Begin and End. The computer will know what happens in between those states.
- Translate
- Rotate
- Scale
Animation Curve
The curve plays a big part in making the animation more life-like. Good animations replicate real physics. A ball that bounces on the ground makes a much more interesting subject than one that falls flat. Modern apps tend to use Spring and Ease animations much more than Linear.
3D Transform
When changing the position, you can also play with the X, Y and Z values. Although generally more rare and harder to pull, 3D transforms can give interesting results that can really set your app apart.
Property Change
A very popular animation technique is to change the color and opacity properties. Just modifying the opacity results in the Fade In / Fade Out effect, which is extremely common. Animating the layer, text and background colors can also yield effective transitions.
Combining Animations
On almost every occasion, you’ll want to work with 2 or 3 transforms at the same time. By doing so, you get interesting animations inspired by real life physics such as Bounce, Morph, Shake, etc.
Animations Shouldn’t Last Longer Than 1 second
A long animation can lead to frustration — it can get in the way of performing a task. The ideal duration that I’ve personally found is 0.3 – 1 second. If you do a Fade In, Slide or Scale, that’s the duration that you should aim for. Anything shorter would make seem like there was no animation, or worse it could stress your users. Anything longer may seem underperforming and can be in the way of doing what they want.
