AE动画还原神器Lottie+Bodymovin踩坑记Ⅰ

了解Lottie+Bodymovin参看上篇文章《设计师和程序员都应该了解的动画还原大杀器Lottie+Bodymovin》。

用Lottie提供Bodymovin插件导出AE动画，接触的项目多了，发现坑也越多，比如图层的渐变效果，进行预览后发现渐变都变成了黑白（渐变丢失），可是官方文档是支持该属性的啊？碰到这样的问题真的是一脸懵逼。又比如碰到预览动画里头的文字全部错位的情况，然后去找解决方案后就有豁然开朗的feel... ...

因为自己接触AE也是非常机缘巧合，但想到作为交互设计师能力的延伸，页面交互动画除了可以通过Principle设计，一些复杂的动画也可以通过AE来实现，而配合插件Bodymovin导出Json文件，即能够完美还原动画，又能够减轻开发量，总之好处多多。

从此也踏上了AE的不归路... ...下面将项目中碰到的一些问题记录下来，避免再次踩坑，同时方便自己和他人快速查阅并找到解决方案。

因为Lottie和Bodymovin由Airbnb开源团队维护与迭代更新，可能以前不支持的属性后面新版本就支持了，以前踩过的坑用新版本就解决了，而本文章不可能如此“与时俱进”，所以有些“坑”在后面来看可能已经解决了。

本文章适合对AE和Lottie+Bodymovin有了解的同学阅读。

问题目录

IOS和Android不兼容Json问题
如何直观知道该Json文件在IOS和Android上可用
如何解决Lottie中AE属性「渐变填充」预览问题
如何解决Lottie中AE属性「渐变描边」预览问题
Lottie预览文字错位问题

IOS和Android不兼容Json问题

IOS用最新版的Bodymovin导出的「Json+images」文件可以很好的适配苹果手机，安卓的话需要导出旧格式，所以最后会分别给IOS和Android开发工程师提供Json文件。

给IOS工程师的Json文件直接用最新版的Bodymovin导出就行，给Android工程师的话在设置里头勾选“Export old json format"，导出旧版本的json格式以便和Android系统兼容。

如何直观知道该Json文件在IOS和Android上可用

用Bodymovin导出Json文件之后，将其拖拽到https://lottiefiles.com/preview进行预览，同时该网页会生成一个二维码，不过在web端预览没问题不代表在手机端上预览是没问题的。

ps：导出只有Json文件，那直接拖拽Json文件即可；如果导出的是Json+images，那么就打成压缩包后拖拽即可。（注意如果带有images包，在网站上预览没问题，在手机客户端预览看到的是丢失图片的效果）。

苹果手机下载App「Lottie Preview」，打开应用扫描网页端预览生成的二维码，如果手机端预览没有问题的话表示该动画适配手机上没问题，安卓手机的话下载App「Lottie」，查看方式同苹果手机，不再进行赘述。

苹果手机可以直接在应用市场搜索名称进行下载，安卓手机如果在应用市场搜索不到的话可以参照下面的方式进行下载——

1、进到Lottie-Android（https://github.com/airbnb/lottie-android）的GitHub网址，点击release

2、查看对应的版本有无apk包下载，因为不是每一个版本都有对应的安装包，所以要耐心找一找，找到后发到手机安装即可。

如何解决Lottie中AE属性「渐变填充」预览问题

开篇有提过，我在查询官方支持AE属性列表中看到渐变是被Lottie和Bodymovin支持导出的。如下图：

但实际预览存在很大的问题，渐变将被处理为黑白渐变。如下图：

这似乎有点前后矛盾，后续查阅了一些资料，发现预览有问题的原因是我的AE是中文版的，其图层属性的命名也是默认中文的，如果把对应的图层属性名称由「渐变填充 1」修改为「Gradient Fill」就预览正常了。

正常的预览效果如下图所示。

如果有多个渐变的话，属性名称后面加上数字序号，比如「Gradient Fill 1」、「Gradient Fill 2」... ...即可。

如何解决Lottie中AE属性「渐变描边」预览问题

同理，将图层属性名称修改为了「Gradient Border」，若有多个渐变描边效果的话，则依次命名为「Gradient Border 1」、「Gradient Border 2」、「Gradient Border 3」... ...。

Lottie预览文字错位问题

直接在AE里头插入的字符内容，导出Json进行预览时发现其文字发生了错位。比如下图中的「Lottie」，在AE中是水平和垂直居中对齐。

但在Lottie Preview预览时，字符的位置和在AE中实际的位置有所偏差。如下图所示，字符的位置偏上了。

在AE中的将字符图层创建为形状图层后再导出Json文件可以解决（右键>创建>从文字创建形状），形状化后的文字显示效果正常。如下图所示：

若后续碰到更多问题将另启更新。

作者：辛小仲，一名正在成长的交互设计师。微信公众号：辛小仲。
本文由 @辛小仲原创发布于简书。未经许可，禁止转载。