程序员也想改 Lottie 动画?是的!

时间:2024-08-27 00:03:26

程序员也想改 Lottie 动画?是的!

一、前言

Hi,大家好,我是承香墨影!

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

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

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

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

https://www.lottiefiles.com

程序员也想改 Lottie 动画?是的!

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

程序员也想改 Lottie 动画?是的!

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

二、编辑 Lottie 动画

2.1 Lottie-editor

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

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

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

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

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

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

程序员也想改 Lottie 动画?是的!

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

2.2 LottieFiles中编辑

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

程序员也想改 Lottie 动画?是的!

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

三、修改动画 AEP

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

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

程序员也想改 Lottie 动画?是的!

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

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