动画输出新手向！使用BodyMovin和Lottie的避坑指南
适合第一次使用bodymovin和Lottie输出动画的设计师，列了一下各个流程下来可能遇到的坑，希望帮到大家。
前段时间公司打算弄新产品，然后动画方面也从用flash制作改成了用ae。AE的动画输出使用airbnb开发的一个插件——bodymovin，把动画转成json文件（就是代码啦）给程序就ojbk了。
然而，问题来了！
网上虽然有很多教程，但是还是会有奇奇怪怪的坑，这篇文章就主要分享一下遇到的坑。毕竟具体使用时遇到很多问题网上也没有答案，所以就纯粹分享一下那些坑，希望可以帮到各位。
🌟小背景
• 什么是bodymovin？
bodymovin是一个AE的插件，它可以把动画直接输出成代码，直接给程序员使用放在各个终端上使用。然后你可以在github上面找到最新版本的bodymovin使用。而Lottie则是这一整个产品（服务：把动画转成代码）的名称。而bodymovin的版本等于输出的json文件版本。
🌍Lottie官网：https://lottiefiles.com/
• 怎样使用bodymovin？
找到适合自己的bodymovin版本，使用一个名为「ZXP installer」的软件去安装就ojbk了，「ZXP installer」的下载链接我也会奉上。具体要怎么使用，网络上面很多使用教程，大家可以上网查，这里我也放几个大神的文章，我也是跟着上面的步骤做的。
🌍ZXP installer: https://aescripts.com/learn/zxp-installer
🌍使用bodymovin参考1: https://zhuanlan.zhihu.com/p/26304609
🌍使用bodymovin参考2: http://sjnk88.com/design/32.html
好的，那么下面我就说说我遇过的坑吧。
🌟开始的开始，使用前需要确认的事情
• 请确认好你们使用的bodymovin版和两个客户端不同的版本
并不是最新版就一定适用，这个是个误区。因为是多端协同工作的，可能bodymovin这里有5.5.6的最新版本，但并不代表安卓端可以调配并使用到最新版本的json文件，所以使用之前，一定要先确认好设计师和客户端可以使用的版本。下面贴上我自己最后找到的版本确认作为例子给大家参考。那么在哪里可以找到并测试适合自己的版本呢？接下来也会和大家说明。
• 如何找到适合的bodymovin插件版本？
AE使用的bodymovin的各个版本可以在github上面找到。具体各个版本的下载，只需要下载对应的压缩包，然后解压后找到你要的对应的bodymovin插件即可。
🌍bodymovin插件下载：https://github.com/airbnb/lottie-web/releases
• 程序怎么找到适合自己的版本？
其实这个具体我也不清楚，但我们自己程序那边都是看他们的GitHub相关信息啦，相信程序猿们总有办法。这里奉上他们对应的github网址。
🌍安卓：https://github.com/airbnb/lottie-android
🌍iOS：https://github.com/airbnb/lottie-ios
• 怎么测试版本之间的兼容？
大原则：一个版本的bodymovin输出的json文件可以在两个客户端app上运行，并且它的动画和设计效果是一样的，就代表它们兼容。
测试的时候，你需要准备iOS和安卓两个不同机型的手机，然后分别下载他们对应的软件即可。iOS的叫「Lottie preview」，安卓的叫「Lottie」。若最终手机上看到的效果是和自己原效果一样，那就代表这个动画生成的json文件可以在这些版本的客户端上使用。因为手机可以看到，就代表当前客户端app的版本可以编译到这个版本的json文件。
如果高版本的bodymovin输出的json文件客户端app运行不到，那就试试低一点的版本吧。
• 怎么下载较早之前的iOS/安卓Lottie app？
当我们遇到官方发布在应用市场的app版本并不适合我们动画json文件的版本，我们怎么样找到之前的app包测试使用呢？答案还是上github上面找。因为iOS第一次测试最新版本就完美匹配版本了lol，所以我就没怎么查过。这里奉上找安卓app包的方法：
1. 找到Lottie-Android的GitHub网址，点击release
🌍：https://github.com/airbnb/lottie-android
2.查看对应的版本有无apk包下载
• 怎么查看当前的这个json文件版本是多少？
再次强调一下～json文件的版本等于bodymovin的版本。那么如果你当前只有一个json文件而你不知道它是什么版本，那怎么查看呢？很简单，使用代码编辑器打开它，你就知道它的版本是多少了。如果你电脑没有安装任何代码编辑器，使用笔记本打开方式也可以查看到。
🌟作图前
• 认真观看官方文档，bodymovin并不支持所有动画特效的输出
试用之前大佬和我说先试试我们常规做法的动画有什么是bodymovin输出不了的。然后我把我们自己做动画常用的渐变、描边、透明度、模糊这几个都尝试了一遍。结果发现插件最后的导出支持只有两个。所以，使用bodymovin前，一定要先试一下你的效果能否实现。而且一定要看官网写的特效支持文档！看清楚不同终端它支持的效果是否一样！
🌍bodymovin支持导出效果：http://airbnb.io/lottie/#/supported-features
• bodymovin不支持AE表达式输出
其实这个和第二点说的是一样的，而且官方那个文档也说了。只不过因为这个很重要，所以务必提醒大家不要踩坑～如果要做抖动的效果还是自己乖乖K帧吧。如果是做循环效果的话就交给程序吧！因为转化成json文件之后，程序有更大的发挥空间。（循环、改颜色等程序都可以帮到你）如果是要和程序员沟通的话，强烈建议不同客户端都看一下文档。抛个网站给你们，到时候给你们的客户端各取所需吧。
🌍文档官网：http://airbnb.io/lottie/#/
• 检查测试一下特别的图片特效是否支持
这里说的图片特效是指你在sketch或者ai里面画的图片是否可以支持导出，图片导出后是否会出现错位的效果。这一步很重要，如果你没有搞清楚自己常用的特效能否支持就急急忙忙开始弄了，这样以后浪费的时间更多。下面贴上我大佬叫我确认的东西，大家可以参考一下。（此处照例膜拜大佬）。
🌟创作动画前
• 使用AE里面的「从矢量图层创建形状」，使动画素材可代码化
动画的图片我们一般都是使用sketch或者AI画好以后再导进去AE。但是最好的解决方案把图片重新在AE里面重新绘制。而在AE里面重新绘制就需要用到「从矢量图层创建形状」这个了。因为设计师把图片“画”进AE之后，连图片包都不需要了，直接一个动画一段代码就完成了。这样就省去很多沟通时间和解决适配的问题了。这里提供两个方法给大家。
1. sketch导出svg格式后转成.ai文件
第一种方法比较复杂，但不会踩雷。其实就是把切图转成ai格式导进去ae再创建形状。可是这样处理后导入AE，形状可以保留更多编辑。具体步骤如下：
1.sketch里面把切图导出svg格式
2.svg转成.ai格式导进去AE
3.使用AE的「从矢量图层创建形状」重新绘制
2. 使用「AEUX」插件
这个对于比较简单的图形还是支持导出的。但是遇到相对应复杂的图形，例如使用了布尔运算绘制的图形，就会有一些效果缺失等奇奇怪怪的问题，所以各位还是看看哪个对你们方便了。下面会奉上插件链接下载和教程网址。
🌍：https://oursketch.com/plugin/aeux
• 切图之前请确定好@1x的尺寸时的动画大小
因为是矢量动画，程序可以自动根据不同机型去做适配。所以就要养好一些设计习惯，确定好素材之后，把动画@1x时候的尺寸确定好动画尺寸。
🌟导出动画后
• 如何查看自己的动画效果是否完美输出？
当你把动画导出一个json文件之后，你可以把自己的json文件放到LottieFiles上面查看效果。进去后下载了Lottie的客户端后直接扫码就可以看到自己动画在手机上的效果，超方便的！
给
🌍LottieFiles：https://lottiefiles.com/
• 提高动画通过率的小tips
你以为这个网站只能丢一个json文件上去吗？把含有图片和json文件的压缩包丢上去，它也可以跑起来，只不过你在网站上可以看到那些图片文件，但在扫描二维码后再客户端上就看不到图片了。这个方法最适合交货给PM和老板的时候给他们看了，越高保真越容易提高通过率嘛～
希望上面的总结可以防止设计师踩坑加班。如果还有问题欢迎留言，看看我能不能帮大家解决。
