Lottie的避坑指南 | 写给设计师的Lottie使用技巧
你还在为动效实现烦恼么？看完这篇解决Lottie导出问题
写在前面
今天想跟大家聊下Lottie - 一个动画输出软件，其实介绍Lottie的文章已经很多了，但大多数是介绍lottie的原理、优势或开源库等等，这篇文章我想从一个设计师的角度出发，从如何安装使用，lottie在动画导出方面的边界以及如何解决这些问题，如何与工程师对接等方面聊下，你可以把它当作一篇Lottie的使用手册，提供给有需要的设计师同行们～
在开始之前，先简单了解下Lottie是什么：
那既然是篇类工具使用手册，我们就首先聊下安装及使用方法吧～
简单介绍下安装流程：
1. 安装动画制作工具Adobe After Effects
2. 安装插件bodymovin（推荐在Adobe官网上免费下载安装）
安装后就可以在AE中 窗口 > 扩展 > Bodymovin 中看到该插件了
1. 首先完成动画设计
2. 唤起Bodymovin的插件面板(窗口 > 扩展 > Bodymovin)选择要导出的合成，设置好导出文件位置，按下Render按钮，几秒钟后我们就会得到这样一个.json格式的文件，如果你在制作中使用了图片，还会输出一个包含所有图片的文件夹。
3. 检查：在给开发小哥哥之前，我们需要先预览一下，确保动画没有问题，再发送给开发。只需要打开预览网站将json文件拖入即可(需要注意下，这里预览的只是在web端实现的效果，如果想看在iOS或Android端的效果还需要下载对应的App，扫码预览)。
不得不说Lottie相比较其他的动画实现工具有着非常大的优势，比如可以满足很多种类的矢量动画和图片动画，占用内存非常小，为App节省很多空间等。但相对的也有它的边界，在使用之前了解它的局限，可以帮助我们规避掉很多的问题，避免在动画制作完成后因为实现问题做很多修改，甚至重新设计。
我想很多设计师在使用Lottie导出动画及实现的过程中，也一定遇到过很多问题，这章我将自己在使用过程中遇到的各种问题及解决方案汇总，分为前期、中期、后期进行整理描述，有需要的同学可以对应查找。
问：各种画图软件如何导入AE？
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
需注意的是同一效果在不同的平台例如iOS、Android、web端等并不是同时支持或不支持的，当我们制作的动画需要运用到多平台时，需要多平台进行预览检查。
问：可以使用表达式吗？
答：官方的支持列表中在一些平台是不支持表达式的
但有些表达式可以极大的减少工作量，也会使动画效果更顺滑，这里介绍一款AE插件Easy Bake，可以将表达式转化为关键帧，但使用此插件转化的关键帧会非常多，影响最终导出json文件的大小，我们需要删除多余的关键帧，尽可能节省内存空间。
问：如果动画中包含文字图层，导出时会报错怎么办？
答：需要先将文字转换成形状图层，方法：选中文字图层右键 > 创建 > 从文字创建形状。
▲ AE中文字转换成形状方法
问：使用Lottie导出后为什么图层变成了黑白的？
答：这其实是中英文AE版本的原因，如果使用英文版AE一般不会出现这种情况，但如果使用中文AE导出时一定会出现这个情况，这时需要我们将填充、渐变填充、描边、渐变描边效果的名称修改为英文，修改后就不会出现这种情况了。
▲ 中文版AE需要修改的效果名称
问：图形使用渐变色，实现时出现毛边怎么处理？
答：Lottie现在虽说支持了渐变效果，但在iOS端及Android端实现时仍会出现毛边情况，尤其是小尺寸的动画（例如icon）会非常明显，在支持雪球tab动画时，我们就遇到了这种问题（下图左侧），也尝试了很多的方式，比如替换成图片等都没有解决这个问题，绞尽脑汁想出一个取巧的小方法：在渐变填充外加一层纯色描边，可以解决这个问题（下图右侧）。
▲ 使用纯色描边解决Lottie实现渐变色出现毛边的问题
问：制作动画时可以使用图片吗？
▲ 用于iOS端的动画图片需重新命名
问：导出json后给开发小哥哥前还需要做什么？
答：需要将所有平台都预览一下，确保没有动画问题后再交付，包括web端、iOS端及Android端等。
这些就是目前我在使用lottie导出动画时遇到的问题及总结的一些解决方法，有一些是踩坑后在网上找到的方法，有些是不断尝试后得到的“笨办法”，如果有更好的解决方式或其他的一些小技巧欢迎留言补充～
希望这篇文章可以帮助到有需要的设计师们，我们下回见💙～
