[笔记]从AE动画到web代码

3,974 阅读5分钟

一、what AE动画是什么

Adobe After Effects简称“AE”是Adobe公司推出的一款图形视频处理软件,用于高端视频特效系统的专业特效合成。这一部分设计师会把AE动画准备好,给xx.aep的文件到前端,拿到这个aep文件前端就可以开始工作,在这个过程可以暂时不用了解设计师怎么制作出来,有兴趣自己捣鼓一下。

二、why 为什么要将AE动画转为web代码

我们知道CSS3 animation也很强大,可以很多动画效果,包括逐帧动画。为什么还要用AE动画呢?我想到的原因有这么几个:

  1. 设计师想要的动画效果复杂,想要的是如播放video视频那般绚烂的效果
  2. CSS3动画当要调整某个动作的时候需要设计师和前端一起调,CSS3动画是完整连续的时间段的动画,前面的动画时间改了,其他元素的动画时间要跟着修改,修改成本大。
  3. AE输出的动画,动画优美,设计师修改的时候,前端开发拿到aep文件后,再重新导出一次动画json即可。

曾经在做CSS3动画遇到这么一个问题,17年做《818财神送红包》的活动是使用CSS3动画做的,尝试了设计师要修改前面某一个的时间,导致后面每一个动画的开始时间都要调整,因为这个活动所有的活动都是在同一个时间轴上运行,第一个动画执行完成,紧接着执行第二个动画,按照时间顺序执行。

三、how 怎么将AE动画转为web代码

根据上面的图解,要把AE动画文件转成web代码,需要借助AE插件Bodymovin,和lottie动画库。bodymovin插件为我们导出AE动画的json文件,json文件包含了AE动画的各种路径变化,借助lottie用来在web上渲染动画

1. 为AE安装bodymovin插件

Bodymovin这个插件负责导出动画的json文件。 要使用bodymovin导出json文件,需要先安装这个插件,过程如下:

  1. 安装Adobe After Effects CC,我安装的是2018版,因为公司刚好这个版权有授权。
  2. 安装完AE后,安装bodymovin插件,下载插件地址传送门。在airbnb的github首页clone下来后,找到bodymovin.zxp这个文件。
  3. 使用ZXPInstaller这个软件来安装adobe插件。ZXPInstaller是一个简单的跨平台(osx/windows)的安装程序,适用于adobe第三方扩展(.zxp文件)。安装完ZXPInstaller后,选择步骤2中的zxp文件。
  4. 设置AE,在首选项设置允许脚本写入文件,看到这里bodymovin出来,恭喜你安装成功。

2.举个🌰,使用安装好的bodymovin导出AE动画的json文件

第一步:打开要导出json文件的aep文件 第二步:选择要导出的合成 第三步:设置导出参数

三步完成后,就看到导出的文件夹,会生成我们想要的三个文件。 data1s.json是关键的文件,demo.html相当于动画阅览,images是用到的素材。json文件在后面web页面中使用。

3.lottie-web

lottie动画库负责在web端播放动画。
举个🌰,使用lottie来播放刚才动画文件导出的json文件 在上一步已经导出了动画的json文件。接着我们在页面中使用。

第一步:
安装lottie-web,在页面import进来,并且把我们导出的json文件也引用进来。

npm install lottie-web
index.vue
import lottie from 'lottie-web';
import jsonData from '../data1.json';

第二步:通过loadAnimation方法加载动画

this.anim = lottie.loadAnimation({
          container: $div, // 挂载在某个容器下面
          renderer: 'svg',
          loop: false,
          autoplay: true,
          animationData: jsonData,//动画json
        }
);

此时打开页面就可以看到动画的效果了,上面导出的AE的动画如图:

四、小结

和设计师的沟通 json文件的处理

1.关于同一个动画,如何适配大小屏幕?

  • 方法一:设计师出两套尺寸的AE动画,前端读取屏幕大小,使用不同json文件来渲染动画。 在开发过程中,不同终端尺寸众多,长短不一,我们根绝iphoneX的尺寸作为分界线,设计师输出了两套不同尺寸的AE动画。判断标准是:屏幕w/h<0.47引用大屏设计稿的json,其他的引用小屏设计稿的json。

  • 方法二:AE设计稿,在页面顶部和底部留下可以被裁切的安全区域,这一部分的安全区域是可以被裁切也不影响设计的整体效果。保证了页面上面可以被裁切,这样我们在渲染时,获取屏幕大小,对当前的动画进行一个缩放,再配合CSS,把超出页面的部门overflow:hidden。

在实践过程中,最开始我们使用的是方法二,但是因为页面的内容多,被裁切的内容设计师表示不想被裁切,所以最后采用了方法一。

2.设计师输出AE后,怎么检查导出的json是否正常?

3.AE引用的素材库处理

五、在过程中遇到的坑

1、动画1过渡到动画2发生页面跳跃

六、附录

bodymovin导出参数的中文翻译