lotus新手入门教学（小白也能看懂的）

在互联网应用以及设备硬件性能不断发展的如今，动效的需求越来越大，越来越多的app开始出现更多的动效效果，而传统实现方式的缺点和局限性比较明显。如png序列需要多次请求，在web端访问下变得不实际，雪碧图文件又太大，且在不同屏幕分辨率下可能会失真，所以想达到更好的效果就需要开发直接把动画用代码写出来，而现在使用各平台的 native 代码实现一套复杂的动画是非常困难并且耗时的事，我们需要为不同的屏幕适配不同资源，还需要写大量过几天连自己都不认识的代码。在市场需求的推动下，Lottie 应运而生。

现在在很多互联网招聘信息里很多都写着要求会做 Lottie 动画，而找朋友要一份文件看看到底是什么，结果人家甩过来一个 JSON 文件，打开一看全是代码，一下脑子就大了。

那么，Lottie 到底是什么呢？其实，Lottie 只是一种库的名字（这里不做专业的解释，只是为了让设计师理解个大概）。这里就要先解释一下什么叫库，库可以理解为一种规则，打个比方，如果直接给你 0 0 0 这么三个数，那么你肯定一脸懵，那么如果在 0 0 0 前面加上 RGB 变成 RGB:(0,0,0)那么你就知道这是个黑色，如果前面加上 XYZ 变成 XYZ:(0,0,0) 那么你就知道这是原点。那么前面的 RGB 或者 XYZ 等这些，我们可以理解为是以何种规则去读这三个0，而这个规则会有无数种规则，将这些所有规则打包整理起来成一体，这个一体的东西就叫库。

曾经有一个叫 Hernan Torrisi 的人把他在 After Effects 中制作的动画导出成了一个后缀为 JSON 的数据文件，里面有一大堆代码，然后又制定了一套如何解读这套代码的库，这个库就取名叫 Lottie。那么可能有人会问导出的文件是 JSON 格式的为什么不直接叫 json 多方便，其实了解代码的人会知道，JSON 常规来说是一个很普通的存放数据的文件格式，我们可以简单举例为就是一个 TXT 文件，这个 TXT 里面什么文本都能放，我们不能说里面放了一段英文，以后就把所有英文都叫 TXT，这才是不合理的。

而之后人们就把这种调用 Lottie 库的一系列相关文件与操作简称为 Lottie。当你跟前端说这个用 Lottie 实现时，前端就知道你会给他一个 JSON 文件或者一个包含 JSON 和链接图片的 ZIP 包，而他也知道需要调用 Lottie 库来读这个文件。

Lottie动画是由 Adobe After Effects 制作，所以要保证自己电脑里有 After Effects 软件，这个的安装很简单，就不做过多赘述了。因为一般 BodyMovin 都是使用较高版本，所以建议 After Effects 软件版本也高一些，以免出现版本不匹配造成的bug。

打开 After Effects 后要先勾选上首选项中的“允许脚本写入文件和访问网络”，才能正常打开插件。这里以2020版本为例，依次选择菜单栏中：

Edit>Preferences>Scripting & Expressions>Allow Scripts to Write Files and Access Network编辑>首选项>脚本和表达式>允许脚本写入文件和访问网络

脚本是一系列的命令，它命令应用程序执行一系列操作。大多数 Adobe 应用程序中都使用脚本来自动执行重复性任务、复杂计算，甚至使用一些没有通过界面 UI 直接显露的功能。默认情况下，脚本都不被允许写入文件或通过网络收发通信，所以需要手动打开控制项。

导出 Lottie 文件需要将 After Effects 切换为英文版，如果使用中文版，LottieFiles 会找不到文件中的合成，而 BodyMovin 在虽然可以正常导出，但是很多情况下会出现很多bug，比如渐变色不识别，透明度不识别等，后期排查会很费时，所以一般情况下还是要先将 After Effects 切换为英文版之后再开始做素材导入、动画制作等操作。

Adobe After Effects cc2020中英文切换需要先在以下地址找到 application.xml 文件。

