Lottie让我脑洞大开效率翻倍

作为设计从业者，每天都会上Behance、Dribble、ins、站酷等国内外设计网站，去关注新的设计趋势和研究学习大神们的设计，每每总是会被上面炫酷的动效特技把老夫的少女心炸裂的粉碎，想把动效实现到自己的工作项目中的心真是蠢蠢欲动，可忆起有多少次拿着自己做的动画视觉效果想要开发小哥哥给咱实现的时候，得到的多数是这样或那样的原因：

Lottie，可以让你的动画完美落地呈现的同时，让你和开发小哥哥们也能有个愉快的沟通体验。

关于Lottie，也是在2017IXDC大会上有幸听了Airbnb设计总监的分享，有介绍到他们研发出品的Lottie开源库，可把AE里的动画通过插件直接生成代码实现，无需再依赖开发去实现。

是由Airbnb公司研发，一个可以解析使用"bodymovin"插件从 AE 中导出的格式为 json 的文件，并在 iOS、Android、macOS、React Native 中进行解析使用的开源库。

（工作流示意图）

1，完整的跨平台工作流

提供了一套完整的跨平台的动画实现工作流，iOS，android，macOS，React Native 可用同一套文件，设计师再也无需为每个平台都输出一套设计资源。

2，提高开发效率

大大的缩短了开发同学的开发时间，以前两天完成的现在一个小时做完不仅只是说说而已。

3，复现效果佳

100%还原设计效果。和开发撕逼的日子一去不复返了，省时又省力。

4，性能好

json文件本身文件很小，大大减少了客户端包的空间和动画加载的内存；这是gif动画、序列帧和开发实现所完全不能比的。

5，灵活性好

支持服务器端URL方式创建，可以通过配置json文件来实现复杂动画的后台更新，不依赖于客户端发版。（如：客户端可以根据节日来实现不同的动画）

6，支持转场动画

presentviewController／DismissviewController时可以使用转场动画。

1，对AE中实现效果有限

可支持的After Effects功能部分展示如下图：

（部分功能罗列）

上图仅展示了部分功能，全部功能及详细信息可前往此网址进行查阅https://airbnb.io/lottie/supported-features.html

2，对设计师要求更高

以前设计师可能更多是找个例子直接给开发童鞋说下我需要什么什么样的效果，好一些的可能是出个大概的demo效果出来给开发看一下，但现在需要设计对AE的使用能力要求更高些，动画的实现和落地效果也更依赖于设计师。

3，不支持文本

文字需转成矢量图导出的json文件才能正常使用。

4，平台系统的版本限制

iOS8.0以上，android14以上。

5，交互方式的单一性

现暂不支持可交互的动画，主要支持播放类型动画；在不久的以后可能也会支持可交互的动画，期待中.....

那么，这个技术性价比这么高，比较常用在产品的哪些地方呢？

1，APP的启动页动画，常见的是Logo的启动动画

（来源于airbnb design）

2，上下拉页面刷新动画

（来源于网络）

3，加载(loading)动画

（来源于网络）

4，提示(tips)动画

（来源于网络）

5，按钮的切换过渡动画

（来源于airbnb design）

6，界面转场动画

（来源于网络）

项目一：云之家首页头部背景动效

第一步：首先在AE里把动效效果做出来。

第二步：安装了bodymovin插件后，路径是“窗口”-“扩展”-“bodymovin”，通过bodymovin插件导出json动画文件和demo文件。json文件是给开发同学开发使用，demo文件是做预览功能，确保导出来的效果和做的是一致的。

(动画demo)

(动画demo)

第三步，只需要等一下就可以看到实现的动画效果了。

(动画一)

（动画二）

（动画三）

（动画四）

1，如果是系列动画图最好在AE里做相同尺寸的动画并导出相同的尺寸给开发。

2，因为动画里导入了图片，所以导出JSON文件夹会带img文件，里面素材会有黑边，需重新替换里面素材，且命名不能改。

3，导出Json文件时最好同时导出一份demo，demo是html格式的，可预览确认效果。

4，给开发资源的文件夹里包含的内容：data.json+img或再+html。（前两个必带，第三个选带）

项目二：APP引导页

背景：要传达的是赋能个体激活组织，要通过科技创新给基层员工赋能，激活每个人为自己工作，将成为组织创新的核心。所以设计方案也是围绕个体赋能的一天工作，与产品功能点的结合。通过新颖的交互动画增强代入感和体验感。

设计过程：

整个项目设计分三个阶段，首先在AI里设计好静态视觉和单独切好所有的设计资源，并附带切图资源的位置数据说明文档。

然后，在AE里完成动画部分，并导出Json动画文件。

最后，在priciple里完成时间差的页面转场动效，并附带切图资源的页面出入场的移动距离及透明度变化数据说明文档；并把以上所涉及到的所有资源提供给开发。

线上效果：

1，按照2x尺寸来做动画视觉，动画效果要提前考虑能否用JSON方式实现，再确定动画方案，以防花费大量时间做好动画无法导出json，无法落地。

2，提供资源前和开发童鞋沟通好导出文件的尺寸，系列图最好是统一尺寸，尺寸越小越好，位置数据说明文档要附带一起给开发。（复现效果简直完美）

3，AI的文件导进AE前分好图层，特别是要做动画的内容。

4，AE所有的文件放在一个文件夹里，保障源文件完整性便于后期修改。

5，导出JSON文件时，导出份demo，便于确认效果。

6，方案优化时，动画不改的前提下，img里的图片要重新替换，可直接替换其图片，不用重新导json文件,只需把新的图相同尺寸相同命名丢给开发童鞋即可。（比如中文版和国际版的带文字的图片替换）

周期短、效率高、效果好、协作融洽，有一种可以自己动手丰衣足食的幻觉:tongue:；后续可能会比较多听到开发童鞋对你说“这个你用JSON实现给我呗”:cry:现在Lottie还无法完全实现AE里的效果，但真的大大降低了我们希望打造更好用户体验的门槛。

以上只是我实际工作中一些浅显的心得体会，有兴趣可深入去研究下，相互探讨~