One, foreword

Hi, everyone, I am Chengxiang Ink shadow!

Lottie is an open source set of Airbnb’s complete cross-platform animation solution, which has been used well. Fully decouple developers and designers, allowing designers to design animations that are seamlessly restored in the program, really once picked up and never put down.

I have written two previous articles on the fundamentals of Lottie.

  • Talk about Lottie from an Android development perspective!
  • How to deal with the pictures in Lottie?

Lottie, while very useful, has had some problems with the feedback. How do we find JSON files that fit our App’s style of Lottie animation without the cooperation of the designer?

As mentioned earlier, there is a LottieFiles website, which provides Lottie animations uploaded by many designers and provides preview effects. If we like them, we can download them and use them, which is very convenient.

https://www.lottiefiles.com

Although this website is particularly convenient, sometimes the animations we find do not meet the style of our App or our subjective needs.

For example, in this animation, if we want to make a gift box animation for Christmas, we find this animation is very suitable, but we want to change the yellow ribbon and star in the animation to red. How to do? Do you have to rely on the designer sister?

2. Edit Lottie animation

2.1 Lottie – editor

At first, I thought that the colors used in the animation should be written in the JSON of Lottie animation, but in fact, when you read the JSON file, you can’t find ARGB or other color values, so you can’t modify the animation directly by modifying the JSON file.

But it doesn’t matter, we have tools to modify it.

Today I will recommend another Lottie animation editor: Lottie-Editor.

It’s already open source on Github, if you’re interested, check out the source code.

https://github.com/sonaye/lottie-editor

In a nutshell, Lottie-Editor gives us the ability to edit existing Lottie JSON files. It can be edited for different colors in the animation, so it’s very simple to use.

Drag the JSON file into the Lottie-Editor, and each color block on the left corresponds to a color area in the current animation that you can color. What you see is what you get. Finally, we can download our modified animation JSON and use it directly.

2.2 LottieFiles

LottieFiles, for its part, already supports Lottie-Editor for animation editing, considering the need for quick editing.

You can edit the animation directly by clicking “Customize with Bodymovin Editor” in the upper right corner of the animation preview interface.

3. Modify animation AEP

LottieFiles also provides source file downloads for AE animations (partially supported), so if we are not happy with the colors of our animations, we need to fix some more details. We can download the.aep file together and ask the designer to help modify it.

Note that a Lottie animation that supports AEP file downloads has its own unique logo.

Once you have your AE source files, you can fine-tune them to suit your needs. If the designer is not familiar with AE animation, she can also learn the process of animation production by others in this way.

Okay, if you can edit Lottie animation yourself, edit it yourself. If you can’t, hug your little sister’s leg. 😁

Today, I reply to “grow up” in the background of the official account, and I will get some learning materials sorted out by me. I can also reply to “add group”, so that we can learn and progress together.

Recommended reading:

  • Comics: Programmer, can you “manage” your product manager?
  • Optimize data delivery for IntEnts by leveraging Kotlin’s features!
  • Fixed Lottie animation containing pictures!
  • Learn about Flutter on Google!
  • Remote control intelligent TV, the program has been open source!