What is a Lottie? Why Lottie? Can I use Lottie in wechat applet?

I didn’t know anything about Lottie until today, and I didn’t need it anyway, so whatever. Unfortunately come out to mix of always want to return, encounter the scene that needs to use animation, because the animation is too complex, depend on my own strength how to be possible to realize inside short time!! A bai discovered this wonderful Lottie.

What is a Lottie?

Lottie is a library that supports Android, iOS, Web and Windows, and uses the Bodymovin plugin to parse Adobe After Effects (AE) animations into JSON files. And can be rendered in the mobile terminal or the Web display animation.

Why Lottie?

A search, discovery is a girl’s name named, hey hey. Lottie is named after a German film director and pioneer of silhouette animation. She is best known for her film The Adventures of Prince Archimedes (1926), which is the oldest surviving feature-length animated film, predating Disney’s feature-length Snow White and the Seven Dwarfs (1937) by more than a decade.

What do YOU need to prepare before using Lottie?

First of all, of course, prepare delicious food and drink

After Effects download and Install

This has to work hard, hot summer, a cup of milk tea to reduce heat first (there are good milk tea trouble recommend)

MAC version (Windows version)

Link: pan.baidu.com/s/1eL0AFHMI… Password: 743 w

Setup can’t open? Please come in

Installation failure? Please come in

Not yet? From a way to install…..

BodyMovin download and install

Seems to have seen the existing bodyMovin after Lottie, interested partners have a look at it

1. Go in and give me thisBodyMovin bagdownload
2. You need to download it againZXPCan open the build/just download the extension/bodymovin ZXP file

3, after downloading ZXP, open the bodymovin. ZXP just drag in good, prompt to complete, bodyMovin plug-in even if downloaded


Here even if the installation is good, the students who ordered the milk tea don’t be in a hurry to drink, but also have to do the corresponding Settings

4. Open AE to open a new world

. Open Preferences/Scripts and Expressions (different versions may vary some in Preferences/General). Select Allow scripts to write files and access networksOpen Window/Expand/BodyMovinWe will directly import the material composition (here I imported a test video), this time found that the extension window has more than a data, check the box, click file to set storage address, and then click “render” ok, the specified location has generated data.json file

Finally got data.json, here can be happy to drink milk tea (PS: if you are too lazy to download and install, you can ask design brother little sister can generate oh)

Today nonsense: get off work catch two star daru, happy day end successfully