动效无法落地？ Lottie开源动画了解下。

设计师的动效开发实现不了？了解下前端小白如何通过AE导出Json文件。

为什么要学Lottie？

设计师做出来的动效交给开发总是实现不了？开发周期长？开发成本高？学习了Lottie虽然不能解决全部动效的问题，但是类似于下面这样的效果是不在话下的。Lottie让不会编程的设计师立马输出Json文件，分分钟交给开发实现。(写在前面，部分步骤需要科学上网。)

Lottie的优势

- 开发无需编写动画,只需加载

- Android, iOS, 和React Native多台支持

- Path,flat等风格动画实现完美

- 可手动设置进度,绑定手势,事件等

- 可网络加载,动态控制播放速度等

- 性能好,显示效果完美

- ...（待补充）

Lottie的劣势

- 能在AE中实现的效果有限（下文有介绍）

- 对AE使用要求高一点, 动画更加依赖设计师

- ...（待补充）

【仍和 工具 其实都有优势和劣势，我们能做的就是，利用优势，避开劣势。】

大家一定会想，输出Json文件，是不是很难，是不是需要有编程的基础，但其实我们只要学会使用AE制作动效，然后安装一款AE的插件，导出Json文件，交给开发人员就可以了。（当然，这几个步骤之间还是会出现很多问题，这些就需要设计师们在实际工作中去磨练了）

这个就是json文件，打开之后是代码，需要借助Lottie官方的预览网站来查看。

直接把json文件拖到 https://www.lottiefiles.com/preview 这个网站，就可以看啦，也可以用手机端APP来查看。

关于安装

Lottie的官方网站有完整的安装、使用和注意事项的文档（英文）。 https://airbnb.io/lottie/

点开左侧 After Effects （有时候需要等一下，看网速快不快）

按照 Getting started的安装顺序安装（一定要按照顺序）

因为考虑到软件随时在更新，这里就不加下载链接了（科学上网）。另外，英文比较吃力的同学可以使用Google游览器，这个游览器有个功能是会将英文翻译成中文，百度可以了解如何使用这个功能。

总的来说，安装步骤官网写的很详细，大家需要做的是，1.科学上网；2.Google游览器。另外，国内有很多文章也总结了如何安装，但是都没有官网写的详细。我如果有空了会翻译一版给大家（看大家需求大不大）。

个人觉得，安装软件不是技术活，网上很多攻略，所以就给了最官方（最全、最新）的方法。

接下来介绍的就是在使用过程中，我遇到的坑，如果大家遇到了，可以作为参考。

1.在AE中做动效时，必须按照官方文档里支持的效果来使用。

官方文档写到的与AE动效设计有关的部分，以下是在各个平台上支持的效果。

在制作动效之前了解规则真的非常重要，讲到这里大部分的人会说，这么麻烦我不学了，反正我不是开发人员，这些本就是开发应该做的事情，和我设计师有什么关系呢？如果你这样想，其实是很危险的，在公司里拥有别人很难替代的技能其实就是提升自我价值（商业）的方式和手段。

而且，虽然规则有点多，但是可以实现的动效也是相当诱人的。

https://www.lottiefiles.com/popular 有打退堂鼓的人可以去这个网站看看。（popular里）

2.AE要全英文+最新版的bodymovin（这也是我为什么要推荐去官网下载）。

为什么要AE全英文呢，因为很多设计师遇到 渐变和彩色的图导出以后会变成黑白色，之前因为这个问题我查了很多的资料，真的是泪的教训。

3.和开发提前沟通好，比如要多大的尺寸，几倍图等等。

避免一稿多做，最好的办法就是多沟通！多沟通！多沟通！（重要的事情说三遍）

4.多平台检查

不仅要在官网的预览网站里预览，最好各配一部iOS和安卓的手机，下载Lottie 的APP，苹果很好下载，App Store里就有，安卓的比较麻烦，需要借助科学上网。我为了下载到安卓的APP，先电脑科学上网下载了Lottie的安卓APP（谷歌搜 lottie for Android ，）然后把安装包微信发到安卓手机，就可以下载了。

为什么要多平台检查？主要是避免之后会出现的一些未知状况。这个也是切身经历。我认为，在自己负责的这个环节里要将可以考虑到的情况都排查一遍。

5.陆续补充中、、、、、、（欢迎大家来指正）

总结，职业边界越来越模糊，国外的很多设计师在学习设计的课程中，学习编程是必修课。所以，为了提升自己以后的职业竞争力，不停扩充知识是很有必要的。