win： 默认安装地址——C:\Program Files\Adobe\Adobe After Effects 2020\Support Files\AMT 自定义安装地址——自定义地址\Adobe After Effects 2020\Support Files\AMTmac： Finder-前往文件夹：/资源库/Application Support/Adobe/After Effects/17.0/AMT/

找到文件后先复制到桌面，然后再打开，因为如果直接本地打开修改后是无法直接保存的。找到里面的语言类型并修改成需要的语言，zh_CN 为中文，en_US 为英文，保存后替换原始文件。修改完成后再次打开 After Effects 就会变成所设置的语言。

ZXP 格式的插件需要使用与之配套的 ZXP Installer 软件来为 After Effects 安装，网上有些科学版插件本身也是ZXP 格式的，只是别人经过科学处理之后可以直接放入 After Effects 相应的文件夹下就可正常使用，用这个软件依然可以很方便的进行管理。我们需要先安装好这个扩展管理器才能继续安装 Lottie 插件，包括要从 sketch 和 Figma 导入素材的时候也需要这个来安装插件。下载地址

Windows 系统下载好 ZXP 格式的插件后双击打开就可以自动唤起 ZXP Installer 并安装到电脑对应版本的 After Effects 中。Mac系统先手动打开 ZXP Installer 后将插件文件拖入界面内以安装。

XXX.psd 格式的文件是可以直接导入 After Effect 的。

1. 栅格化效果

为避免 Photoshop 中使用的效果 After Effect 无法完美识别，或 Lottie 资源库无法支持，建议导入前先将效果栅格化，过于复杂的效果不建议做动画。但是作为一个专业设计师，保持文件可再编辑性也是很重要的一件事，所以可以适当考虑将图层转换为智能对象（智能对象相关说明请移步Photoshop教程）以便再次修改。

2. 图层整理

Photoshop 制作的文件可能会有非常多的图层，每个图层导入 After Effect 的时候也会生成一个图层以进行动画制作，如果不加以整理就会导致 After Effect 中的图层过多，大幅增加动画的制作难度，所以应适当的减少或合并图层，也可以转换为智能对象，并建议不使用或少使用遮罩蒙版等效果，以免后期制作或输出的时候出现效果不支持或动画落地后 cpu 占用过大的问题。

3. 导入选项

XXX.ai 格式的文件导入 After Effect 与 psd 文件导入 After Effect 基本相同。

1. 整理效果

尽量将效果简化，这里举出几个常用的属性。

剪切蒙版：虽然简单的剪切蒙版属性可以被识别，但是如果内容较为复杂，矢量化后会出现其他属性，影响 Lottie 导出的稳定性，建议先用路径查找器把图形合并成基本形状，如果一定要保留或者后期要做动画变化，可以先拆解开，并分成不同图层，导入 After Effect 后再进行从新建立遮罩属性，但需要注意的是，再安卓系统下，因为安卓本身算法的问题，遮罩会非常消耗硬件性能，每一层元素遮罩后的消耗会成倍增加，所以建议避免使用遮罩效果，或将遮罩内的元素尽量减少，如拼成一张图片等。

投影、模糊、渐变：虽然 After Effect 中也有相关效果，但是算法并不相同，所以导入之后会出现错误，这里可以先将原始文件另存一份备份保留，删除相关属性后进行导入，然后参照原始文件的属性参数使用 After Effect 从新制作。

透明度：透明度属性在矢量化之后也会消失，所以需要参照原始文件在 After Effect 中从新制作，而在 After Effect 中透明度属性可以在三处调整，填充属性、形状组属性和图层属性，具体加在哪一层属性可以根据后期需要制作的动画效果进行调整。

虚线：可以导入并进行矢量化，但是会被拆分成多段，不易进行效果制作，建议同投影等相同，先取消效果，置入 After Effect 后在描边属性内加入虚线效果以制作。

外观： 带有外观属性的图层转换为矢量图层后会生成很多干扰数据，如果是想要以矢量图层做动画的元素尽量将外观属性去掉，转换为矢量后在 After Effect 再处理。

