AE制作加载动画旋转圆圈加载中loading动画

loading加载动画是手机app和网页web页面经常能看见的一种等待动画。只要一步一步按照笔者的步骤操作,你也一样能做出漂亮的加载动画,如下图所示:

工具/原料

电脑、Adobe After Effects、CorelDRAW(不限版本)、Adobe ImageReady CS2

方法/步骤

打开CorelDRAW软件(不限版本),新建一个文件,在空白处按住CTRL键画一个正圆圈。

选择弧形工具,调整至垂直中心点对其,然后按F2键调出轮廓笔,设置好喜欢的颜色、设置线的厚度、角、线条端头为圆头,最后点击确定按钮。

如图所示选择透明度工具,拉出线端一端的渐变透明度,再水平翻转复制图形。一定要仔细看这个步骤的最后一张图的操作步骤。

然后把刚才复制的反向图形垂直翻转,然后按CTRL+A全选图形,此时注意输入法,如果系统自动切换到了中文,要切换回英文输入法,然后按“E”键让图形水平对齐。

图形对齐之后,这个时候按CTRL+E导出PNG图片。选择好图片存放路径,设置好文件名,文件格式为PNG,点击导出按钮,过一会儿弹出“导出到PNG”对话框,点击确认按钮得到一个PNG透明背景图片。CorelDRAW软件可以关闭了

打开AE软件,把刚才导出的PNG图片直接拖进AE资源库,再从资源库里的PNG图片拖入图层,然后点开图层的两个三角形,一会儿要在这里操作。

舞台旁边空白处单击右键,点击“合成设置“,帧数率设置30,播放时长设置1秒,点击确定。再在图层的第一帧的旋转项点击小圆圈设置关键帧,然后鼠标点击最后一帧,此时在旋转项填写数值1(1代表顺时针旋转一圈,-1代表逆时针旋转一圈) 。这时按空格键可以预先看见动画效果。

按CTRL+M导出,在弹出的对话框中选好存放路径,新建一个文件夹,打开文件夹,点击保存。再点击”无损“弹出输出模块设置,选PNG格式,选择RGB+Alpha,设置好图片分辨率建议设置小一点,再点击确定,再点击渲染,最后得到动画图片序列。

打开Adobe ImageReady CS2软件,导入刚才输出的图片序列,点击4-up选项出现四个画面,建议选第四联,因为最终GIF文件体积不会太大便于传输。这个时候按住CTRL+SHIFT+AIL+S导出动画,设置好文件名和存放路径,点击保存,再点击OK并关闭Adobe ImageReady CS2软件。最后得到GIF动画。

AI助手