Interface animations are an integral part of any modern mobile application. They perform certain functional tasks, one of which is to make the app as user-friendly as possible and explain the logic of its navigation to the user. Moreover, the most successful animations for apps can become a very effective marketing tool.
In the article, we'll talk about the types of animations and illustrate our words with vivid examples. And, of course, we are going to discuss different ways of developing animations for mobile apps.
Why interface animations are so important
As we have already said, an interface animation is a very useful tool that performs the following functions:
- a navigation function, in other words - simplification of work with the application;
- a marketing function. The successful animation design is able to capture user attention and become one of the factors in favor of choosing your particular mobile service;
- a decorative function. Yes, users love everything beautiful and spectacular, and animations for apps will help you create the desired effect.
However, one should remember the need for moderation in all things. Too fanciful and complex effects of animations only confuse the user and cause a negative impression. We hope, the tips and illustrated examples in the article will help you find a middle ground.
Most popular animation types
There are different types of animation, each of which plays its own part.
#1. Reaction to user actions
Imagine: the user has tapped your app button or performed another action with some expected effect but no response followed, visually everything remained just the same! Undoubtedly, such a failure would cause user dissatisfaction. In the end, we all want the world to meet our expectations, and the rule applies to applications either.
That is, this item on the list of animation types for mobile apps implies visual feedback. The application should contact the user, react to his actions: when pressed, the button changes color, the image is enlarged or moved to the side when swiping to the right or left, and so on.
On the concept above, the user can control lighting in the house with the help of the smart home application. And the animated interface reacts exactly as expected: the light circle expands and contracts with a certain user action.
Here's one more great concept explaining the idea (it is also an example of the creativity and skill of our Agilie guys).
Take a look at another interface animation piece that also illustrates the correct interaction with the user (now it’s about swiping images).
#2. Simplifying the navigation system
One of the purposes of Android and iOS animations is to simplify navigation. The screen of the smartphone has its limitations, some navigation elements may be hidden - and in this case, it is useful to resort to special animation tricks so that the user can see what was previously "hiding" from him.
However, let's illustrate our explanation with a few interesting examples in order to make it all clear.
An excellent restaurant concept made by our expert team demonstrates a pop-up bottom menu. And take a look at the rotation of images with the interior examples, it creates a stunning effect, doesn't it? The work includes different types of animation, so the impression is truly incredible.
#3. Animated hints
In general, the task of this item of the list of types of animation is the same as in clause # 2 - to help the user navigate the application correctly. However, now we act in a more obvious way by showing users what the interface structure is with the help of animation tools.
This is necessary if you aren't sure the user can guess correctly what the reaction would follow after he interacts with the certain app element. Then it is reasonable to make the animation to visualize the whole process.
Here is a concept illustrating the description above
#4. Interface animations that simulate the real-world interaction
One of the goals of interface animation is to create the illusion of interacting with real-world objects. A striking example is the standard iOS Weather application which displays the current weather. Such an iOS animation makes us feel like we are looking out the window and seeing the rain, the serene sky, or the smoothly moving clouds.
#5. Animating the system
Arguing about the animation types, one should not forget that the app work consists of various system processes, and these processes also need to be animated.
Where does such a need come from, you may ask? Just imagine, the user listening to the audio file is forced to admire the empty app screen... it'd be wrong, agree! The solution to the problem is an animated screensaver, which shows that the sound is playing:
https://www.behance.net/gallery/54853211/FIDO-Music-player
There is also a popular iPhone feature named "pull to refresh". Such a feature is necessary to update the application screen and requires applying animation to the app too:
Look at the Twitter example!
Another system process is the download of certain content. We advise you to brighten the user's tedious waiting minutes by designing animations of the sort:
It's a good example of the animation timeline
In addition, you can create animations for its in-app notifications.
Well, we can continue indefinitely, because there are a lot of similar system processes, and each one needs its own dynamic effect.
#6. Fun animations for apps
Now we're talking about the decorative effects of animations. Such dynamic subjects do not serve any specific functional purpose, they are needed to give the app a highlight, attract the user's attention, and be remembered.
But, of course, such an animation design should not distract from the main features of your application.
In the picture above, we see several types of animation, among other things - just decorative ones (we mean the movement of shoes). The effect is unobtrusive but interesting.
#7. A unique approach
We should also mention custom animations that are needed if you want to enhance app uniqueness.
Here, take a look at a cheerful and bright example created by our UI/UX experts and suitable for the restaurant app - a menu selector concept:
How to implement animation in a mobile app
It's time to talk about ways to make animations and implement them into the app.
So let’s discuss the most popular animation tools.
Custom solutions
In this case, we are talking about designing animations from scratch. Of course, it's the best option, because you get a completely unique solution.
We, in our practice, have often faced the need to develop custom animations of different types.
The cool interface animation above is implemented using the AGMobileGiftInterface library, written by Agilie developers
And here is a GoButton plug-in, which we created when we needed one. Though, now it's free to use.
However, custom development has its drawbacks:
- it's more complex, so you need more time to implement the idea;
- it's costly. The time and complexity of the development lead to an increase in the price.
So if your money and time resources allow you to resort to a custom solution, you can create animation from scratch, without the help of ready-made libraries. Otherwise, we suggest that you pay attention to the next option, namely…
Ready-made solutions
In fact, Google and Apple provide all the necessary components to make top animations, for mobile app developers really need them. And, of course, there are many resources, on which developers share with each other their experiences and achievements (libraries, plugins, etc.). The most popular of them is GitHub. Naturally, our company also contributes.
So, in the context of a lean budget, it makes no sense to reinvent the wheel, it's better to use the ready-made solution.
There are various pitfalls, though. The main thing is that we cannot be 100% sure whether a particular library perfectly fits our purposes. In addition, in the future, you may need to fix something or improve, and you'll have to work with someone else's code, which is always a trick. However, these problems can be solved.
Let’s summarize: with a probability of 80-90%, you'll find the library you need to make animations. The question is the quality of the solution.
We recommend studying several open-source libraries and assessing how they differ and which one is best suited to your particular case. Also, you can determine the best aspects of each solution and, on their basis, design a new animation of your own.
So, if you’re seriously thinking of designing animations, read the following paragraphs that describe a few popular Android and iOS tools.
iOS UI animation tools
First, let's look at the animation tools for iOS.
#1. Hero
The Hero library comes in handy if you are faced with the task to offer a non-standard transition between several controllers.
It's a good animation tool for iOS developers' needs. We used it while working on some of our projects and can confidently say that it is made qualitatively enough. Moreover, Hero is being constantly supported and improved. Therefore, it can be safely recommended as a good library to build animations for apps.
Its advantages:
- great quality;
- simplicity (the library is very easy to implement in your project);
- high speed.
#2. UIViewPropertyAnimator
Such a method of adding different types of animation is not the newest, it exists since 2016, but some developers still undeservedly ignore this class and do not use it in their practice.
So, the UIViewPropertyAnimator class allows:
- creating interactive animations which are controlled by the user himself;
- implementing the possibility of rewinding the animation;
- modifying existing animations for apps;
- playing the animation in reverse order;
- implementing the ability to adjust the animation speed (UICubicTimingParameters).
UIViewPropertyAnimator provides its functionality based on two protocols:
- UIViewAnimating - the protocol which makes it possible to perform the following functions:
- run the animation;
- put it on pause or stop;
- get the current state or position of the animation.
- UIViewImplicitlyAnimating - the protocol which is inherited from UIViewAnimating. UIViewImplicitlyAnimating provides us with new features, among which is the ability to continue the iOS animation after it stops and reconfigure its quickness.
#3. UIKit Dynamics
You can make use of one more instance of iOS animation tools, namely, UIKit Dynamics
UIKit Dynamics is a special physical mechanism built into UIKit. Previously, the technology was only a dream, but since the iOS 7 version, it has become a reality. Its essence is to reflect the impact of certain external forces and even natural phenomena on the objects of the mobile program. Let's say, how would one or another element react to being affected by gravity or friction (or something else of the sort, because we can name a lot of such behaviors)?
With competent development, a user will have the impression that he is watching a picture of the living world where all the objects are subject to the influence of the natural surroundings and react accordingly.
In other words, UIKit Dynamics is the key to getting the amazing real-world animation effect; look at the examples below to understand what we're talking about.
https://github.com/TeehanLax/UIKit-Dynamics-Example
https://github.com/objcio/issue-5-springy-collection-view
#4. Motion Effects
Now let’s look at Motion Effects.
Motion Effects is a technology helping to implement a parallax effect (such as the one we get on the Home screen when rotating the phone). These types of animation are the perfect solution if we need an interface that would respond to changes in the orientation of the phone.
The double effect
If you want to get the maximum effect, you should use these 2 technologies together.
Simultaneous use of both tools provides your users with the possibility to contact the application at a deeper level: they’ll be able to see how the interface naturally and rapidly reacts to their actions.
Simultaneous use of these animation tools for iOS helps you to:
- apply the gravity influence;
- set borders for elements which we try to animate and process collisions between them;
- processing notifications when objects collide with each other;
- customize the properties of elements such as collision elasticity, sliding friction, density (it affects acceleration when implementing the motion effect), resistance, etc.
Android UI animation tools
And now let's talk about animation apps for Android.
As we've already mentioned, Google provides a lot of useful tools to implement various types of animation.
- Simple movements. Many interface animations are based on simple effects such as moving, scaling, rotating, etc. These effects can be implemented with the help of ready-made components described in the Android documentation.
- Transitions. It is also worthwhile to pay attention to animations when switching from the screen to the screen, which became available from the 5th Android version. To create beautiful and smooth screen-to-screen transitions, use special tools (follow the link).
- Effects of physics. In addition, the support library of Android offers interesting opportunities to create animations with elementary physics
Agilie developers created such a wonderful dynamic animation using the possibility of elementary physics.
But if you are not completely satisfied with the opportunities for designing animations that Android offers, we can give you a few examples of ready-made open-source libraries. They’re all aimed to build different types of animation.
#1. Lottie
Lottie is an open-source library created by Airbnb guys. It’s designed to parse the animation of Adobe After Effects and render it on phone. Animations are being stored in JSON files exported from After Effects.
The main advantage of Lottie is the support of a great many After Effects features, which is a good thing if you want to build animation apps for Android.
Lottie animations are being already used within Airbnb apps:
#2. Rebound
Rebound is another great library written by Facebook developers in the Java programming language.
Rebound allows the creation of wonderful springtime animations. Android offers tools to achieve the same aim, but the effect is quite simple. And the FB experts suggested something more impressive.
Rebound makes it possible to implement realistic animations for apps. These animated elements are following the physics laws as though being influenced by the spring force.
The Rebound library is used by such giants as Evernote, LinkedIn, Slingshot, and others.
#3. RippleEffect
The RippleEffect library also deserves your attention. Its essence corresponds to the name: it is designed to create a beautiful ripple effect.
RippleEffect will help you make the interaction with the application more spectacular and impressive. So, you’ll improve the user's experience.
The library is easy to customize, which means you’ll have no trouble adapting it to your project.
Of course, these 3 libraries are just a tiny part of a huge list, which is constantly expanding. You are free to find what seems most interesting to you. Or you can contact us: our experts will be happy to make the animation you need.
How to choose the right animation tools
In order to choose the right tool to make animations, we need to clarify the factors influencing the final result:
- clear requirements. Don't economize on words when describing your idea of the interface animation to developers. They should understand what you want to get in the end. Such understanding can save you a lot of time, effort, and, as a result, money.
- the complexity of animation design. The more complex the animation, the more effort would have to be applied to implement it.
- the right tools. It is very important to determine which model of implementation is more reasonable to use in your case. Some animations for apps are easier to create on the basis of existing libraries, it's faster and more economical. However, if your idea is very specific, custom solutions should be your choice.
- your resources. Of course, you must analyze your time and money resources. How much time and money are you willing to spend on the project?
We understand that you may find it difficult to figure out all of the above on your own. Happily, our specialists are ready to advise you on the matter.
Conclusions
We've explained the main animation principles and discussed the best ways of applying animation to the app. Now let's summarize:
- Make animation functional. Interface animations should help improve user interaction. Appealing but aimless dynamic effects are not helpful.
- Choose the elements which are really appropriate to animate. Of course, if desired, you can make anything dynamic, including the app background. But does that make any sense?
- Do not animate the resource-intensive elements. Such effects of animations would significantly slow down your application, which has a bad effect on the user experience.
- Render the animation on the web too if you also have a site in addition to the application.
if you want to design a new animation, we’re ready to help! Our designers will create an excellent concept, and developers will bring this idea to life.