2. 拆分图层（图片素材文件来自网络）

相信很多人用 Illustrator 做设计的时候并没有太过于注重图层，很多时候都是在一层里就直接把设计做完了，这样的文件直接导入 After Effect 时也会只有一层，转换为矢量图形的时候也会把所有内容放到一层。这些内容在置入 After Effect 后想要拆分开会很难，所以在导入 After Effect 之前将图层拆分好就变得至关重要。

比如这张图，很多人用 Illustrator 做完设计之后图层内都只有一个图层，这时导入 After Effect 到的时候就会只有一层。而且，在转换为矢量形状之后，所有的形状也将会集合在一个大的形状图层中，这样非常不利于后期做动态效果。

我们需要先将需要独立出来的每一套元素整理好。然后在图层面板中选中上一级的图层，点击右上角的选项，选择“释放到图层（顺序）”，这时我们就可以把每一个元素拉到第一级的目录下了，同时原来的图层就变成了空白图层，可以删除了。将图层释放之后再根据需要将图层命名，再置入 After Effect 中就会是我们想要的独立元素的图层了。 Illustrator 的导入选项可参考 psd 相关导入选项。

3. 导入选项

Illustrator 的导入选项与 Photoshop 导入选项基本相同，可参考 psd 相关导入选项。

4. 素材矢量化

Illustrator 中的矢量图形都可以转换成 After Effect 中的矢量形状，而未被矢量化的图层将会以图片的形式进行导出。做动效之前优先将所有需要矢量化的图层转换成矢量路径，而不需要矢量化的图层保留，如不需要做动画的元素或Lottie不支持的效果，还有硬件性能消耗巨大的效果等。转化矢量路径也可以检验效果是否整理完善，如有些效果有遗漏或处理有问题，可以返回 Illustrator 中再次修改后，整个文件从新置入或单层重新加载素材来更新图层。这一步如果在做完动效之后再做或者做一部分效果转换一部分，重新加载素材的时候有可能会出现偏差。

sketch 和 figma 文件导入 After Effect 之前也要先整理效果与图层。将不支持的效果拼合成图片，比如角度渐变等。将复杂形状拼合成路径，包括四个圆角度数不相同的矩形，这些在 After Effect 中也是无法直接实现的。sketch 文件导入需要使用的插件早期叫做 Sketch2AE ，支持到 sketch 51 之前的版本，因为这个版本已经过于老旧，这里就不着重提及了。sketch 51 版本之后的插件改为 AEUX ，下载地址。无论是 sketch 还是 figma，当导入文件时出现报错或者再某个位置卡住等问题，优先检查插件是否有更新。

下载完成之后压缩包里面主要有三个套文件，一套 sketch 插件文件，一套 figma 插件文件，一套 After Effect 插件文件。

1. Adobe After Effects

无论是 sketch 还是 figma 文件想导入 After Effects 中，都需要在 After Effects 中安装 AEUX 插件作为接口来使用。直接使用 ZXP Installer 进行安装。打开 After Effects 后在工具栏找到：窗口>扩展>AEUX。就可以打开 AEUX 面板。之所以把 After Effects 放在前面，是因为需要现在 After Effects 中设置好需要导入的形式以及规则，之后在 sketch 和 figma 中点击 Send selection to Ae 就可以将所选元素按照设置好的规则导入。

小提示：倍数关系将会体现在形状组的缩放上，而并非直接体现在形状大小上，这样在做有些效果的时候计算变化量就会变得混乱。比如我们在一个 400 * 400 dp 的画板中创建一个 200 * 200 dp 的矩形，以3倍图导入后，矩形的大小依然是 200 * 200 px，但是矩形组的缩放变成了300%（实际显示像素为 600 * 600 px ），合成大小为 1200 * 1200 px，这样就会让整个效果制作过程变得异常复杂：矩形的大小变化量要在1倍图的系数下计算，哪怕同样是位移变化，形状的位移变化量要在1倍图下计算，组的位移和合成的位移变化量要在3倍图下计算。如果导入之前先将设计稿从逻辑像素转换为物理像素，也就是直接放大三倍，以1倍系数导入后，合成大小为 1200 * 1200 px，矩形的大小为 600 * 600 px，之后所有变化量都为物理像素变化量，计算系数就相对统一了。

