AE-手机UI界面动效

1、打开AE，【新建】合成，【合成名称】为“UI界面动效”，参数如图所示。

2、导入【令令的手机界面.PSD】，【导入种类】为合成，【图层选项】为可编辑的图层样式。

3、将手机界面的合成【拖入】到新建的合成之中，【双击】进入手机界面的合成中，显示标尺，【拖出】参考线经过几个圆的圆心，如图所示。

4、使用【向后平移（锚点）工具】将三个圆形图层的中心点分别移动至对应圆的圆心处。

5、【新建】三个形状图层，使用【矩形工具】分别绘制长条线，终点在每个圆圈的圆心处，颜色与对应圆圈相同，填充宽度比圆圈描边稍宽一点点，长度大约两个圆直径长，红色和蓝色长条在对应圆圈上方，黄色的在圆圈下方，如图所示。

6、使用【向后平移（锚点）工具】将三个矩形图层的中心点（是整个图层的中心点，而非矩形形状的中心点）分别移动至矩形和圆圈的交点处。

7、将三个矩形长条形状的图层【重命名】为“红条”“黄条”“蓝条”，【选中】这三个图层，按【P】打开位置属性，将时间指针移动至13帧的位置，【点击】码表建立关键帧。

8、将“电量条”和“标题”图层拖动到最上层，并【锁定】，防止误操作。

9、【移动】时间指针至0帧，为三个长条图层添加关键帧，并让红条和蓝条向上移动至画面外，黄条向下移动至画面外。

10、【移动】时间指针至13帧，【选中】三个圆圈的图层，按【S】显示缩放属性，将值调整为0%，建立关键帧，【移动】时间指针至1秒20帧处，添加关键帧，缩放属性值调整为100%。

11、【移动】时间指针至16帧，【选中】三个长条图层，按【S】显示缩放属性，值不变，建立关键帧，取消缩放轴向的关联，【移动】时间指针至1秒20帧处，添加关键帧，将Y轴缩放变为0%。

12、调整动画，将1秒20帧处的三个长条的关键帧稍微向前【移动】，并在移动后的时间处【拖出】参考线至此处圆圈的上下边界。

13、【移动】时间指针至13帧，将三个长条图层的中心点竖直移动至刚创建参考线处。

14、因为上步操作使路径产生了弯曲，使用【转换“顶点”工具】点击长条上的第二个锚点即可将路径变为直线，这样动画效果就是长条随着圆圈放大而消失，之后圆圈继续放大。

15、调整动画细节，【选中】长条图层的位置属性关键帧，按【F9】添加缓动，并将前面两个关键帧的速度曲线调整为如图所示。