一款非常好用的动画库Lottie

简介

Lottie是Android和iOS的移动图书馆，用于解析Adobe After Effects动画，并以Bodymovin作为json导出，并在手机和网络上本机呈现。

该项目在GitHub已经获得三个端累计3万+的star。
在Lottie社区提供了更多的动画下载。
如果你是一个设计师还可以将自己制作的作品发布到该社区。

图片来源Lottie

兼容平台

Android
iOS
React Native
Xamarin，
NativeScript，
Titanium，
UWP

优势

使用方便、简单
无需担心屏幕尺寸适配问题
减少项目开发时间，增加交互的趣味性
针对平台包括了缓存和预加载功能，增加动画的流畅性
可以通过网络Json地址加载

制作动画

由于Lottie是使用AE制作，并且使用Bodymovin插件导出。
所以设计师要掌握一些AE的动画的制作基础，并且需要给AE安装插件。

下面教程部分来自Lottie设计制作官方文档

设计师需要的工具：
PhotoShop或Sketch，Adobe Illustrator，Adobe After Effects和Bodymovin

1、导出为.SVG的文件

需要使用ps，或者Sketch将作品以组的形式导出为SVG

2、导出为.AI的文件

使用Adobe Illustrator导入SVG文件，另存为.AI文件

3、将.AI导入到Adobe After Effects

使用前需要安装Bodymovin插件，该插件主要用于后面导出Json格式
1.下载 bodymovin压缩文件
2.下载 AE插件安装器 ZXP Installer
3.将bodymovin.zip文件解压，找到文件build/extension/bodymovin.zxp
将该文件使用安装器ZXP installer打开。
4.打开After Effects，然后修改 AE 的设置：Go to Edit > Preferences > General > and check on "Allow Scripts to Write Files and Access Network"，开启脚本。

导出Json需要四个步骤：

.1

将导入的文件拖到项目面板底部的小组合图标。

.2

进入菜单，然后选择组合>合成设置（ Composition > Composition settings）。设置fps帧

.3

选择组合中的图层，然后在图层菜单中选择“从矢量图层创建形状”，然后根据您的插画艺术品创建一个新的“形状图层”，该图形艺术品具有图形的可编辑向量属性，如路径，笔画，填充等

.4

打开AE窗口：Window > Extensions > Bodymovin.导出就完成了

Android使用

1.在Android中引入只需要在app中的Build.gradle添加一行代码

dependencies {  
  compile 'com.airbnb.android:lottie:2.2.0'
}

2.将Json文件拷贝到app>src>main>assets

3.在

//代码中：

        mLottieLove.setAnimation("lottie.json");
        mLottieLove.loop(true);
        mLottieLove.playAnimation();

或者

//布局中：

关于更多使用请参考：
设计师操作文档
官方使用文档
下载更多设计师的Json作品：
Lottie社区
Demo参考地址（多个动画切换）：
https://github.com/wapchief/android-CollectionDemo