今天主页菌带来一个扫描动效,写篇教程给对AE感兴趣的新手,一起来看看吧:首先是效果图

ae制作加载动画教程(AE教程扫描动画制作)(1)

上图是最终效果,接下来就让我们从头开始吧

ae制作加载动画教程(AE教程扫描动画制作)(2)

1.在PS里面完成绘图,包含背景、运动线、背景圆、圆盘、进度条和文字几部分(文字暂时隐藏)。

ae制作加载动画教程(AE教程扫描动画制作)(3)

上图是白色的运动线的参数,填充0%,使用渐变线做描边,将0%透明度指针拖到11%的位置,颜色使用白色

ae制作加载动画教程(AE教程扫描动画制作)(4)

需要特别说明的是背景圆是透明叠加的圆(不透明度20%),画出圆形后拖动锚点对它的形状进行适当修改,看起来也更自然叠加起来更有层次感。

接下来就可以打开AE做动效啦

ae制作加载动画教程(AE教程扫描动画制作)(5)

1.上图是AE界面,双击图片左上列表空白处,导入刚刚做好的PS文件(为了操作方便,我将psd按背景圆、进度条等分开存储并导入,如果你们有更好的方法欢迎交流)

ae制作加载动画教程(AE教程扫描动画制作)(6)

点击第三个图标,新建组件

ae制作加载动画教程(AE教程扫描动画制作)(7)

根据需要修改名字、尺寸、背景色就可以,点击确定

ae制作加载动画教程(AE教程扫描动画制作)(8)

3.现在可以将刚导入的psd文件依次拖动到右侧画板。

需要注意的是AE不能很准确的实现定位,所以就需要自己多点耐心调整。

图右中心的锚点在本次动效也很重要,所以将文件拖到画板后需要调整,按键盘Y键,鼠标状态改变就可以调整锚点到中心位置。

ae制作加载动画教程(AE教程扫描动画制作)(9)

如果不确定中心位置,可以在ps里面画两条十字线,因为AE可以跟导入的文件实现同步,所以保存psd,AE也会出现此图,这样就可以相对准确的调整锚点

ae制作加载动画教程(AE教程扫描动画制作)(10)

4.接下来就可以让它一步步动起来了。点击运动线,按R,出现旋转属性,在起点添加关键帧,2;15添加关键帧,设置如图中弹框就可以旋转一圈,在5秒的时候添加关键帧,设置Revolutions值为2。这样在时长5秒的动画中,运动线可以旋转2圈。

时间轴的指针指到5秒,按下N键,动画就会在这里结束。指针拖动到0,按下空格键就可以看到运动线旋转动效了~

ae制作加载动画教程(AE教程扫描动画制作)(11)

接下来是背景圆的旋转,方法跟运动线相同,调整好参数后,将居中的关键帧随意拖动改变位置,这样背景圆的旋转速度是不同的,动起来更生动灵活。按空格键预览一下效果吧

ae制作加载动画教程(AE教程扫描动画制作)(12)

现在来给进度条添加动效,首先点击图左空白区域保证没有选中任何图层,然后画一个矩形。点击左下角第二个图标,图层的纵向列表内容会增加轨道蒙版一栏,进度条的轨道蒙版如图,选择第三个,蒙版就做好了,最后将形状图层隐藏。

给进度条做一个2;15的旋转效果,因为进度条只有一半,所以复制一下刚才的方法完成另一半的动效

ae制作加载动画教程(AE教程扫描动画制作)(13)

因为是两个半圆拼起来的进度条,2;15之后右边的半圆会消失,所以2;15之后添加了一个静态的右边半圆(这是我想到的办法,可能有点笨。。。)

ae制作加载动画教程(AE教程扫描动画制作)(14)

起点的时候会出现这种情况,所以顶部三个形状图层是遮盖下面的那条竖线的,简单粗暴!

按下空格键预览全部效果吧~

ae制作加载动画教程(AE教程扫描动画制作)(15)

5.文件>导出>添加到渲染序列

ae制作加载动画教程(AE教程扫描动画制作)(16)

看第26个,点击动效03_6.mov可以改变保存地址,点击右上角Render按钮保存mov格式

ae制作加载动画教程(AE教程扫描动画制作)(17)

打开PS,文件>导入>视频帧到图层

ae制作加载动画教程(AE教程扫描动画制作)(18)

选择刚导出的mov后,如图点击确定

ae制作加载动画教程(AE教程扫描动画制作)(19)

选择窗口>时间轴,打开时间轴如上图,点击开始按钮就可以预览效果,只不过这里的明显要慢,只是看一下整体效果。接下来在图中添加扫描中等文字

ae制作加载动画教程(AE教程扫描动画制作)(20)

Cmd Alt Shift S保存,选gif格式,杂色、无仿色等可以根据需要选择,根据图左的显示效果调整就可以,循环选项选永远,这样打开就可以一直循环展示。点击存储就好了

,