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

image

一、前言

Hi，大家好，我是承香墨影！

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

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

Lottie 虽然非常好用，但是从反馈上来看，还是碰到一些问题。在没有设计师配合的情况下，我们如何找到合适自己 App 风格的 Lottie 动画的 JSON 文件。

之前也介绍过，有一个 LottieFiles 的网站，其内提供了很多设计师上传的 Lottie 动画，并提供预览的效果，只要我们看中了，就可以下载下来使用，非常的方便。

https://www.lottiefiles.com

image

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

image

例如这个动画，如果我们想为圣诞做一个礼盒动画，找到这个动画觉得非常的合适，但是想将动画中黄色的丝带和星星，修改为红色。怎么办？难道只能依赖设计师小姐姐了吗？

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

不过不要紧，我们有工具可以修改它。

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

它已经在 Github 上开源，有兴趣可以看看源码。

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

简单来说，Lottie-editor 为我们提供了编辑现成 Lottie JSON 文件的能力。它可以针对动画中，不同的颜色进行编辑，使用起来非常的简单。

image

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

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

image

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

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

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

image

拿到 AE 源文件之后，就可以根据自己的需要进行微调了。如果设计师小姐姐对 AE 动画不熟悉，也可以让她通过这样的方式，学习别人制作动画的过程。

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

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