您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

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

原创文章 分类: 教程 版权:
17691 348 425 35
2018-05-13
127.2
首页推荐

课前准备


今天我们就来用AE做一个关于音乐App的动效,在设计这个动效文件的时候花了3个晚上的时间,然后花了5个小时写这篇教程,由于本文是图文描述,所以初学者在有些点上或许会碰到我没考虑到的问题


假如卡在一个地方可以进群或者私信我



必须下载的素材

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


插件下载

Particular粒子插件WIN下载  MAC下载



一、确定所需要做的动效


1、星空的动态背景

2、音谱波谱抖动的动效

3、环状的时间进度

4、时间的动效

5、整体界面设计


Image title




二、如何设置新的项目文件


让我们为我们的项目设置一个新的文档 (合成 > 新建合成) 使用以下设置:


宽度:750px;

高度:1334px;

帧速率:25帧/秒

背景颜色:#151422




三、插件Particular简介


”图层 - 新建 - 纯色“ 创建一个纯色层




当安装完插件后,选中“效果”中的RG Trapcode 里面的Particular即可打开粒子插件,可看到左侧效果控件的样式。

按下“空格键”即可浏览最初的粒子样式。





Particle部分主要功能翻译:


Particle (Master):   粒子(主要)

Life [sec]:    粒子存在时间(秒)

Life Random [%]:   粒子存在时间抖动(百分比)

Particle Type:    粒子种类

Sprite:     子画面

Sphere Feather:   粒子羽化

Texture:     结构

Layer:     图层

Time Sampling:   时间采样

Random Seed:    随机数

Number of Clips:   剪辑数

Subframe Sampline:   次帧采样

Rotation:     旋转

Aspect Ratio:    比例

Size:     大小

Size Random [%]:   大小抖动

Size over Life:    变化方式

Opacity:     透明度

Opacity Random [%]:  透明度抖动(百分比)

Opacity over Life:   透明属性变化

Set Color:    设置颜色

Color:     颜色

Color Random [%]:   颜色抖动(百分比)

Color over Life:   颜色属性变化

Blend Mode:    混合模式

Unmult:     插件

Blend Mode over Life:  混合模式变化

Glow:     粒子发光

Feather:     边缘羽化程度

Streaklet:     展示

Number of Streak:   展示数

Streak Size:    展示大小



四、如何设置星空背景


1、修改Particle的


life修改为:10 (是为了让粒子持续的时间更长点}

size修改为1.5(是为了让粒子的尺寸更小)

Opacity over life选择




可以让粒子不是特别密集,并且可以减弱一部分星光

Set Color打开Over Life则是为了可以设置颜色

打开Color Over Life设置渐变色#00B4FF —— #0000FF





2、修改Physics中AIR下面的Spherical Field


Strength:100px;

Radius:970px;(Strength和Radius类似,一个是扩散的力度还有个是扩散的范围)


调整完这一步后星光会非常弱,暂时不用管继续往下调整一部





3、最后一步


由于中间的星光太弱,所以将 Sphere Position的Positions改为 [960,540,0] 还有Emitter的Positions改为 [960,540,0]   可以将整体的坐标移到边缘




注意:前面6秒为粒子出现时间,所以可以点击时间轴将时间往前挪






五、如何设置音谱音波


音谱线条有内中外三条,外侧为音谱,中层为进度,内层为一条固定描边


1、首先下载一段音频放进项目中

直接随便下载一个音频文件(mp4等)拖入合成中




2、创建音波


再次”图层 - 新建 - 纯色“ 创建一个纯色层 , 打开“效果 - 生成 - 音频波谱”





选择左上角的音频层,将文件改成音乐文件




然后选择“效果 - 扭曲 - 极坐标”




将插值改为:100

转换类型改为:矩形到极线




3、最后一步


接下来修改音谱参数


起始点改为:0,400

结束点改为:750,400

结束频率改为:300

频段改为:80

厚度改为:5

柔和度改为:0

面选项改为:B面






六、如何设置环状时间进度


接下来创建中层进度以及内层描边

在此图层上右键 蒙版-新建蒙版,




并且点击左侧小箭头打开蒙版修改混合模式 相加改为无




点击蒙版路径中的形状,修改右侧和底部为330px

选中重置为椭圆点击确认



然后将蒙版路径放在音谱中间




选中蒙版 CTRL+D后即可复制一层,然后双击画板的圆形蒙版,Ctrl+Shift缩小复制出来的圆形蒙层

 


接下来打开“效果 - 生成 - 描边“




点击左上侧的描边修改路径为蒙版1(此蒙版为中层进度)

Ctrl+D后修改路径为蒙版2(此蒙版为内侧描边)


接下来修改描边参数


描边2:

画笔大小为:10px

画笔硬度为:100

可以滑动“起始”的数据,可以看到描边的变化,假如不会做动画建议观看之前发布的“AE动效基础”


描边:

画笔大小为:2px

画笔硬度为:100

不透明度改成20%






七、如何设置文本时间的动效


创建一个空文本图层




按住Alt点击源文件前面的时间图标粘贴下面的脚本即可创建一个可走动的时间




可在下方评论处复制代码


Image title


可以修改右侧字符的数据为24px,并且将字体改为Impact




Image title





八、将动效放进整体界面修改颜色


将切图放入ae中的项目,拖入合成中进行排版,如下图:




接下来会用音谱波形做一个调整颜色的示范:


调整颜色,加上质感

依次添加


“效果 - 生成 - 四色渐变”按喜好调整颜色(可调整体图层颜色)


“效果 - 生成 - 镜头光晕”调整混合度(可让整体图层有明暗度变化)


“效果 - 风格化 - 发光(可让整体图层更加明亮)




按照之前的步骤添加到




完成调整颜色后的效果





这个教程也是我现学现卖,希望大家能一起进步




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

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









微信公众号:jiaouiweb

UILEO

微信:hjj199394 交流群号码:519675228

11590粉丝/2关注

首页霸主诲人不倦人气明星砖家小有见解
教UI系列教程 - 粉尘文字动效教UI系列教程 - 炫光文字动效
3
文仔Daniel

把secZero改为minZero: rate=1; clockStart=0; function minZero(n){ if(n<10)return"0"+n else return""+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) + ":" + minZero(sec)

精彩!

UILEO

UILEO

微信:hjj199394 交流群号码:519675228

首页霸主诲人不倦人气明星砖家小有见解

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

UILEO

TA已经获得16枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

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

  • 经验

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

  • 活跃

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

  • 拓展

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

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