Lottie的避坑指南 | 写给设计师的Lottie使用技巧

今天想跟大家聊下Lottie – 一个动画输出软件，其实介绍Lottie的文章已经很多了，但大多数是介绍lottie的原理、优势或开源库等等，这篇文章我想从一个设计师的角度出发，从如何安装使用，lottie在动画导出方面的边界以及如何解决这些问题，如何与工程师对接等方面聊下，你可以把它当作一篇Lottie的使用手册，提供给有需要的设计师同行们～

在开始之前，先简单了解下Lottie是什么：

那既然是篇类工具使用手册，我们就首先聊下安装及使用方法吧～

01如何安装及使用

简单介绍下安装流程：

1. 安装动画制作工具Adobe After Effects
2. 安装插件bodymovin（推荐在Adobe官网上免费下载安装）

网址：https://exchange.adobe.com/creativecloud.details.12557.html

安装后就可以在AE中窗口 > 扩展 > Bodymovin 中看到该插件了

1. 首先完成动画设计

2. 唤起Bodymovin的插件面板(窗口 > 扩展 > Bodymovin)选择要导出的合成，设置好导出文件位置，按下Render按钮，几秒钟后我们就会得到这样一个.json格式的文件，如果你在制作中使用了图片，还会输出一个包含所有图片的文件夹。

要打开预览网站将json文件拖入即可(需要注意下，这里预览的只是在web端实现的效果，如果想看在iOS或Android端的效果还需要下载对应的App，扫码预览)。

预览地址：https://lottiefiles.com/

02 使用过程中常见的问题

不得不说Lottie相比较其他的动画实现工具有着非常大的优势，比如可以满足很多种类的矢量动画和图片动画，占用内存非常小，为App节省很多空间等。但相对的也有它的边界，在使用之前了解它的局限，可以帮助我们规避掉很多的问题，避免在动画制作完成后因为实现问题做很多修改，甚至重新设计。

我想很多设计师在使用Lottie导出动画及实现的过程中，也一定遇到过很多问题，这章我将自己在使用过程中遇到的各种问题及解决方案汇总，分为前期、中期、后期进行整理描述，有需要的同学可以对应查找。

问：各种画图软件如何导入AE？

答：在制作动画前，一般会在其他的制图软件中先完成静态图的设计，那不同格式的文件如何导入AE呢？这里介绍4种常用的画图软件：AI、PS、Sketch、Figma。

AI文件可直接拖入AE，但需先将图层分层，不要有嵌套

▲ AI文件导入AE需注意

AI文件在AE中转换成形状图层方法：右键 > 创建 > 从矢量图层创建形状

▲ AI文件导入AE后如何转成形状图层

Sketch及Figma文件可以借助AEUX插件导入，非常方便。

AEUX介绍及安装地址：https://aeux.io/

PS文件不建议使用，导入AE中相当于图片，目前还没有找到好的方法可以转换成形状图层，如果有同学有方法可以在评论中留言交流～

问：在AE中制作动画只能创建输出尺寸1:1大小的合成吗？

答：制作动画时可以按比例放大，例如要做 24*24pt 的icon，可以创建 n(24*24)pt 大小的合成，因为使用Lottie制作的动画是矢量的（除了需要使用的图片外），导出json文件的大小只与制作动画的关键帧或使用的效果有关，所以不必担心合成过大会使得导出文件过大。

之所以提到这个问题是因为见过很多同学使用1:1大小的合成制作类似icon的动画，在小尺寸的合成上制作，可能会因为尺寸小无法做出细致的动画从而影响最终的动画效果。

问：可以使用AE的哪些功能/效果制作动画？

答：常用的例如：旋转、缩放、位移等等都是支持的，有些图层样式例如：投影等是不支持的，具体可以参阅lottie官方给到的支持功能的列表：

网址：https://airbnb.io/lottie/#/supported-features

▲ Lottie支持功能/效果列表节选

需注意的是同一效果在不同的平台例如iOS、Android、web端等并不是同时支持或不支持的，当我们制作的动画需要运用到多平台时，需要多平台进行预览检查。

问：可以使用表达式吗？

答：官方的支持列表中在一些平台是不支持表达式的

但有些表达式可以极大的减少工作量，也会使动画效果更顺滑，这里介绍一款AE插件Easy Bake，可以将表达式转化为关键帧，但使用此插件转化的关键帧会非常多，影响最终导出json文件的大小，我们需要删除多余的关键帧，尽可能节省内存空间。

Easy Bake下载地址：https://www.cgzyw.com/wp-content/themes/begin/down.php?id=8780

问：如果动画中包含文字图层，导出时会报错怎么办？

答：需要先将文字转换成形状图层，方法：选中文字图层右键 > 创建 > 从文字创建形状。

▲ AE中文字转换成形状方法

问：使用Lottie导出后为什么图层变成了黑白的？

答：这其实是中英文AE版本的原因，如果使用英文版AE一般不会出现这种情况，但如果使用中文AE导出时一定会出现这个情况，这时需要我们将填充、渐变填充、描边、渐变描边效果的名称修改为英文，修改后就不会出现这种情况了。

▲ 中文版AE需要修改的效果名称

问：图形使用渐变色，实现时出现毛边怎么处理？

答：Lottie现在虽说支持了渐变效果，但在iOS端及Android端实现时仍会出现毛边情况，尤其是小尺寸的动画（例如icon）会非常明显，在支持雪球tab动画时，我们就遇到了这种问题（下图左侧），也尝试了很多的方式，比如替换成图片等都没有解决这个问题，绞尽脑汁想出一个取巧的小方法：在渐变填充外加一层纯色描边，可以解决这个问题（下图右侧）。

▲ 使用纯色描边解决Lottie实现渐变色出现毛边的问题

问：制作动画时可以使用图片吗？

答：可以使用，建议可以先压缩下图片，避免影响性能。

这里又出现一个容易踩坑的地方需要关注下：如果动画用于iOS端（web及Android端无影响），使用图片导出后，需要将图片重新命名，并且json文件中对应图片命名的代码也要进行修改。这是由于使用Bodymovin导出的图片每次都会命名为相同的“img_0″”img_1″…（即使设置了导出时使用图片原始命名），如果不加修改就直接用到iOS端，会出现调用之前动画相同命名图片的情况（做雪球“我的”下拉动画时曾出现过下拉拽出“太阳”的奇怪经历🤣）’

▲ 用于iOS端的动画图片需重新命名

问：导出json后给开发小哥哥前还需要做什么？答：需要将所有平台都预览一下，确保没有动画问题后再交付，包括web端、iOS端及Android端等。