程序员也想改 Lottie 动画？是的！

时间 2019-11-08 标签程序员 lottie 动画是的

1、前言

Hi，你们好，我是承香墨影！git

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，用过都说好。彻底解耦开发人员和设计师，让设计师设计的动画，在程序中无缝还原，真是一旦拿起毫不放下。程序员

以前也写过两篇关于 Lottie 基础的文章，还不了解的能够先看看。github

Lottie 虽然很是好用，可是从反馈上来看，仍是碰到一些问题。在没有设计师配合的状况下，咱们如何找到合适本身 App 风格的 Lottie 动画的 JSON 文件。编辑器

以前也介绍过，有一个 LottieFiles 的网站，其内提供了不少设计师上传的 Lottie 动画，并提供预览的效果，只要咱们看中了，就能够下载下来使用，很是的方便。工具

https://www.lottiefiles.com学习

虽然这个网站特别的方便，可是有时候找到的动画，并不符合咱们 App 的风格或者咱们的主观须要。优化

例如这个动画，若是咱们想为圣诞作一个礼盒动画，找到这个动画以为很是的合适，可是想将动画中黄色的丝带和星星，修改成红色。怎么办？难道只能依赖设计师小姐姐了吗？动画

最开始我认为动画中，使用到的颜色，应该是写在了 Lottie 动画的 JSON 中，可是实际你去阅读 JSON 文件的时候，是找不到相似 ARGB 或者其余的色值内容的，因此也没办法经过直接修改 JSON 文件，来达到修改动画的目的的。网站

不过没关系，咱们有工具能够修改它。设计

今天就再给你们推荐一个 Lottie 动画的编辑器：Lottie-editor。

它已经在 Github 上开源，有兴趣能够看看源码。

https://github.com/sonaye/lottie-editor

简单来讲，Lottie-editor 为咱们提供了编辑现成 Lottie JSON 文件的能力。它能够针对动画中，不一样的颜色进行编辑，使用起来很是的简单。

将 JSON 文件拖拽进 Lottie-editor，左侧的每一个色块，就对应了当前动画中的一个颜色区域，咱们能够对其进行颜色的修改。一目了然，所见即所得。最终咱们能够将咱们修改好的动画 JSON 下载下来就能够直接使用了。

LottieFiles 这个网站，考虑到快速编辑的问题，自己已经支持 Lottie-editor 去编辑动画了。

咱们只须要在动画的预览界面，点击右上角的 "Customize with Bodymovin Editor"，便可直接对该动画进行编辑。

LottieFiles 还提供了 AE 动画的源文件下载功能（部分支持），这样假如咱们不只仅是对动画的颜色不满意，还须要修改一些更多的细节。咱们能够将 .aep 的文件一同下载下来，而后拜托设计师小姐姐帮忙修改一下。

注意，一个支持 AEP 文件下载的 Lottie 动画，都有其独特的标志。

拿到 AE 源文件以后，就能够根据本身的须要进行微调了。若是设计师小姐姐对 AE 动画不熟悉，也可让她经过这样的方式，学习别人制做动画的过程。

好了，对于 Lottie 动画能本身编辑，就本身编辑吧，实在不行就抱好小姐姐的大腿。😁

今天在公众号后台回复成长『成长』，将会获得我整理的一些学习资料，也能回复『加群』，一块儿学习进步。