前端页面自动渲染AE动画方案

发表于

前端页面自动渲染AE动画方案

在项目中，登录页面设计师做了很酷炫的动画效果，开始我们想到的三种实现方式：
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插件 https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp
4、把下载好的bodymovin.zxp拖到ZXP installer
5、打开AE，在菜单首选项->常规中勾选☑️允许脚本写入文件和访问网络（否则输出JSON文件时会失败）
6、在AE中制作动画，打开菜单窗口->拓展->Bodymovin，勾选要输出的动画，并设置输出文件目录，点击render
打开输出目录会看到生成的JSON文件，若动画里导入了外部图片，则会在images中存放JSON中引用的图片

前端安装与使用lottie

1、安装依赖 npm install lottie-web
2、调用 lottie

1
2
3
4
5
6
7
8
9
10
11
12
13
// 引入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动画有所不同，此文档 (https://airbnb.io/lottie/#/supported-features) 记录了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文件。

2020 - ©小耳朵