Detect parametric shapes

如果选中的话会保留基本形状属性，如设计软件中的矩形导入后会以矩形形状保留，可以设定宽度、高度和圆角等属性。不选中的话会以路径形式导入，效果相当于将形状转换为贝塞尔曲线路径。但这里要注意的是并不是所有属性都是可以置入 After Effects 中的，比如不同的圆角角度等，这些效果 After Effects 是不支持的，所以想还原视觉稿就需要以路径形式导入。

Precomp groups

如果不勾选此项，会将组创建为不可见的参考线图层，作为组内元素的父级一起导入。勾选此项，导入时会自动为组创建预合成。

Precomp

将导入组时生成的参考线图层和组内元组合成预合成。先选中导入组时生成的参考线图层，然后点击 Precomp 就会将组自动整合成预合成。

Un-precomp

将导入组时生成的预合成拆分成参考线图层和独立元素。

Toggle guide layer visibility

隐藏或显示参考线图层。导入组时生成的参考线图层大小与组的大小相同，并覆盖在组内元素上层，在显示参考线图层的时候点击组内元素会优先选择参考线图层，可以方便的移动或控制整体组的元素。而隐藏参考线图层的时候点击就会直接选择到组内元素，方面制作细节动画。

Delete guide layers

如果不需要组生成的参考线图层，点击后会全部删除。

2. sketch

aeux.sketchplugin 就是 sketch 的插件安装包，和其他 sketch 插件一样双击就可自动安装。在工具栏中找到：插件>AEUX>Open panel 就可以打开 AEUX 的控制面板。sketch 上的 AEUX 的面板主要有三个选项，其中位于下方两个选项主要在做导入准备时使用。

Send selection to Ae - 将所选内容导入 After Effect

先选中元素，点击之后就会自动导入 After Effect。可以是画板中的其中某一个或几个元素，也可以是整个画板，也可以是图片。如果需要导入的是图片，则会弹出弹窗，需要选择一个图片的保存地点用来置入 After Effect，切为了避免图片命名导致图片被导出时覆盖，图片将自动编成乱码以作区分。个人不太喜欢这种乱码的命名格式，所以习惯手动导出图片后再手动置入 After Effect 中，或者手动导出一套命名后的图片，然后去 After Effect 中手动原位替换素材。这样的好处是在制作的过程中觉得某张图片需要微调，在不需要调整图片大小的情况下，可以直接覆盖原始素材而不影响 After Effect 中已制作好的动画，如果是乱码的话覆盖素材的时候会不方便。

Flatten shapes - 合并形状

过于复杂的布尔运算会加大 After Effect 的计算量，也会使动画制作变得更加复杂，所以在导入 After Effect 之前应先将路径合并掉。此选项可以将所有选择的形状一键合并，不需要每一个单独合并操作一遍。

Detach symbols - 分离组件

复杂的组件在导入 After Effect 中因为逻辑并不相同可能会出现错误，所以在导入之前应先将组件分离。此选项可以将所有选择的组件一键解除，不需要每一个单独解除操作一遍。

3.Figma

该插件尚未在 figma.com/plugins 上发布，因此安装过程要复杂一些。右键单击画布，然后找到：Plugins>Development>New Plugin…

在弹出的页面中点击虚线区域中的 click to choose a manifest.json file，然后选择安装包中 AEUX Figma 文件夹下的 manifest.json 文件就可以安装上了。

安装好之后右键单击画布，然后找到：Plugins>Development>AEUX 就可以调用

制作的时候要注意选择Lottie文件支持的效果制作，如果超出支持范围，则需要试用其他方式处理，比如将效果整合成图片或者序列帧等。

这里我们以一个很简单的勋章动画为例。文件结构及效果如下图：

