zoukankan      html  css  js  c++  java
  • 如何制作音乐界面动效设计

    课前准备

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

    必须下载的素材

    本文所需要的素材 

    网盘下载:https://pan.baidu.com/s/1vLNAnalWpwing9whetI_vQ

    插件下载

    Particular粒子插件

    WIN下载:https://pan.baidu.com/s/1Jl_RHw1saRXpOF-Oj-EO8w%20target=#list/path=%2F  

    MAC下载:https://pan.baidu.com/s/1Z-zz3cFVCAo-ZYu2M5JVTw%20target=#list/path=%2F

    一、确定所需要做的动效

    1、星空的动态背景

    2、音谱波谱抖动的动效

    3、环状的时间进度

    4、时间的动效

    5、整体界面设计

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

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



    宽度: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点击源文件前面的时间图标粘贴下面的脚本即可创建一个可走动的时间







    可在下方评论处复制代码





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















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



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







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



    调整颜色,加上质感

    依次添加



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



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



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







    按照之前的步骤添加到







    完成调整颜色后的效果





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

  • 相关阅读:
    transition的属性变化
    transition过渡动画
    增删改查的45道题
    4月18 数据库的CRUD操作
    php 中输入输出提交
    4月12 php练习
    3月29 表单以及正则表达式
    3月27 隐藏导航
    3月26 document的练习
    3月25 JavaScript 练习题
  • 原文地址:https://www.cnblogs.com/leolei/p/9010035.html
Copyright © 2011-2022 走看看