承香墨影
最快捷的技术进阶之路
正文共: 1409字 10图
预计阅读时间: 4分钟
一、前言
Hi,大家好,我是承香墨影!
Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,用过都说好。完全解耦开发人员和设计师,让设计师设计的动画,在程序中无缝还原,真是一旦拿起绝不放下。
之前也写过两篇关于 Lottie 基础的文章,还不了解的可以先看看。
Lottie 虽然非常好用,但是从反馈上来看,还是碰到一些问题。在没有设计师配合的情况下,我们如何找到合适自己 App 风格的 Lottie 动画的 JSON 文件。
之前也介绍过,有一个 LottieFiles 的网站,其内提供了很多设计师上传的 Lottie 动画,并提供预览的效果,只要我们看中了,就可以下载下来使用,非常的方便。
https://www.lottiefiles.com
![](https://i-blog.csdnimg.cn/blog_migrate/a6d336e43d3b53db6d76342d1cca2d92.png)
虽然这个网站特别的方便,但是有时候找到的动画,并不符合我们 App 的风格或者我们的主观需要。
例如这个动画,如果我们想为圣诞做一个礼盒动画,找到这个动画觉得非常的合适,但是想将动画中黄色的丝带和星星,修改为红色。怎么办?难道只能依赖设计师小姐姐了吗?
二、编辑 Lottie 动画
2.1 Lottie-editor
最开始我认为动画中,使用到的颜色,应该是写在了 Lottie 动画的 JSON 中,但是实际你去阅读 JSON 文件的时候,是找不到类似 ARGB 或者其他的色值内容的,所以也没办法通过直接修改 JSON 文件,来达到修改动画的目的的。
不过不要紧,我们有工具可以修改它。
今天就再给大家推荐一个 Lottie 动画的编辑器:Lottie-editor。
它已经在 Github 上开源,有兴趣可以看看源码。
https://github.com/sonaye/lottie-editor
简单来说,Lottie-editor 为我们提供了编辑现成 Lottie JSON 文件的能力。它可以针对动画中,不同的颜色进行编辑,使用起来非常的简单。
将 JSON 文件拖拽进 Lottie-editor,左侧的每个色块,就对应了当前动画中的一个颜色区域,我们可以对其进行颜色的修改。一目了然,所见即所得。最终我们可以将我们修改好的动画 JSON 下载下来就可以直接使用了。
2.2 LottieFiles中编辑
LottieFiles 这个网站,考虑到快速编辑的问题,本身已经支持 Lottie-editor 去编辑动画了。
![](https://i-blog.csdnimg.cn/blog_migrate/c3bb6ff1d0a01557eae836127774c8dc.png)
我们只需要在动画的预览界面,点击右上角的 "Customize with Bodymovin Editor",即可直接对该动画进行编辑。
三、修改动画 AEP
LottieFiles 还提供了 AE 动画的源文件下载功能(部分支持),这样假如我们不仅仅是对动画的颜色不满意,还需要修改一些更多的细节。我们可以将 .aep
的文件一同下载下来,然后拜托设计师小姐姐帮忙修改一下。
注意,一个支持 AEP 文件下载的 Lottie 动画,都有其独特的标志。
![](https://i-blog.csdnimg.cn/blog_migrate/f2e547dd53032ca018f1fa1272fc9bd8.png)
拿到 AE 源文件之后,就可以根据自己的需要进行微调了。如果设计师小姐姐对 AE 动画不熟悉,也可以让她通过这样的方式,学习别人制作动画的过程。
好了,对于 Lottie 动画能自己编辑,就自己编辑吧,实在不行就抱好设计师小姐姐的大腿。????
今天在公众号后台回复成长『成长』,将会得到我整理的一些学习资料,也能回复『加群』,一起学习进步。
![](https://i-blog.csdnimg.cn/blog_migrate/74972f4d419bbeb1bc1e95bb54d5b69d.png)
推荐阅读:
![](https://i-blog.csdnimg.cn/blog_migrate/f3d38d7f7d684c552176f33b3f2c9b49.png)