BodyMovin 是最原始也是我们最常用导出动画的插件，项目中使用的 JSON 文件大多都是用这个插件导出的。下载后用 ZXP Installer 进行安装。

打开 After Effects 后，从 窗口>扩展>bodymovin 打开插件面板。

设置相关内容较多，这里就不放图片了，下面逐项说明一下设置选项，也方便大家使用网页搜索快速查找自己所需要查看的内容。

· Glyphs - 字形

导出时将字体转换为形状，可以避免出现字体错误等问题。如果不勾选的话文字将会以文本形式再代码中保留，开发可以根据需要修改文本内容，如本样例中 LEVEL 和 50 两组文字，如果以保留文本形式导出，开发可以将 50 换成任意其他级别。但如果不需要开发从代码控制文字显示内容建议勾选此项。

· Bundle Fonts - 包含字体（Glyphs未勾选时可选）

导出时附带有字体文件，只有在前端使用Skottie播放器时可以用。

· Inline Fonts - 内嵌字体（Bundle Fonts勾选时可选）

在json文件中内嵌字体，不需要做外部链接，使用起来会比链接形式方便，也可以减少网络文件请求次数，缺点就是会增加json文件的大小，增加载入时间。

· Hidden - 隐藏图层

选择后会导出隐藏图层。虽然文件内会包含隐藏图层，但默认状态下依然是不可见的状态，可以由代码控制是否显示。

· Guides - 参考线图层

选择后会导出参考线图层。

· Extra Comps - 额外合成

选择是否表达式指向额外合成。如果所用表达式指向的合成并不在渲染树内，则需要勾选以免无法找到表达式数据，反之如果表达式所指向的合成本身就在渲染树内，则无需勾选。

Assets - 资源

· Original Asset Names - 原始资源名称

导出带有原始项目名称的资源。如果不勾选的话会变成默认名称（如img_X），建议有公共资源的时候，比如几个文件共用一个图片素材包的时候，或者后期要对图片进行替换等情况下勾选上，以免之后替换图片造成名称混乱。需要注意的是，资源名称是指的在素材箱中的原资源名称，而并非合成中图层的名称，且不可是中文名，如果有重复的资源名称，系统会自动给资源名增加数字后缀，所以要避免图片名称重复否则如果不注意的话后期替换素材的时候会有极高可能性替换错误。如果是通过 AEUX 导入的图片的话，图片素材都会被默认命名为一串乱码，如果不加以整理的话也会将这串乱码导出，所以要提前整理好名称。

· Copy Original Assets - 复制原始资源

使用 After Effect 调用的源文件。不选择此项下方会出现压缩图片的选项。如不选择此项 After Effect 将导出未经压缩的图片作为之后 Lottie 素材使用，这样会增加图片大小，极端情况下一张照片会放大8倍。如果选择此项则会直接将调用的原文件复制到图片包内，图片保持原始大小不变。如果使用外链图片的方式则可以不勾选此项，并在最终交付开发的时候将图片压缩以减小文件大小。如果将图片打包到 JSON 文件内部则需要先将图片压缩好，并勾选此项以免导出时增加文件大小。

注：Photoshop 文件和 Illustrator 文件如果以AI图层的形式导入 After Effect，导出时候将不会识别AI图层，导致整个原始文件被复制。

· Enable compression - 启用压缩

设置图像层的压缩比(0-100)。未勾选 Copy Original Assets 时候出现此项。选择后会自动将图片压缩，但因为压缩的不可控性个人并不建议使用此选项来进行压缩，导出后手动压缩导出的图片，或导出前手动压缩原始链接图片并勾选上一项 Copy Original Assets，这样整体文件大小可预知。

· Include in json - 包含在 json 中

将图像素材栅格化并包含在 JSON 中。这样导出会只有一个文件，减少开发的工作量，且在一定程度上可以减少bug的出现率，但是相对的文件大小会增加，且无法对图片进行二次修改替换等操作。因为是内部的图片信息，所以无法做到多个 JSON 文件公用一套图片素材包。

· Skip images export - 跳过图像导出

