Native Animation for Mobile Apps Using Lottie
Native Animation for Mobile Apps Using Lottie
If you're a designer who needs to play dev, or a dev who needs to play designer, read on to learn how to use this open source tool from the team at Airbnb.
Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
Meet the Lottie Framework
Imagine it’s Monday morning. You wake up and grab your phone to check your Twitter feed. You scroll and scroll — what’s that? Oh, news from NASA. “Like!” And then you suddenly see that the heart-icon has not only changed but did so gorgeously.
At first, it may seem like nothing. But the truth is, small animations in the interface can make a big difference. When you use a certain app and you know for sure it has reacted to your tap, it means the design was well thought through. The app creators not only made it practical but also attractive and pleasant to use. And it’s true — animations add uniqueness and mood to an application. Those of you who’ve ever tapped “Heart” on Twitter know this feeling — you simply go, “Aaawww!” Such a reaction proves how important animations can be in an interface. With tiny animations like this, users can’t help but like your product. On top of that, they’ll better understand what’s going on inside the app and how to interact with its interface.
Now imagine you’re a designer who wants to use animation in an app. You must be thinking, “God, this looks so complicated, it’ll take me ages to learn all the tools and understand all the nuances.” In my experience, these are the questions most newbies ask:
- Where do I start?
- Where do I get drawings I can use?
- I’m not a programmer! Do I have to learn to code?
- How do I optimize the animation so it works smoothly?
- Can I test the animation on a real device?
- What do I have to communicate with the developer so my animation will look the same as the design?
- I always wanted to make an animation! Will I be able to do it?!
If you answered “Yes” to at least a couple of these questions, then you definitely have to try Lottie, a library developed by the design department of Airbnb, that parses animations from Adobe After Effects using Bodymovin and renders native animation for mobile phones and web devices.
Let’s take a look at how to make an animation using the Lottie framework. We’ll go through all steps of the creation process so you can better understand what to do, and when.
Creating an Animation: The Process
Before you can enjoy all of Lottie’s features, you have to prepare resources and create an animation in After Effects. And because these are the most time-consuming and laborious parts of the process, let’s take a close look at what’s waiting for you and what difficulties you may encounter. Lottie animation development consists of these steps:
- Preparing resources to import into After Effects.
- Creating animation in After Effects.
- Exporting the JSON file with the help of the Bodymovin plugin.
- Creating a project in Xcode and connecting it to the Lottie framework.
- Viewing and testing the animation on a device.
Next, we’ll take a closer look at each of these steps.
1. Prepare Resources to Import Into After Effects
To create the animation, we’ll use the original logo file, prepared using Adobe Illustrator. When we save it correctly, we’ll have access to additional animation options, and we’ll be able to fully control export options. We’ll also place the objects in After Effects the same as we do in Illustrator, and save the structure and the layer titles.
Note: be diligent and orderly with the layers before saving. A well-prepared original of the design, with the right naming and layer order, will save you a lot of time at the next stage — creating an animation with After Effects.
Another important feature: you’ll have access to the Trim Path feature in After Effects to animate image contours (this feature is especially useful when you animate linear icons). When saving the Illustrator file, pick the AI-format.
When importing the file into After Effects, be sure to choose Retain Layer so that layers won’t interlace during the import. Then you’ll be able to animate them one by one.
After importing your graphics into After Effects, you should be looking at something like this:
As you see, the original shapes lack sharpness around the edges. But after you import vector images into After Effects, the edges will be smooth, without the extra pixels that make the image look blurry. To get vector images you can edit directly in After Effects, select all the Illustrator layers, right-click them twice, and choose “Create Shapes from Vector Layer” in the menu, as shown below:
From now on, After Effects will create shapes and hide Illustrator layers. When creating shapes out of imported graphics, you can use the Explode Shape Layers plugin, which allows you to significantly speed up the process. This way, you’ll see improved sharpness in your animation elements right away.
If you need to export an original from Sketch, use the Sketch2AE plugin. Сompared to Illustrator, Sketch is faster when it comes to preparing materials. Personally, I prefer Illustrator, as it transfers parameters of vector shapes more precisely. Its settings are also more flexible. However, you can work on your graphics in Sketch. As soon as you’re happy with the final version, transfer it into Illustrator.
2. Creating Animation in After Effects
Now that you have imported your originals into an After Effects project and are ready to go, you must be eager to know when you can start working with Lottie. But before you get your hands on your animation, it’s important to remember that:
- Before starting a project, always download the latest version of Bodymovin and check GitHub to see what features aren’t currently supported.
- Lottie restrictions are described at Supported Features.
- Composition support in Lottie is very poorly realized, so try not to use it at all. Alternatively, you can merge all the layers into one composition at the final stage of animation development.
- Don’t use expressions while developing an animation. Calculating expressions in each frame in a browser is a resource-intensive process. On a mobile device, where the frame rate is over 60 fps, it’s especially difficult to calculate.
- Use as few dots per inch as possible in masks and keyframes in those masks. They increase the file size substantially.
- Plan your animation at the start and use simple effects such as position, scale, opacity, rotate, etc.
- When creating an animation, set the frame rate that’s best for you. It doesn’t necessarily depend on your personal preferences — I use 60 fps so that the animation will run more smoothly on mobile devices.
In the Project tab on the left, you’ll see a composition with the same name as your Illustrator file. Double-click the composition to open layers in a tab with the composition name and time scale.
When creating your animation in After Effects, keep in mind where it’s going to be used and how it’s going to look among other animations used in the interface. Animation is not only functional; it also creates a certain mood within an app or website. This means you have to think about the big picture beforehand. Creating a storyboard with the animation’s keyframes is a great way to plan the final result, avoid inconsistencies, and divide complicated animations into simple components.
3. Exporting JSON Files Using the Bodymovin Plugin
After finishing the animation, use the ZXP Installer to install the Bodymovin plugin and save your animation as a JSON file. After installing it, go to Window > Extensions > Bodymovin. In an open window, choose a composition to render, the file path, and saving options in Settings. Before you click Save, make sure that Allow Scripts to Write Files and Access Network is ticked in the After Effects settings.
Depending on the results you’re trying to achieve, you can choose different saving options, which are described in detail here.
Done! Now, you can use the JSON file of your animation. Let’s see how it’s going to look on a real device or emulator. To do so, we’ll create a project in Xcode and connect the Lottie animation framework.
4. Creating a Project in Xcode and Connecting Lottie
Let’s create an iOS project that will allow us to check the animation in the emulator or on a connected iPhone. There’s a detailed Lottie animation tutorial on how to add the framework and the JSON animation file on the official Lottie website and on YouTube. As per the instructions, we will create a project in Xcode, and to test the animation we’ll add a slider that controls the playback progress.
Now you can smoothly change the animation, frame by frame, and thoroughly check the result. To separate the animation testing and playback of the final version, you can comment on two lines:
slider.addTarget(self, action: #selector(onSliderCharged(sender:)), for: .valueChanged)
animation.animationProgress = CGFloat(slider.value)
At this point, you can watch the animation on a Lottie animation viewer at normal speed (1x) and on repeat — just as it will look in the finished app.
You can download the project file from GitHub and take a closer look at the code, as well as leave comments about how to improve the test project.
Depending on the kind of animation you want in your interface, you can add reactions and animation controls using buttons, gestures, or something else. You can manipulate the animation’s playback and triggers, speed, and other features. There are countless ways to trigger and control animation; it all depends on how much time you have to make sense of Xcode.
5. Viewing and Testing Your Animation on a Device
Congrats! Now, you can view your animation on a device or emulator. You have several options:
- Download the Lottie Preview mobile app and use the QR code.
- Drag and drop your JSON-file into LottieFiles.com and scan the QR code on the screen. The file you drag and drop will be available only to you. You can enable access to it for trusted users.
- Connect the Xcode file to the project.
- Use another option described here.
Now you can see what your animation will look like when it’s integrated into an app, see how it runs, and get the results you want after a couple of iterations. If you want to change something, you can…
- change the animation in After Effects.
- save the JSON file with Bodymovin.
- refresh the JSON file in the Xcode project.
If your result doesn’t match your design in After Effects, you may have used a parameter that doesn’t support Lottie. To quickly identify what causes this, test parts of the animation one by one.
As soon as you’ve finished testing the animation on a device and setting the playback settings, you can give the JSON file (and the Xcode project file, if necessary) to the developer. Also, you can provide them with the animation video.
To test the animation on the web, you can use built-in browser tools that show you how fast the animation loads and what the playback parameters are. For mobile, you can use Xcode's built-in debugger and test the animation on real devices, or on an emulator where you can choose the required iOS and device.
What Makes Lottie Great?
First and foremost, using Lottie for animation will not just help you make your product unique, but also give your users an improved UX. Developing it in After Effects will allow you to create your animation exactly the way you imagined it and test it before embedding it into the code. Lottie is an open-source library, developed by the Lottie community.
On top of all this, you can modify the animation and test the viewing experience across different devices during the development process, independently from the mobile developers.
Besides, the library is very lightweight, which is why it quickly loads to apps and websites. It’s universal and can play animations on various operating systems with limited resources, which is why it can be played even on slow-performing devices.
During the development process, you will notice how easy it is to generate a new version of an animation and add it to the project. Consequently, you can focus on animation design, and not on the tool it’s being done with.
After just a couple of iterations, you’ll have set it up exactly the way you wanted it from day one. And when it’s done, all you have to do is pass playback parameters to the developers.
Published at DZone with permission of Sergey Gladkiy . See the original article here.
Opinions expressed by DZone contributors are their own.