本文主要是介绍一款非常好用的动画库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();
或者
//布局中：<com.airbnb.lottie.LottieAnimationViewandroid: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
作者：八怪不姓丑
链接：https://www.jianshu.com/p/86b1103db051
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
这篇关于一款非常好用的动画库Lottie的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
