【App开发笔记】2.6 AI+AE做一个简单的loading动图

源码地址

所用软件
Adobe Illustrator CC 2015
Adobe After Effects CC 2015

2.6.1 先在AI中画出我们所需要的素材,保存成ai格式

① 先画一个杯子


【App开发笔记】2.6 AI+AE做一个简单的loading动图_第1张图片
画一个杯子

② 再画一段波浪


【App开发笔记】2.6 AI+AE做一个简单的loading动图_第2张图片
一段波浪

2.6.2 打开AE新建合成

宽度和高度设置300px即可,帧速率用25,持续时间2s

【App开发笔记】2.6 AI+AE做一个简单的loading动图_第3张图片
新建合成

【App开发笔记】2.6 AI+AE做一个简单的loading动图_第4张图片
合成参数

2.6.3 将刚才画的ai素材拖进素材库中,然后拖进合成中

快捷键:Ctrl+Alt+f,素材适应画布

【App开发笔记】2.6 AI+AE做一个简单的loading动图_第5张图片
拖进合成

2.6.4 在波浪图层上方用钢笔画一个杯子的形状图层

【App开发笔记】2.6 AI+AE做一个简单的loading动图_第6张图片
画一个杯子的形状

2.6.5 wave.ai图层的TrkMat选择Alpha 遮罩“形状图层1”

【App开发笔记】2.6 AI+AE做一个简单的loading动图_第7张图片
wave.ai图层的TrkMat选择Alpha 遮罩“形状图层1”

2.6.6 给wave.ai的位置添加关键帧

【App开发笔记】2.6 AI+AE做一个简单的loading动图_第8张图片
添加关键帧

2.6.7 空格键预览一下,调整一下波浪的大小

2.6.8 觉得可以就Ctrl+M 渲染

① 输出模块设置成,格式:PNG序列,通道:RGB+Alpha

【App开发笔记】2.6 AI+AE做一个简单的loading动图_第9张图片
输出模块设置

② 然后点击渲染
【App开发笔记】2.6 AI+AE做一个简单的loading动图_第10张图片
渲染

【App开发笔记】2.6 AI+AE做一个简单的loading动图_第11张图片
最终效果

你可能感兴趣的:(【App开发笔记】2.6 AI+AE做一个简单的loading动图)