Intro
You might have already noticed that UI animations became a rather important part of present-time mobile applications. As time goes by, their functionality only keeps on broadening. There is no surprise, for visual elements substantially facilitate interaction with an app.
Why UI animations matter
Although UI animations are performing a wide variety of functions nowadays, their major purposes are still to:
- navigate the user. Animations should guide the user throughout the app, respond to his/her actions, showing what he/she is doing at the moment;
- promote an app. Well-designed effects may become a distinguishing feature of your app and thereby attract new customers;
- decorate an app. Static apps went out of fashion and animations are a suitable tool to infuse new apps with life.
Nevertheless, too complex or fancy effects may only distract and confuse the user.
Choosing the right tool
Whereas you want to create some animations for your app, you need to decide the tool you will be using. And in order to make the right choice, you need to answer the following questions:
- What finished product do you expect to get and how should it work?
- How complex should animations be?
- What do you need to create them (whether you can use something native or design a new solution)?
- How many resources (time and money) will the development process take?
Since small projects are often scarce in cash and have quite strict deadlines, they will most likely use ready-made solutions. There are a lot of them available for every possible purpose. But if you are going to use one in your project, be ready to face some challenges:
- you don’t know whether the chosen solution reliable or not;
- you have no idea if it is going to be supported for some time or not;
- it is unclear if it needs modifications or fixes.
As a result, one should take some time and evaluate further steps.
Nevertheless, despite all the issues above, the following ready-made solutions have proven their efficiency and will surely serve the best. Besides, if you have a usual and easy task, a ready-made solution is the most suitable option. Although it may not fit some specific requirements at first, it is much easier and faster to adjust it rather than develop a new tool.
Building product design is a quite fascinating process, and it is your decision to perform it the way you like. Thus, let’s think on how to find golden mean to meet the requirements and to stand out from your competitors.
Best iOS tools
Apple actually provides all the necessary components to develop good, convenient and fast-working applications, but sometimes the situation requires custom solutions, and the following libraries will definitely come in handy.
1. Hero
Hero is a library which will be quite useful if you want a non-standard transition between a number of controllers. It provides a declarative layer on top of the UIKit’s cumbersome transition APIs, making custom transitions an easy task for developers.
Moreover, Hero constantly receives upgrades and improvements. Thus, it can safely be used to create animations for apps.
Among the advantages of the library are:
- the great quality;
- the simplicity of use;
- high-speed performance.
By default, Hero provides a dynamic duration based on the Material Design Motion Guide. It is automatically determined by changes to distance and size, saving you the hassle and providing consistent as well as delightful animations.
2. UIViewPropertyAnimator
UIViewPropertyAnimator is applicable when you want to add different types of animations. It is not a novelty, but some developers are still reluctant to use it, without any visible reason, though.
The class itself allows you to:
- create interactive animations;
- rewind animations;
- modify existing animations;
- reverse animations;
- control the animation speed (UICubicTimingParameters).
The functionality of the UIViewPropertyAnimator class is based on UIViewAnimating and UIViewImplicitlyAnimating protocols:
- UIViewAnimating enables you to:
- run animations;
- pause or stop animations;
- capture the current animations state.
- UIViewImplicitlyAnimating protocol conforms to the previous one and specifies methods for starting and stopping animations as well as for updating their state.
3. UIKit Dynamics
UIKit Dynamics is a physics engine integrated into UIKit. It allows one to influence elements by adding behaviours, such as gravity, friction, rotation, etc. The dynamic engine takes care of everything else.
A dynamic animator interacts with each of its dynamic items:
- Before adding a behaviour, you specify the starting position, rotation, and bounds of the item.
- After you added a behaviour, the animator takes over: it updates position and rotation as animation proceeds.
- You can programmatically update the state of an item while animation is running, then the animator takes the control back, considering the state you specified.
developer.apple.com/documentation/uikit/uidynamicanimator
Thus, UIKit Dynamics is a perfect tool to design fabulous real-world animation effects. The protocol can be used in iOS 7 and later versions.
4. Motion Effects
Motion Effects is a tool to create parallax effects similar to those that you can observe on the home screen turning your phone left and right. As a result, you can create interfaces that respond to changes in the phone orientation.
On top of that, the latter two have a powerful synergy.
When the two work together, you can:
- add gravity;
- set boundaries for animated objects;
- handle collisions between objects ;
- process notifications when objects collide;
- configure the properties of objects in a different way, i.e. control such properties as elasticity, friction, density, resistance, angular resistance, rotation tolerance.
Best Android tools
Google grants you many useful tools to implement various animations as well as Apple. There are, however, a few ready-made open-source libraries that deserve a closer look.
#1. Lottie
The Lottie library was developed by Airbnb. It is designed to parse the Adobe After Effects animations and render the on the smartphone. Animations are stored in JSON-files exported from After Effects.
Lottie supports a great many After Effects features, and it is one of its advantages.
2. Rebound
Rebound is a library written by Facebook in Java.
Rebound assists you in implementing realistic animations in apps. Such animated elements are following the physics laws like they are influenced by the spring force. Developers will not face any obstacles integrating and using it as a building block to create more complex animated effects.
3. RippleEffect
The RippleEffect library provides an easy way to create a view called header with an expandable view. Both views are external layout to allow a maximum of customization.
It can be useful if you want to animate the response the user gets clicking different buttons.
Summary
Nevertheless, no one forbids you to use other tools, but the listed ones will definitely come in handy while creating beautiful animations for your app.
Designing new effects, do not forget about their main applying principles:
- animation should be appealing, functional and able to facilitate interaction;
- only appropriate elements should be animated;
- do not animate elements that consume a lot of resources;
- render animations whereas possible.
All in all, animations are a rather effective way to spice up and improve your application. But do go overboard; otherwise, the effect will be quite opposite.
