May 13, 2019 at 19:08Animation in Mobile Applications: Testing Lottie
Many people know about the LottieFiles library, but they are in no hurry to try in practice. There are few articles on this subject, so I decided to share my experience in creating animations for mobile applications using Lottie.
You can’t do without animation in mobile interfaces. It revitalizes the application, helps the user navigate it and get a response to their actions, causes emotions.
By type of interaction, you can divide the animation into several categories:
Let's clarify what types of interactions are suitable for Lottie.
LottieFiles is a library for iOS, Android, Web and Windows. In this article I’ll talk about features only for iOS and Android, as I specialize in mobile interfaces.
A small educational program - the library consists of json files that encoded animation from Adobe After Effect. The plugin that is involved in creating such files is called Bodymovin. It has a JavaScript engine and renders animation in real time.
You can use the trial version of Adobe After Effect if you have not worked with this program before. In a week of use, you will have time to test and decide whether you need it.
I analyzed a table from Airbnband highlighted the features of Adobe After Effect, which are supported on both iOS and Android. When creating animations, you need to consider them in order to get json output, which will correctly display on both platforms.
Supported Features Pivot Table for iOS and Android
The designer creates the animation in Adobe After Effect, given the limitations, then exports it to json using the Bodymovin plugin . After that, you need to do a test file in the preview services - Bodymovin Player or Lottie Preview .
Think ahead with layers based animation. You can create it from scratch in Adobe After Effect, or you can first draw the source file in Adobe Illustrator or Sketch. Importing into Adobe After Effect in this case can be simplified by plugins:
If it’s not possible to purchase plugins, simply import the Adobe Illustrator file as Composition into Adobe After Effect. Before you begin, create Shapes from the imported layers. If this is not done, then when you export json, you will lose the visual part of the animation due to binding to the Adobe Illustrator file.
Creating Shapes based on vector layers of the Adobe Illustrator file
I used ready-made illustrations and prepared cases that are based on the proposed animation classification. For an example of microinteraction, a button is selected, for independent graphic animation - an illustration for onboarding. I also tried to make json for the visual component of the custom transition between screens.
Animation in Onboarding (Image Source - Flaticon )
Button animation and animation for transition between two screens
To add animation to the application, connect the LottieFiles library. Here you can find out how to do it. In the executable code for the animation, you can set the size, playback speed and number of plays - this allows you to fine-tune the animation.
All cases were tested and connected - Lottie can be used for animations for various purposes.
Connect Lottie on iOS
Recently, Maxime Robinet, together with Psycle Research, launched the Figma (love) Lottie experiment , in which they tried to use the Figma API to demonstrate json on layouts.
To use the service, perform preliminary manipulations with the layout in Figma. Place a group of layers on it: a container for displaying animations, animation parameters in text blocks (playback speed and cyclicity). Detailed instructions here .
For demonstration, you will need json, a personal token for access (you can get it in the account settings) and a link to the screen layout in Figma. The desired mocap device will be added automatically to the layout resolution. As a result, you will get a link that you can share. She will work for about two months.
This is what I got.
Figma (love) Lottie will help you demonstrate json directly in the interface and configure animation parameters without the help of a developer. Lottie Preview and Bodymovin Player lack these features.
Lottie can speed up the application development process. The time spent on animation in the project is controlled by the designer. He creates, tests, adjusts the animation and passes it to the developers. Functional specifications are not required here. However, for various reasons, it is not appropriate for every mobile application to connect LottieFiles. Also, development teams often abandon this library due to well-established internal processes, which are usually difficult to go beyond. I would like to try LottieFiles in a real project.
Here you can download the json I created and watch them in Lottie Preview.
The Lottie Preview app itself - iOS and Android
You can’t do without animation in mobile interfaces. It revitalizes the application, helps the user navigate it and get a response to their actions, causes emotions.
By type of interaction, you can divide the animation into several categories:
- microinteractions - visual responses to user actions, animation of specific interface elements on the screen, for example, buttons or icons;
- independent graphic animation within the screen , for example, animated illustration in onboarding or splash-screen;
- Transitions - an animation that connects two screens.
Let's clarify what types of interactions are suitable for Lottie.
We understand the nuances
LottieFiles is a library for iOS, Android, Web and Windows. In this article I’ll talk about features only for iOS and Android, as I specialize in mobile interfaces.
A small educational program - the library consists of json files that encoded animation from Adobe After Effect. The plugin that is involved in creating such files is called Bodymovin. It has a JavaScript engine and renders animation in real time.
You can use the trial version of Adobe After Effect if you have not worked with this program before. In a week of use, you will have time to test and decide whether you need it.
I analyzed a table from Airbnband highlighted the features of Adobe After Effect, which are supported on both iOS and Android. When creating animations, you need to consider them in order to get json output, which will correctly display on both platforms.
Supported Features Pivot Table for iOS and Android
Create Lottie Files
The designer creates the animation in Adobe After Effect, given the limitations, then exports it to json using the Bodymovin plugin . After that, you need to do a test file in the preview services - Bodymovin Player or Lottie Preview .
Think ahead with layers based animation. You can create it from scratch in Adobe After Effect, or you can first draw the source file in Adobe Illustrator or Sketch. Importing into Adobe After Effect in this case can be simplified by plugins:
- Overlord (from Adam Plouff) for integrating Adobe After Effect and Adobe Illustrator - for quickly moving vector forms between programs without importing and organizing files;
- AEUX (from Adam Plouff and Google SUMux) - for the integration of Adobe After Effect and Sketch, similar to Overlord. Will be available soon for Figma!
If it’s not possible to purchase plugins, simply import the Adobe Illustrator file as Composition into Adobe After Effect. Before you begin, create Shapes from the imported layers. If this is not done, then when you export json, you will lose the visual part of the animation due to binding to the Adobe Illustrator file.
Creating Shapes based on vector layers of the Adobe Illustrator file
I used ready-made illustrations and prepared cases that are based on the proposed animation classification. For an example of microinteraction, a button is selected, for independent graphic animation - an illustration for onboarding. I also tried to make json for the visual component of the custom transition between screens.
Animation in Onboarding (Image Source - Flaticon )
Button animation and animation for transition between two screens
Connect the library
To add animation to the application, connect the LottieFiles library. Here you can find out how to do it. In the executable code for the animation, you can set the size, playback speed and number of plays - this allows you to fine-tune the animation.
All cases were tested and connected - Lottie can be used for animations for various purposes.
Connect Lottie on iOS
What's new
Recently, Maxime Robinet, together with Psycle Research, launched the Figma (love) Lottie experiment , in which they tried to use the Figma API to demonstrate json on layouts.
To use the service, perform preliminary manipulations with the layout in Figma. Place a group of layers on it: a container for displaying animations, animation parameters in text blocks (playback speed and cyclicity). Detailed instructions here .
For demonstration, you will need json, a personal token for access (you can get it in the account settings) and a link to the screen layout in Figma. The desired mocap device will be added automatically to the layout resolution. As a result, you will get a link that you can share. She will work for about two months.
This is what I got.
Figma (love) Lottie will help you demonstrate json directly in the interface and configure animation parameters without the help of a developer. Lottie Preview and Bodymovin Player lack these features.
On practice?
Lottie can speed up the application development process. The time spent on animation in the project is controlled by the designer. He creates, tests, adjusts the animation and passes it to the developers. Functional specifications are not required here. However, for various reasons, it is not appropriate for every mobile application to connect LottieFiles. Also, development teams often abandon this library due to well-established internal processes, which are usually difficult to go beyond. I would like to try LottieFiles in a real project.
Here you can download the json I created and watch them in Lottie Preview.
The Lottie Preview app itself - iOS and Android