课前准备

根据这次主题做出ui界面，然后将动效设计传到UI中国后，将其链接放到群文件中

点评后选出最佳作品发放价值200元奖品，希望大家认真对待每次练习

---------------------------------------------------------------------------------

活动时间
6月25号-7月1号下午5点

将会在5点把点评和下一期教程一起发出

有问题可以在群里讨论和交流，不懂也可以来要教程看看

高清播放视频地址

界面设计（上）：https://www.bilibili.com/video/av25234228

动效设计（下）：由于电脑重装，视频丢失，会附上AE源文件，另外建议尽量听直播

必须下载的素材

本文所需要的素材&源文件 网盘下载

一、确定所需要的操作

1、APP设计的注意事项
2、如何搜集灵感
3、设计App
3、切图后导入AE
4、制作动效

二、设计这个App

从这个界面开始不介绍标注啥的，但是会对其一些主要的细节进行介绍

这个教程的参考放上

首先确认这个小页面的一些规范

字体：Helvetica Neue LT Pro Black / Bold / Light
字号：标题40px 内容32px 其他24px
颜色：主字色#475266 辅助字色#acb3bf 主色调#61d5f4 - #58f2f4

针对界面的一些细节去介绍
首先是第一个界面

然后是第二个界面

三、开始制作AE


由于这次电脑重装系统原因，AE动效的教程丢失，所以会在这尽量用文字进行描述
首先将素材文件夹的切图放入AE中

1, 首先制作banner的切换动效

将2个banner放入AE排列好，分析动画的运动
首先第一个banner滑动走有位置，Y轴旋转，透明度的变化
位置从右到左
Y轴旋转从0度到20度，需要打开3D模式
透明度从100到0

变化前的数据

变化后的数据

接下来看第二张图的变化过程

第二张图的运动稍显复杂

首先位置从右到左
Y轴旋转从-20度到0度
透明度从0到100

在运动完成后会发现过于生硬，所以可以将其Y轴旋转继续运动 “5度 - 0度 - 3度 - 0度”，让其有个回弹效果

2, 接下来看列表页的运动

列表的上划涉及到的动效有以下几个动画
列表的位置从下往上运动
在运动的同时每个小卡片会有一个X轴旋转的动效
当运动到banner的时候，banner会翻转进行消失

难点解析：

首先是列表的运动，从下面滑动的动效很简单，但是需要注意第三排，由于后面的动画需要利用到第三个中的唱片，名字和封套，所以我们需要将其单独处理，但是我们需要做X轴旋转，不能将第三排的4个组件单独进行处理，需要让唱片，名字和封套跟随其基础的组件

运动到banner的时候，banner的X轴旋转的同时需要将位置往上挪动，就可以有向上翻转的效果，并且在翻转的时候需要将其透明度降低到0

3, 接下来是点击后切换到第二个页面的效果

首先是点击后的封套会Y轴旋转消失，然后是字和唱片会放大后挪动到相应位置，然后会加上水波动效，时间变化动效等

难点介绍

首先介绍水波的动效
可以创建一个矩形，修改其颜色，加上“效果 - 扭曲 - 波形变形”的动画，调整其参数即可完成水波动效

然后是时间的变化效果
可以复制粘贴文本

rate = 1;
clockStart = -4;
function minZero(n){ if (n function secZero(n){ if (n clockTime = Math.max(clockStart + rate* (time - inPoint),0);
t = Math.floor(clockTime);
min = Math.floor((t%3600)/60);
sec = Math.floor(t%60);
minZero(min) + ":" + secZero(sec)

需要注意的是clockStart 为其开始的时间

想要了解更多可查看以前的教程：http://www.ui.cn/detail/309118.html

最后再说一个歌词的动效

这里涉及到蒙版，需要复制2层文字，将上层的文字改成蓝色，后层文字改成灰色
然后将上层的文字用蒙版的变化去做歌词的动效

最终效果

上周点评地址：http://www.ui.cn/detail/369351.html

希望大家能一起进步

版权申明：本文为我的原创文章，如有转载请附上作者和链接哦~

也欢迎加入设计群， 一起交流设计