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

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

天气

制作程序流程

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

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

素材

1.伦敦背景图

伦敦背景图

2.手机透视效果模板

手机模板

基本构建

创建背景转场效果合成
步骤1

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

步骤2

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

步骤3

        创建3个蓝色框(用形状图层)，这些蓝色框将从屏幕上方下落到屏幕底部，宽度172、174、172px(在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文件导入到ps，COM+OPTION+SHIFT+S导出gif文件，效果如下（记得要选择循环播放额，不然只会播放一次）。
效果

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

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

三者对比

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

备注：请在wifi的环境下体验，由于动画帧数比较多173帧，体验可能比较慢，请耐心等待

  • AE动画效果，动效整体还原度比较好，支持流媒体加载，但是Android与IOS展现形式不一样；IOS支持格式比Android多，如.mov格式；IOS可以隐藏播放器控制条，Android无法解决；初始效果与文件大小影响比较大。

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

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

小结

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

学习资料：

videocopilot
newcger

Adobe After Effects AE AE movie
Web开发
感谢您的阅读，本文由 凹凸实验室 版权所有。如若转载，请注明出处：凹凸实验室（ https://aotu.io/notes/2015/12/29/ae/）
上次更新：2019-04-20 19:28:31