自上次导出以来没有更改，则可以选择此项，不会从新导出图片，减少文件导出时间。

· Include video and audio assets - 包含视频和音频资产

这还没有得到播放器的支持。仅供实验使用。

Export Modes - 导出模式· Standard - 标准

导出动画 JSON 文件。

· Split - 拆分

拆分不会将单个图层拆分为多个文件。

简单来说，此选项将会把主合成拆分成以 X 秒为单位的小段 JSON 文件，但无法拆分图层，如一段图层跨过了两段区域，这两段区域则会合并成一段。

· Demo - 演示文件

导出一个 html 的网页文件用来提供本地预览。此选项在以链接形式导出时预览比较好用。

JSON 导出后常用验证方式：

1. BodyMovin 内预览。上面界面介绍的时候已经讲过如何使用。但是如果在使用外链图片的 JSON 文件，预览时候会显示图片丢失。

2. 导出 Demo 演示文件。可以直接用浏览器打开播放，缺点就是只能正常播放，不能做任何操作，如变换速度，拖动进度条，修改循环模式，更改背景颜色等

3. 网站预览：网址。如果只有 JSON 文件直接将文件拖入网页进行预览，如果是外链图片的模式则将所有文件打包成一个 ZIP 文件整体上传后就可以预览，在网站预览可以调整播放速度、更改循环模式、更改背景颜色、分享链接、再次编辑、转换为 gif 等操作。

· Report - 报告

导出动画报告。

· Rive - Rive 动画

导出Rive，一种方便在Flutter中集成的格式，或者可以直接导入Rive的格式，可以添加Rive提供的其他功能。Rive的官方网站

· Standalone - 独立文件

将播放器和动画导出在一个 JS 文件中，方便 web 端调用。

· Banner

为Banner使用，导出一组文件。可以导出 JSON 相关文件、JS 文件、HTML 文件等，具体需要以何种形式导出建议先与研发沟通确认。此种导出形式主要针对web端。

· Lottie Library Origin - 调用Lottie库

选择以何种形式加载 Lottie 库。

· Lottie Renderer - Lottie渲染方式

选择以何种形式渲染 Lottie 动画。

· Set Click tag value - 设置点击标签值

点击后返回的信息，可以是需要跳转的网页地址等。

· Use composition size - 使用合成大小

选择后默认以合成大小输出，如未选可以重新设置需要导出的大小。

· Zip Files - 压缩文件

选择后会将文件夹自动打包成一个 ZIP 文件，可以直接甩给开发。

· Inline animation data in template - 在模板中内联动画数据

选择后会将动画数据文件集成在 HTML 文件之中，本地打开可以直接预览效果。

· Loop - 循环

选中后动画会无限循环播放。

· Loop Count - 循环次数

未选中 Loop 时出现，可以直接设定重复多少次后停止。0为播放1次重复0次，共播1次；1为播放1次重复1次，共播2词。以此类推。

· AVD - Android AVD

导出一个可以在 Android 系统的 Drawable 直接使用的xml文件。使用 Android 原生动画可以减少系统资源占用，达到性能最大化，但 Android xml 下能够支持的动画效果更加有限，所以除非熟悉 xml 否则不建议使用。

Expression options - 表达式选项

这个选项下的内容都是表达式相关的导出设置。Lottie对于表达式的支持并不是十分完善，所以在制作过程中也不太建议使用表达式。

· Convert expressions to keyframes - 将表达式转换为关键帧

此选项将合成中的表达式转换为关键帧输出，会显著增加文件大小。

· Extend conversion beyond work area - 转换拓展工作范围之外的关键帧

当你需要转换工作区以外的关键帧时使用。比如时间重映射。

· Remove expression properties (Reduces filesize) - 删除表达式属性(减少文件大小)

删除仅用于表达式的属性。如果你的动画没有使用表达式或者你的表达式没有使用特殊的属性可以选中此选项 。

Advanced export settings - 高级导出设置

· Export old json format (for backwards compatibility) - 导出旧的json格式(为了向后兼容)

