Adobe After Effects简称“AE”是Adobe公司推出的一款图形视频处理软件,用于高端视频特效系统的专业特效合成。随着h5页面动效的越来越复杂以及h5效果视频化趋势,AE这款软件也渐渐成为了我们制作绚丽动效的必备神器。

那我们通过尝试制做简单手机天气动效,来了解AE的特效吧

天气

制作程序流程

1.工具:After EffectsPhotoshop
2.设计流程:After Effects 在一个合成中创建转场效果,另外一个合成中创建展示效果,导出到PS。
3.进行帧处理,优化导出GIF

接下来,我们开始一步一步开始吧

素材

1.伦敦背景图

伦敦背景图

2.手机透视效果模板

手机模板

基本构建

创建背景转场效果合成

步骤1

        打开AE,合成>新建合成(Cmd+N),尺寸为518*715,帧数29,持续6s
step1

步骤2

        导入伦敦背景图像,将图像丢入合成1,调整背景图像尺寸,使其适合画布
step2

步骤3

        创建3个蓝色框(用形状图层),这些蓝色框将从屏幕上方下落到屏幕底部,宽度172174172px(在AE中,尺寸特别不好确定,我们可以COM+R打开标尺去匹配),色值#063857#145071#416C8D。三个方框上方的方框宽度640px,输入相应文本。
step3

步骤4

        用钢笔勾勒出简单云朵和6片雪花空心圆(或者去找素材,这里的云朵,就是找的png图片)
step4

创建手机展示效果合成

步骤1

        创建合成2,尺寸1280 x 720帧数29,时间6s

步骤2

        导入iPhone背景,调整尺寸,增加背景层扩展。
step2

步骤3

        把合成1拖到合成2里面,选中合成1,在效果面板,选择效果>扭曲>边角定位,让合成1的4个角对上模板中屏幕的4个角,变成如下形式。
step3

以上基本的合成构建都已经做完了,那接下来,我们开始实现动效

动效制作

动效制作预想

  •   3个蓝色方框变长,不同时的落下,然后回弹缩小。
  •   透明框从底部往上移动,自始至终宽度不变。
  •   4个框抵达目的地后,文字开始出现,蓝色框文字是比例扩大+从不透明变透明,透明框中得文字是从不透明变透明。
  •   云朵图标,同时伴随雪花。
  •   Snowy文字出现。

动效实现

        在实现动效之前,我们先说说,AE里面如何实现动效,两种方案,一种是效果菜单下的效果动效,另一种就是AE对图层的变换处理包含:锚点、位置、缩放、旋转、不透明度,通过改变激活这几个按钮,改变图层的参数形成关键帧,从而形成动画。
动效实现

三个蓝色框特效

        打开背景合成,选中三个色块
特效
备注
        1.这里应用了位置和缩放,来实现动效。
        2.位置上,三个蓝色的框,通过缩放scale 0-100%,从上到下,不同延迟。

透明框

        透明框的运动,从下到上缓慢的位移。

底部文字

        1.三个蓝色框,当蓝色框触及到底部时,文字快速弹出,不透明度从0->100%,比例从0->100%
        2.透明框中的文字随透明框一起运动(位置设置可以参考透明框),但是,左侧的文字先到,右侧的-4度后到,注意时间轴中得设置。

云朵

        透明框的文本开始出现时,云朵出现,先是透明度从0-100%;而比例开始时是60%,当透明度到了100%时,从60%->100%

雪花小圆点

        当云朵动效完成后,雪花小圆点开始逐个出现。
        1.注意小圆点会错落的向右移动,然后弹回,注意运动顺序的调节
        2.注意小圆点逐个出现,因此透明度的变化要在时间轴上依次设置。
雪花小圆点

Snowy文字效果

        这里运用了蒙版运动,来打造Snowy文本逐渐出现的效果,注意Snowy不透明度也要变化(蒙版,通过图层点击右键添加蒙层,然后在蒙层中选择alpha蒙层)
文字效果

切换到合成手机导出效果

        AE文件可以导出多种形式文件,主菜单合成渲染(主要合成导出序列帧相关)和导出菜单(文件->创建->创建代理)就可以设置需要的格式,常见的格式有:

3GP        MP4        MP3        MOV        GIF        SWF        PNG序列帧图片

        这里呢,我做完动效后,是导出.mov文件,然后把.mov文件导入到psCOM+OPTION+SHIFT+S导出gif文件,效果如下(记得要选择循环播放额,不然只会播放一次)。
效果

到此,这个小例子我们就实现了,效果就是初始的GIF效果图,源文件下载 weather

最后,对比一下H5中AE视频动画、GIF动画、Canvas动画之间的差异

三者对比

这里将本例,分别用了3种形式做H5动画,AE动画效果(AE效果可能要注意一下,由于没有找到比较好的视频压缩工具,初始动画有点卡,循环播放是很流畅的)、Canvas动画效果GIF动画效果,看看三者之间的差异,二维码如下:
AE

备注:请在wifi的环境下体验,由于动画帧数比较多173帧,体验可能比较慢,请耐心等待
  • AE动画效果,动效整体还原度比较好,支持流媒体加载,但是AndroidIOS展现形式不一样;IOS支持格式比Android多,如.mov格式IOS可以隐藏播放器控制条,Android无法解决;初始效果与文件大小影响比较大。

  • Canvas动画效果,动画还原度无法达到GIFAE的效果,复合动画帧比较多,图片比较大,对做雪碧图影响较大,做出的动画会出现闪烁低端Android出现明显卡顿。

  • GIF动画效果,帧比较多,在部分低端Android表现卡顿,GIF格式图片,无法很好压缩。

小结

        AE制做动画特效的神器,还有很多很多好玩的特效等待我们去学习思考,以及结合到平时的工作中。在移动端h5开发中,经常会遇到比较复杂的交互特效帧比较多,可能很多时候大家会选择GIF,帧动画,Canvas动画来实现效果,可是往往做出来的动画展示效果,无法达到预想的效果,或多或少的导致设备卡顿,加载过慢等现象。在我们了解了这些之后,可以通过AE换一种尝试,做更有趣的动画效果。

学习资料:

videocopilot
newcger

感谢您的阅读,本文由 凹凸实验室 版权所有。如若转载,请注明出处:凹凸实验室(https://aotu.io/notes/2015/12/29/ae/