登录页面设计师做了很酷炫的动画效果，想到的三种实现方式：

1、导出GIF图给前端渲染

2、导出视频给前端渲染

3、导出动画的每一帧图片给前端序列合成动画

后来这三种方式因显示效果不好，体积大或者实现复杂等原因被否定了。

调研

经调研发现 Lottie是可应用于Android, iOS, Web和Windows的库，通过Bodymovin解析AE动画，并导出可在移动端和web端渲染动画的json文件。换言之，设计师用AE把动画效果做出来，再用Bodymovin导出相应地json文件给到前端，前端使用Lottie库就可以实现动画效果，如下图:

设计师安装与使用Bodymovin

1、关闭AE

2、下载并安装ZXP installer https://aescripts.com/learn/zxp-installer/

3、下载最新版bodymovin插件 lottie-web/build/extension/bodymovin.zxp at master · airbnb/lottie-web · GitHub

4、把下载好的bodymovin.zxp拖到ZXP installer

5、打开AE，在菜单首选项->常规中勾选☑️允许脚本写入文件和访问网络（否则输出JSON文件时会失败）

6、在AE中制作动画，打开菜单窗口->拓展->Bodymovin，勾选要输出的动画，并设置输出文件目录，点击render

打开输出目录会看到生成的JSON文件，若动画里导入了外部图片，则会在images中存放JSON中引用的图片

前端安装与使用lottie

1、安装依赖 npm install lottie-web

2、调用 lottie

<code>// 引入lottie

import lottie from 'lottie-web';

/*

*/

// 使用

this.animation = lottie.loadAnimation({

container: this.$refs.loginContent,

renderer: 'svg',

loop: true,

autoplay: true,

animationData: loginJson,

assetsPath: '/static/animation/login/',

});

loadAnimation参数

（renderer html的性能更好且支持3d图层）

调试

由于创建Lottie动画和平常制作AE动画有所不同，设计师和前端之间有个动画效果联调的过程，为了提高联调效率，设计师可先进行初步的效果预览，再把文件交付给前端。

预览方法

1、渲染前设置所要渲染的文件

2、勾选☑️Demo选项

在输出的文件目录中就可找到可预览的html文件

设计师注意事项

对设计师而言，创建Lottie动画和往常制作AE动画有所不同，此文档 (Lottie Docs) 记录了Bodymovin支持输出的AE功能列表，动画制作前需跟设计师沟通好，根据动画加载平台来确认可使用的AE功能。

除此之外，尽量遵循官方文档里对设计过程的指导和建议：

1、动画简单化。

创建动画时需时刻记着保持JSON文件的精简，比如尽可能地绑定父子关系，在相似的图层上复制相同的关键帧会增加额外的代码，尽量不使用占用空间最多的路径关键帧动画。诸如自动跟踪描绘、颤动之类的技术会使得JSON文件变得非常大且耗性能。

2、建立形状图层。

将AI、EPS、SVG和PDF等资源转换成形状图层否则无法在Lottie中正常使用，转换好后注意删除该资源以防被导出到JSON文件。

3、设置尺寸。

在AE中可设置合成尺寸为任意大小，但需确保导出时合成尺寸和资源尺寸大小保持一致。

4、不使用表达式和特效。

Lottie暂不支持。

5、注意遮罩尺寸。

若使用alpha遮罩，遮照的大小会对性能产生很大的影响。尽可能地把遮罩尺寸维持到最小。

6、动画调试。

若输出动画破损，通过每次导出特定图层来调试出哪些图层出了问题。然后在github中附上该图层文件提交问题，选择用其他方式重构该图层。

7、不使用混合模式和亮度蒙版。

8、不添加图层样式。

9、全屏动画。

设置比想要支持的最宽屏幕更宽的导出尺寸。

10、设置空白对象。

若使用空白对象，需确保勾选可见并设置透明度为0%否则不会被导出到JSON文件。