动画输出新手向！使用BodyMovin和Lottie的避坑指南

阿炸炸

广州/UX设计师/7年前/45893浏览

版权

阿炸炸

适合第一次使用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时候的尺寸确定好动画尺寸。

🌟导出动画后

• 如何查看自己的动画效果是否完美输出？