老铁（Lottie）和那些你不知道的事

Jancie: 大家好，很高兴看到今天的采访内容，在过去，在Android、iOS、React Native app中创建复杂动画是一件较为困难的事情，需要为不同尺寸的手机准备不同的图片，或者写很多难以维护的代码，一般都是通过给 PNG 序列图，或者是开发自己写这样对程序员哥哥们来说其实是需要很大的工作量的，也使得很多app放弃了使用动画这一表现力的方式，但现在有了这个强大的动画库将使得动画实现变得无比轻松，那么他是谁？？接下来我们有请Lottie～

Lottie：还是有点小紧张呢，哈哈，大家好，我是 Airbnb 开源的一个动画渲染库，同时支持 Android、iOS、React Native 平台。支持实时渲染After Effects动画，使得app中使用动画可以像使用静态资源一样简单。使用的话要从bodymovin(开源的 After Effects 插件)导出的json数据来作为动画数据。那我画个图给大家看，方便理解啊：

设计师使用 After Effects 制作漂亮的动画，并导出json文件给开发者，程序员哥哥再也不用辛苦去创建它了

由于动画由JSON驱动，因此它们的体积非常小，可是复杂程度可以很高哦，是不是很棒！

可以播放动画，调整大小，循环，加快速度，减慢速度，颠倒速度，甚至交互式地清理动画。

使用场景有很多：

启动动画：典型场景是APP logo动画的播放

上下拉刷新动画：所有APP都必备的功能，利用 Lottie 可以做的更加简单酷炫了

加载动画：典型场景是网络请求的loading动画

提示动画：典型场景是空白页的提示

按钮动画：典型场景如switch按钮、编辑按钮、播放按钮等按钮的切换过渡动画

礼物动画：典型场景是直播类APP的高级动画播放

视图转场动画

下面展示一下我的神奇能力吧～

                                       

铛铛铛！重点来了，说了这么多，怎么安装这个神奇的软件呢！

下面是分割线，一步步跟我来～

---

第一步：安装Bodymovin

Bodymovin是After Effects的一个插件，可以将json数据格式的动画导出为Lottie使用。

Mac用户：

1、打开安装器ZXP Installer，拖动 bodymovin.zxp 到安装器上；

就是他，打开 把.zxp拖进ZXP Installer 自动识别你电脑装的AE版本

很快这个插件就会安装成功了，然后你可以在 ZXP installer 里面看到这个插件已经存在了～

第二步：那么我们来到AE去看看如何导出json文件吧

1.首先来到首选项--常规把脚本的权限打开

看下面 就是它

2.窗口—扩展—Bodymovin，选择好合成和保存路径后，点击 Render 导出 data.jason 文件，再把该文件交给 iOS 开发 （其他同理），具体如下图。

这样子就有这个插件在AE中显示了，当然你可以把它移动到一个喜欢的位置方便操作

这里设置选择 Demo ，可以导出html文件，在浏览器查看动画效果。选择 Glyphs 将字体转换成图形形状。

这就是我们导出的文件啦，可以进行网页预览，json文件交付给开发

当然了这么强大的插件其实还会有一些限制的，有一些添加蒙版或者效果的动画会不能正常展示，但是它所应用的场景还是非常多，够大家工作中使用，那么废话不多说，我已经看到你跃跃欲试的心❤️，快去体验吧～

---

写教程缘故也是因为自己刚开始接触老铁时，对于它的用处和安装有很多不明白的地方，到处请教摸索也是花费了很多的时间，如果你也是刚开始使用，希望这篇文章可以帮助到你，需要的下载链接都在文章内容里面，如果我有写的那些不完善的地方可以加我的微信，咱们互相探讨。

设计作品：

Dribbble：https://dribbble.com/shijingya