如果使用的是老版的库文件，则需要勾选上。在项目中建议先跟开发确定库的版本，如果是已有的库，优先跟开发商量是否能更新，如果无法更新，则勾选上此项以导入后报错无法播放。如果之前没有库一定要让开发使用最新版本的库且导出时不勾选此项。如果未来库版本过低可能会达到无法兼容的地步，可能会到需要降 bodymovin 插件版本的地步，bodymovin 版本过低还可能会需要降 After Effects 版本。

· Trim unused keyframes and layers - 修剪未使用的关键帧和层

工作区外的图层和关键帧将不会被导出，可以减少文件大小，但是后期如果需要修改的代码的时候也将会没有这些信息。

· Skip default properties (Reduces filesize) - 跳过默认属性(减少文件大小)

如果没有使用最新的ios、Android或网页播放器则不要勾选此项，导出前先与开发确认。如果不确定的话不建议勾选此项，以免报错无法播放。

· Include non supported properties - 包含不支持的属性

那些Lottie不支持的属性也将会被导出，当这些属性有需要被导出以后期开发需要调用或为了给其他播放器使用的时候可以选择此项以将这些属性导出。

· Pretty print JSON - 导出格式话后的JSON

如果不勾选的话所有的代码将会放在一行，人工不易解读，勾选此项之后导出的代码会自动换行以及缩进，方便人工读取修改，但是文件会变得非常大，不适于最终输出。其实在代码编辑软件都会有格式化的插件，所以此项其实并不是达到目标的唯一选择。

Audio Settings - 音频设置

· Enabled - 启用

选择后会处理音频层并将它们导出为 mp3 文件。

· Rasterize Waveforms - 栅格化波形

将 mp3 以代码形式置入 JSON 文件中，而不是独立的 mp3 文件（不选中时只能在 Skottie 播放器中使用）。

· Audio quality - 音频质量

选择音频的导出质量。

LottieFiles 与 BodyMovin 是由内部两个不同团队开发的，两款插件的侧重点各有不同，但基本功能都可以实现。LottieFiles 主要供 Lottie 爱好者在社区创建与上传动画用，工作项目中并不经常用到。利用 LottieFiles 插件可以很方便的将自己所做的动画上传至云端账户，方便他人浏览与下载。而在这个插件中，也可以很方便的看到每一帧渲染所消耗的硬件性能。下载地址

下载后用 ZXP Installer 进行安装。打开 After Effects 后，从：窗口>扩展>LottieFiles 打开插件面板。

登录后就可以看到 LottieFiles 的功能面板了。

点击设置后等待一段时间，会跳入设置面板，由于 LottieFiles 主要针对的是社区相关的层面，所以更倾向于信息发布相关维度，相对于 BodyMovin 来说可以设置的内容就少了很多。在里面可以设置作者、描述与关键词等相关信息，方面在社区内交流。

点击导出后等待一段时间渲染完成后可以看到动画效果。LottieFiles 的预览方式就很单一，导出完后可以看到动画运行效果，上传到个人社区之后可以在网页中查看动画效果以及链接等。

总的来说，LottieFiles 暂时还不是对接开发的主流插件，如果是 Lottie 动画的爱好者或者平时做些练习可以上传到社区供大家观看及使用，运气好的话还会得到一些打赏，在国外有些设计师使用你的作品时会主动联系并支付一定的费用的。

常用Lottie的人一定经常被各种 bug 所支配，那么遇到 bug 应该怎么解决呢，这里跟大家说一说大致的思路。

1. 软件语言

为了减少 bug，After Effects 软件一定要用英文版。大家应该都清楚，在代码中出现的中文都只是前端显示内容，而在代码语言中是不可以有中午的，所以要尽量避免不必要的中文，就要使用英文版软甲。那么有人会想最终做完效果之后再切换成英文版导出是不是可以，答案是否定的。从最开始导入的时候就要把软件切换成英文版。在形状图层内的很多属性都是可以自定义名称的，比如矩形、矩形路径、填充、描边、渐变填充等，这些属性在导入时或创建时就会带有一个对应的默认名称，而在切换英文的时候这些名称不会被切换为英文，在导出时出现bug就要手动将所有相关属性改名为英文，这一步数量会非常庞大。而在手动改名的过程中，有朋友曾经跟我反映过要注意英文拼写，有时候 Gradient 拼错了都会导致导出错误。

