#A   Lottie是谁？

Lottie是一个iOS、Android和Reaction本地库，可以实时呈现效果动画，并允许本地应用程序像使用静态资产一样轻松地使用动画。

AE 动画直接变原生代码：Airbnb 发布开源动画库 Lottie

Lottie使用动画数据作为JSON文件从一个名为Bodymovin（一个奇妙的插件）。这个扩展与一个JavaScript播放器捆绑在一起，它可以在Web上呈现动画。

Bodymovin是一个AE的插件，它可以把动画直接输出成代码，直接给程序员使用放在各个终端上使用。

而Lottie则是这一整个产品（服务：把动画转成代码）的名称。而bodymovin的版本等于输出的json文件版本。

Lottie官网：https://lottiefiles.com/

#B  为什么用Lottie？

例：在接触过的app项目中，实现动画效果现有几种实现方式：

Lottie优点分析

#E  Lottie在AE设计使用规范

01   Lottie目前对AE效果的支持

关键帧插值

· 线性插值

· 贝塞尔插值

· 保持插值

· 罗芙时间

· 空间贝塞尔

基础属性变换

· 矛点

· 位置

· 大小

· 旋转

· 透明度

蒙层mask

· 路径蒙层

· 透明度蒙层

· 多重蒙层 (additive, subtractive and intersection)

跟踪遮罩

· Alpha Matte

· 父子集

· 多重父子集

· Nulls

形状图层

· 锚点

· 位置

· 大小

· 旋转

· 透明度

· 路径

· 组变换(Anchor point, position, scale etc)

· 矩形 (All properties)

· 椭圆 (All properties)

· 组内多个路径

· 奇偶蜿蜒路径

· 反向填充

描边 (形状图层)

· 描边颜色

· 描边透明度

· 描边粗细

· 线条的头（圆or方）

· 虚线(支持动画)

填充 (形状图层)

· 填充颜色

· 填充透明度

路径裁剪 (形状图层）

· 路径裁剪起点

· 路径裁剪终点

· Offset

中继器

· 中继器变换

· 不支持offset

渐变

· 线性渐变

· 径向渐变

星星与多边形

· 圆角大于100会有bug

图层功能

· 预合成

· 图像图层

· 形状图层

· 空图层

· 固态图层

· 父子图层

· Alpha Matte

目前不支持的效果

· 合并形状

· 透明度倒置蒙层

· Trim Shapes Individually feature of Trim Paths

· 表达式

· 3d图层

· 时间重映射 / 图层反转

· 图层混合模式

· 图层效果

02  bodymovin插件版本规范

bodymovin插件的版本必须大于等于55。

目前锁定版本输出的data.json的版本号(5.5.9)：

lottie-web的npm包版本号(5.5.9)：

03  其它规范

#尽量在AE里进行绘制并制作动画，这样可以有效减少输出文件资源大小。

# lottie对AE的动画效果支持是有限的，遇到有些lottie无法支持的效果时，可以直接使用图片资源，但切记控制数量和大小，避免用逐帧的方式去实现动画。

具体的使用步骤请看保姆教程，只要有手就能学【用Lottie让动效输出更高效】https://www.zcool.com.cn/work/ZNDIyODY2NTY=.html