这里我们以一个很简单的勋章动画为例。文件结构及效果如下图：
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 所需的核心内容。其中还有很多做动画控制所需的代码，当需要开发去控制动画播放，如播放次数、循环范围、交互触发等操作的时候，这里也有相关说明。