2. 确认效果

有时候使用的一些效果最终导出的时候并没有显示出来，所以就以为是出现了bug，这种时候就要再次确认一下效果列表，看看所使用的效果是否确定是可以被支持的。如果效果不支持就需要考虑用其他方式实现，比如拼合成位图等。

3. 保存、清理缓存、重启、换系统

这一 part 可能就比较玄学了。如果工程文件从新建到最终导出从来没有存储过，也就是说其实整个文件数据都在内存中，没有一个本地文件，或者文件有过修改，也是有可能在导出时出现 bug 的，所以在最后导出之前先保存一下文件，也可以避免一些错误。有时候也需要清理一下缓存，工具栏中找到：编辑 - 清理，这里面各种缓存也好内存也好，能清的全部清空吧。再有就是重启了，如果平时工作中经常跟开发聊天，他们会告诉你，遇事不决先重启。很多时候重启都可以解决大部分问题。那么首先就是重启软件了，比如我在做 demo 的时候经常出现上次导出没问题，这次导出就卡住不动了，重启一下软件就好了，如果不行，就重启电脑。再有就是换系统，用 Windows 导出如果总是有问题找不到原因，可以尝试一下换 mac 系统，反过来也一样，在之前我做某个项目的时候透明渐变用 Windows 总是导不出来，之后换成 mac 系统很顺利的就导出来了。

4. 升级库/兼容性导出

有时候我们本地观看没有问题，但是给到开发就会出现报错，这种时候先问开发用的什么版本的库，如果开发使用的库版本过低，而导出插件版本过高容易导致运行报错，让开发升级库就能解决大部分问题。如果开发处于某些原因无法升级库（虽然大多数都是在找借口），那么就要在导出的时候勾选上 Export old json format (for backwards compatibility) - 导出旧的json格式(为了向后兼容) 以兼容早期版本的库文件。

5. 针对性调整

有些时候我们导出的文件并没有什么问题，本地预览也没有什么问题，但是用到应用内某些地方就出现了问题，这种时候就要针对出问题的部分做单独处理，因为每个问题都不尽相同，所以无法给出一种通用的解决办法。比如以前某个项目中使用的一套动画文件，在网页、iOS、Android手机端验证都未发现问题，但是用在车机系统中就出现了错位问题，看过实际效果后发现是套嵌的预合成内的元素锚点属性丢失，最终不使用预合成直接在主合成中制作后不再出现问题。类似于这种就需要单独看问题出在哪然后去处理了。

也许大部分人都会认为自己只是个设计，没必要去考虑代码的事，但我人为，设计师的存在是为了解决问题的，设计做的再好，无法落地就不是在解决问题，而是在生产问题。这里说的 code 并不是真的要自己去写代码，而是要知道用什么逻辑去实现。

Lottie 在现阶段并不是一个大众化的格式，不像png序列一样几乎所有开发都会写，所以当我们告诉开发要使用 Lottie 实现的时候开发可能连 Lottie 是什么都不知道。这时候我们就要把这个开发文档的网址给到开发：这个网址 里有调用 Lottie 所需的核心内容。其中还有很多做动画控制所需的代码，当需要开发去控制动画播放，如播放次数、循环范围、交互触发等操作的时候，这里也有相关说明。

总的来说，Lottie 毕竟还是一个新的动画格式，虽然目前支持的效果有限，使用起来磕磕绊绊（bug多），但依然不能阻挡它流行起来的趋势。现在越来越多的互联网公司开始使用 Lottie 进行落地，毕竟他的优势还是显而易见的，跨平台、开发成本低、效果还原度高等。相信在不久的未来，Lottie 所能支持的效果会越来越多，bug 会越来越少。

,