点击此处返回

每日可免费学习1个教程

立即登录>

软件入门平面设计 3D数字 C4D教程 Blender教程短视频制作影视动画摄影艺术室内设计绘画插画海外教程电商教程产品精修办公职场编程开发考证·外语品牌设计综合教程 UI设计兴趣生活

详情图文教程训练营推荐

UI设计

AE-手机UI界面动效

4171人学过难度:中级拔高软件:AE(CS6)

评论(32) 收藏课程已收藏下载视频

关注人数：5376

【联想UXD高级动效设计师】负责联想人工智能设备全动效设计、APP交互动效设计、手机操作系统动效设计、宣传视频设计；关注用户体验，在动效设计，交互设计、影视后期等方面有丰富经验。定期发表动效专业类教程。

AE-App界面卡片切换动效

2.5万人已学

AE-交叉模糊简单动效制作

5.2万人已学

课程综合评分：9.2分

评论可是有底线的

本节教程练习

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帧处的三个长条的关键帧稍微向前【移动】，并在移动后的时间处【拖出】参考线至此处圆圈的上下边界。

登录后学习完整图文教程

虎课APP离线下载免流量

70000+教程，每天免费学一课

一键打开