Lottie使用技巧

如何入门？

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

在项目的中间阶段，我没有太多时间去研究它，但我又希望能立马就用上。所以，我觉得先按自己的想法快速试一遍，而不是去官网一条条的看说明。我设计了一个简单的logo动画，这是一个拥有螺旋桨的无人机，我从Ai导入AE，并用3D图层做了一个旋转动画。

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

使用技巧及建议

为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。