美文网首页玩转动效设计UI/交互设计规范
动效篇-AE之UI动效(流线粒子buling~buling~)

动效篇-AE之UI动效(流线粒子buling~buling~)

作者: redBlue_ | 来源:发表于2017-04-10 18:26 被阅读306次
fff.jpg

今天分享下粒子buling~buling~的制作方法!!!

最终效果如下

文中重要的插件和快捷键见片尾(有惊喜)~

流线粒子buling~buling教程

新建纯色,新建字体princess

钢笔工具分别勾勒出每个字母的路径,一个字母一个形状图层

复制一层p,把原始的p关掉


绘制出的新路径延长至如图


绘制形状

给蒙版路径key帧,在关键帧上粘贴路径


点掉关键帧


添加3D Storke效果(需安装Trapcode插件,链接见顶部),并调节Thickness属性


删除形状图层p2


Screen Capture on 2017-04-10 at 11-11-58.gif ![]

帧挫开越长,形状的尾巴越长


加缓动,调曲线


复制图层,下边一层改为浅蓝色,把start关键帧往后挫

同理,复制图层,改为粉色,把start关键帧往后挫,效果如下

S

绘制第二条流线,新建图层,钢笔绘制路径,添加3D Storke效果(需安装Trapcode插件,链接见顶部),并调节Thickness属性,start/end打关键帧开始为0 结束为100,start往后挫帧,复制图层修改颜色,start往后挫帧,效果如下

当流线滑过砸到字母i上面那个点时key帧,添加Motion v2插件中的EXCITE效果

效果如下


找到形状图层rn和图层p,添加修剪路径(不熟悉修建路径的点这里http://www.jianshu.com/p/5627ad55107f),当流线滑过笔划时让字母出现


效果如下

复制两层i,给修建路径key帧,挫帧,改色(基本同上)


在添加第三条流线,新建图层,钢笔绘制路径,添加3D Storke效果(需安装Trapcode插件,链接见顶部),并调节Thickness属性,start/end打关键帧开始为0 结束为100,start往后挫帧,复制图层修改颜色,start往后挫帧,效果如下

用第三条流线带出字母c,选择形状图层c添加修剪路径,需要调节偏移路径(符合动势)


效果如下


字母c闭合时做些小细节,用Motion v2中的BURST效果做水滴飞溅



效果空控件中用到的属性及参数



效果如下

字母ess制作方式大同,不再重复说明,下面来加一下粒子效果


复制图层白色纯色1,新建预合成命为粒子发射器,并点击3d按钮如图


新建绿色纯色图层,加粒子特效(需要安装插件)


调整粒子属性如图


图片.png

修改粒子数调整为80000



调整属性Velocity值为30
整体效果如下

空气阻力调整为1如下图

调节属性Size over Life


进入粒子发射器与合成修改粒子颜色为浅蓝色

调整Color Random(颜色随机)属性为20

给图层添加发光效果
![](http://upload-images.jianshu.io/upload_im ages/2666102-8eb7673e7c2a04ab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
调整发光效果数值如图

最终效果


UI动效常用插件下载与安装

Trapcode插件链接地址:
https://pan.baidu.com/s/1i4ZrhEd
https://pan.baidu.com/s/1c2AEQ9U motion 2插件链接
注册序列号:
Trapcode Tao 90509642123479776933
Trapcode Mir V2.1.2 85079585234586664989
Trapcode Particular V2.5.0 92608846345644048269
TrapCode Shine v2.0 92338513256767241817
TrapCode 3D Stroke v2.6.7 91588738256767692766
TrapCode Form v2.1.3 8446-8918-2345-6022-3856
TrapCode EchoSpace v1.1.6 91769344123491994523
TrapCode Horizon v1.1.7 87419480123494067600
TrapCode Lux v1.3.5 87689194123456089091
TrapCode Sound Keys v1.3.0 88419208123489637676
TrapCode StarGlow v1.7.0 86068670256777585702

UI动效常用快捷键(更新中)

enter重命名
Com+Shift+Alt+Y新建一个空物体层
Com+;显示/隐藏参考线
Com+Shift+Alt+;锁定/解锁参考线
Com+Y 新建固态层
Com+D复制图层
Com+Shift+Y 修改固态层属性
Shift+Com+【/】置顶/置底
Alt+[/] 裁剪时间线
J/K 向前/后一个关键帧
~最大化当前面板
Com+Shift+A 图层全部不选
Com+Shift+D把一个图层一分为二
B/N合成 开端/结束 时间
Com+M渲染合成
I/O移动时间线到层的入点/出点Ç
Com+Shift+C把选择层作为合成
U/W显示关键帧所在属性(被key),显示所有属性
+/- 时间轴单位(视觉)缩放
Com+Shift+R 旋转角度
</>缩小/放大视图
Alt+{/}向前后剪切
Com+N 新建合成
Com+M生成影片
Com+I 导入素材
G自由绘制蒙版
Q默认矩形

相关文章

  • 动效篇-AE之UI动效(流线粒子buling~buling~)

    今天分享下粒子buling~buling~的制作方法!!! 最终效果如下 文中重要的插件和快捷键见片尾(有惊喜)~...

  • 动效篇-AE之UI动效(小球duang~duang~)

    今天分享下小球duang~duang~的制作方法!!! (一)UI动效常用快捷键(更新中) enter重命名Com...

  • 动效篇-AE之UI动效(小球粘性融合)

    今天分享下粘性融合的制作方法!!! (一)UI动效常用快捷键(更新中) enter重命名Com+Shift+Alt...

  • 动效篇-AE之UI动效(水波荡漾)

    (一)UI动效常用快捷键 Com+Y 新建固态层Com+D复制图层Com+Shift+Y 修改固态层属性Shift...

  • UI动效学习阶段一

    这几天都有在学AE制作UI动效,今天用了半天装插件,真是快崩溃啊!

  • AE动效-科技感粒子地球

    前阵子在blibli看见一个地球粒子动效,全程英文,还是坚持做下来了,文件太大,用录屏工具出来不是很流畅,o(╯□...

  • UI动效

    分类: 衔接类动画:过度,自然 特效类动画:吸引注意力 PS将AE动画转换成gif的时候,ctrl+alt+shi...

  • UI动效

    1、挤压和拉伸 用来描述目标对象的刚性和质量,定义对象的物理属性。作用设计师你应该定义UI的属性:固定架构、刚性表...

  • UI动效

    动效软件 AE 动效软件的老大,功能强大,操作相对复杂,主要用于制作复杂的动画,简单的动画需求有其他更加容易上手的...

  • AE动效设计课堂笔记

    UI基础动效设计需要考虑的点: ①逻辑 ②空关系 ③层次感 ④架构 UI动效的三个特性: 功能性:动效对交互引导和...

网友评论

    本文标题:动效篇-AE之UI动效(流线粒子buling~buling~)

    本文链接:https://www.haomeiwen.com/subject/ferhattx.html