一篇文章帮你了解AE动画插件Lottie的前世今生（附避坑案例）

大好，我是彩。在画落地的过程中，配合Lottie插件输出JSON动画文件家常用的方法。今天这篇分享，将会讲到Lottie这插件怎么的，什么会叫Lottie？使用过程中哪些需注意的？具体又该如何确使用？如果对这里面的知识不熟悉，那这篇文章或许能帮到。

我最接手了一个项目，团队想要做一些态图标和logo。

除做用户验和UI设计之外，我还是一名动效设计师，我接受了AE和Lottie做画的挑战。

网页动画历史

在21世纪初，当flash还是页画之王时，每个设计师都在释放他们的创意。那时候上炫酷炸裂的随处可见，只要你了flash播放器，就可正浏览。中有些看起来更像游戏，当时还没有像现在这么多规范约束，做的都较随意。如果我们现在来分析它们，中很多可都没有符合户体验设计原则。

随着flash的消失，HTML成为使用标准以及用户验的规范化，网站消失。现在我们浏览的大数网站很容易使用，阅读验也很……但它们看来也很普通和相似。

在网页上落地一个动画所付出的努力和工作实在是高了，计做出的动画给开发，能实现的效果非常有限。除了成本高和繁琐外，从头开始用代码创建动画也会导致计稿相差甚远。直Lottie出现，才迎来了转机。

△ Lottie名字的由来

Lottie是怎么来的？

Hernan Torrisi在2015年提出了在AE中导出动画的想法，使用创建的一个叫Bodymovin的插件，能够导出JSON描述的动画。

他发布了史上第个支持该格渲染，并为浏览提供了个基于JS播放。

2017，Airbnb的程师看到了基于JSON的动画潜力，编写了可以渲染JSON文件的iOSAndroid库，他们称之「Lottie」。

Airbnb的开发者将作为一个开源平台，仅是为了免发布，是为了打一个社区。他们创建了一个github地址（https://github.com/lottiefiles）来与设计师和开发进行交流。这是一个与时俱进的好意，使得Lottie得到快速发展。

LottieFiles是什么？

LottieFiles（https://lottiefiles.com/）是一个独立于Airbnb的平台，设计师可在上面「上传，测试，购和载画」，而这些只需要你有一个免的账号。

LottieFiles同时也是一个AE的插件跟Bodymoving类似，只是功能更加富，允许我们「预览」动画，「上传到」LottieFiles平台，存到我们的电脑上，等等。

作为插件的候其实是比Bodymoving功能更为丰一些，但彩云实际测的候发现，可能会由于网络问题导致刷新预览不及的问题，这个大家可以在用的候留下。彩云给大家找了一个演示视频，一起吧。

如何入门？

首先，你需要安装好插件，可以装Bodymovin或者LottieFile（https://lottiefiles.com/plugins/after-effects）

项目的中间阶段，我太多时间去研究它，但我又希望能立马就用。所以，我觉得先按自己的法速试一遍，不去官网一条条的看明。我设了一简单的logo动画，这一拥螺旋桨的无人机，我从Ai导入AE，并用3D图层了一旋转动画。

△ Logo动画

当我准备导它时，AE给我弹了一堆错误信息。我发现并非有效果都被支持。直到今天，3D图层依然被支持。，在做之前，最好根据规范确认，哪些画可被支持，哪些支持。有时候，一些画在web端支持，但在iOS和Android上却被支持。

△ Lottie支持表

使用技巧及建议

为web创建画并像传统视频画那样，我们需要考虑几个我们从未考虑过的设置和格式项。

下面是Lottie的者给出的一建议

• 保持简单：JSON件应该尽可的简洁和保持小的体积
• 用AE的能力尽能的减少额外的关键帧，例使用子父级方式而不是在每一个上添加一遍关键帧
• 避免使用路径关键帧，因为它会创建一个非常大的文档，会从路径上转换所有的顶点
• 避免使用Wiggle表和自动追踪等技术，这些技术会生大量关键帧，做出这么大文件可能会使用JSON文件变常大，从而性能生大负影响。
• AE中需将任何Ai，EPS，SVG或PDF图层转换形状图层，否则会产错误。
• 导件时，1倍图导，图形上的每个像素都将转换成iOS和Android的点单位。这是Google汇总的DPS中的设备指标的「集合」 （https://material.io/resources/devices/），担心大打开页，彩贴心的为大制作好了这份对照表，末有获取方式。
• Lottie还不支持任何表达式或效果。
• 蒙版或者alpha蒙版应该尽可能的，它的大将响Lottie的性能，所以最好避免出现它或保持它最。
• 混合模，如叠加，屏幕，相加不支持。
• 图层样式，如投影，描都还不被支持
• 空图层可使，但为了它正工作，我们需要将可见打开，并将透明设置为0。

案例演示

接下来我将过个实案例，步步教大家如何使用Lottie.

导入图层，打合，选择所图层，右键单击，选择从矢图层创建形状。这将会创建出新的矢图层，不至于我们导出Lottie时给我们制造麻烦。

△ 转换图层

我们需要删除有AI件，只保留创建的矢量图层。

△ 矢量图层

我想为Logo做出3D的旋转动画，但因为它不支持，所以我不得不用传统的方式来模拟，我通在x轴上改变宽度来模拟3D旋转产生的变化。

△ X轴方向上的缩放动画

在得了想要的旋转动画以后，创建了一个空对象来移动整个Logo，并使其「起飞」和「降落」。在移动过程中使用了曲线，使得移动更加滑。

△ 空对象的位移路径

正如我们前写到：空象需要被转换为「可见」和「0%透明度」才能正常工作。

当我把动画调整到我的效果后，接下就用到了Lottie插件了。

△ 打Lottie插件

打开界面后，可查看画，上传lottie件和将它保存到电脑上。为了做到这一点，需要有一个Lottiefiles账号。（彩注：这一点来说，LottieFile插件会Bodymovin功要更全，LottieFile里面还供了大量的免模哦）。

△ Lottie 插件

总结

通过这种方式来创建画的方法是非令人兴奋的，因为它保持了很的质量，易于实现，并给我们创亮点的产供了条件。

因为我们是为页面打造的动画形式，而不是做一个动画视频，里面需要适应和理新媒，我们需要清楚能做什么以及是什么。

相在未来，将能够添加更多的性动画，但就目前而言，最好保持简。要记住一个计则，在多情况下，少即是多。

彩云补充

提lottie插件，就不得不提安装的问题。这彩云给大家安利一个方便实用的工，叫ExtensionManager，有mac和win版本，对于Adobe系列的软件插件，安装管理起来非常方便，直拖进去就OK了。

插件安装神器+尺寸对照表+Lottie安装包的文件，链: https://pan.baidu.com/s/1YWGsIoPQFGp86_Y3tV9ctw 提取码: ruig

备用下载链接：https://share.weiyun.com/rFevqmFM

欢迎关注译者的微信公众：「彩云译设