非常有用的动画库，洛蒂

简介

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

该项目在GitHub已经获得三个端累计3万+的star。
在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();

或者

//布局中：
   <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/loading_animation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        app:lottie_fileName="permission.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true"/>

---

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