AE教程:音乐界面动效设计

原创文章 分类: 教程 版权:
12458 265 371 21
2018-06-24
93.4
首页推荐


课前准备


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

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


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

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

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

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



高清播放视频地址


界面设计(上):https://www.bilibili.com/video/av25234228

动效设计(下):由于电脑重装,视频丢失,会附上AE源文件,另外建议尽量听直播


必须下载的素材

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



一、确定所需要的操作

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

Image title

Image title



二、设计这个App

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


这个教程的参考放上

Image title



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

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

Image title


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

Image title


然后是第二个界面

Image title



三、开始制作AE


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

Image title


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

Image title


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



变化前的数据

Image title


变化后的数据

Image title



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

第二张图的运动稍显复杂

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


Image title

Image title


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

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


Image title


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

难点解析:

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

Image title


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

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


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

Image title


难点介绍

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

Image title


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

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层文字,将上层的文字改成蓝色,后层文字改成灰色
然后将上层的文字用蒙版的变化去做歌词的动效
Image title


最终效果

Image title


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

希望大家能一起进步


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

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








微信公众号:jiaouiweb

UILEO

UILEO群号码:519675228

9612粉丝/2关注

首页霸主好为人师人气明星小有见解当仁不让lv.1
教UI系列教程 - 抽象光线动效教UI系列教程 - 三维粒子动效

UILEO

UILEO

UILEO群号码:519675228

首页霸主好为人师人气明星小有见解当仁不让lv.1

扫描二维码
去手机端查看海报

UILEO

TA已经获得12枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN