Lottie Andrews open source animation library

Lottie bunker

Airbnb recently open sourced named Lottie animation library that can simultaneously support iOS, Android's development and ReactNative. This news came out, still suffer from all kinds of cool effects to explore the custom control, I like the excitement of discovery New World in general. It can be said, Lottie appears, will write to the endless greatly liberated Android / iOS native engineers from working definition of the animation.
when we realize GIF projects with a number of complex visual effects of time, will encounter many problems. for example, GIF files too large, and there is an inconvenience to fit different device resolution and color depth problem Gif format is a soft spot.

For example, the following several animation:

The design of these animation effects clearly not write code that programmers should be responsible for something. That there is no way to make art in AE animation software designed for mobile end direct it?
Yes, that is the use of Lottie.

As shown above, the software installed on the plug bodymovin named AE, AE can be animated project file is converted into a common format json profile, bodymovin plug itself is used to render the page on the effects of various AE an open source library, lottie to do is to realize the way a can render AE animation on different mobile terminal platforms. so as to achieve animation files of a draw, a conversion, available everywhere effects.
of course, such as Java 一次编译,随处运行, like lottieitself the animation library is not cross-platform.

Get started

Said so much, let's explain in detail how to use the library bunker. At the outset, the following related to the software may contain crack version, if you funded, please support genuine.
The following use of software in 2017 February 6 Japanese are valid.

Install Adobe After Effects CC 2017

Adobe is a good company, do a lot of fast hardware software, but without exception, people have been cracked. This example uses the latest version of AE CC 2017.

Download available http://www.dayanzai.me/after-effects-cc-2014.html

CDN distribution address http://trojx-me.oss-cn-hangzhou.aliyuncs.com/AE%202017%5BWwW.DaYanZai.Me%5D.rar

Thank the authors provide the software. Note that this version is only available in WIN 64-bit systems , the author Wei Win7 64
can be installed and used under normal conditions. Installation in accordance with the built-in instructions to install.

Bodymovin plug-in installation

For this plug-in can see the plugin GitHub page .

Download `bodymovin.zxp`add-on package

This file is located in the project /build/extension/directory, if outside of the slow speed can from here you can download the latest version of the plugin.

Install plug

Project description given three ways to install plug-AE:

ZXP Installer to install third-party software;
Installed manually;
Use the Adobe plug-in installation is installed.

I have tried all three came to the conclusion that only the second (also seems most tedious) detail here about the effective second method:

- Turn off AE;
- Opened with WinRAR or similar software bodymovin.zxpfiles, folders and files directly copied to the decompressed C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
  or C:<username>\AppData\Roaming\Adobe\CEP\extensionslower, for the MAC machine path/Library/Application\ Support/Adobe/CEP/extensions/bodymovin

- 修改注册表.对于Windows,打开注册表修改器,找到HKEY_CURRENT_USER/Software/Adobe/CSXS.6,并在此路径下添加一个名为PlayerDebugMode的KEY,
  并赋值为1;对于MAC,打开文件~/Library/Preferences/com.adobe.CSXS.6.plist并在末尾添加一行,键为PlayerDebugMode,值为1.
- 设置AE 无论以何种方式安装bodymovin插件,都需要在AE的编辑->首选项->常规中勾选允许脚本写入文件和访问网络(默认不开启)

开始制作动画

由于笔者目前不会使用AE(废话,软件都是刚装的),这里我们打开一个现有的工程文件.
从这里可以找到一些Lottie中演示过的动画的AE源文件,下载到本地后在AE中打开即可.这里我们选用EmptyState.aep这个实例工程,稍作修改:

导出json数据

如果上文的bodymovin插件安装成功的话,在AE中的窗口->拓展中是能够找到它的.

在插件窗口中选择json数据文件导出的路径,点击Render按钮即可渲染工程并导出.

原始工程动画效果:

原始工程导出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_origin.json
修改后工程动画效果:
修改后工程导出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_edit.json
使用Lottie库播放动画
终于说到主角了,然而关于它的使用方式却是相对简单的.Lottie的引入与使用就如其他库一样,这里以Android平台的使用为例.
在项目的build.gradle文件中加入:

Lottie支持Jellybean (API 16)及以上的系统,最简单的使用方式是直接在布局文件中添加:

或者,你也可以通过代码的方式添加.比如从位于app/src/main/assets路径下的json文件中导入动画数据:

这方法将在后台线程异步加载数据文件,并在加载完成后开始渲染显示动画.
如果你想复用加载的动画,例如下一个ListView中每一项都需要显示这个动画,那么你可以这么做:

你还可以通过API控制动画,并且设置一些监听:

在使用遮罩的情况下,LottieAnimationView 使用 LottieDrawable来渲染动画.如果需要的话,你可以直接使用drawable形式:

如果你需要频发使用某一个动画,可以使用LottieAnimationView内置的一个缓存策略:
LottieAnimationView.setAnimation(String, CacheStrategy)
其中CacheStrategy的值可以是Strong,Weak或者None,它们用来决定LottieAnimationView对已经加载并转换好的动画持有怎样形式的引用(强引用/弱引用).