登录页面设计师做了很酷炫的动画效果，想到的三种实现方式：
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
// 引入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参数
| 参数 | 释义 |
|---|---|
| container | 用于渲染动画的HTML元素，需确保在调用loadAnimation时该元素已存在 |
| renderer | 渲染器，可选值为’svg’（默认值）/‘canvas’/‘html’。 |
| loop | 默认值为true。可传递需要循环的特定次数 |
| autoplay | 自动播放 |
| path | JSON文件路径 |
| animationData | JSON数据，与path互斥 |
| name | 传递该参数后，可在之后通过lottie命令引用该动画实例 |
| rendererSettings | 可传递给renderer实例的特定设置，具体可看 |
（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文件。