玩转动效设计UI/交互设计规范

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

2017-04-10  本文已影响306人  redBlue_
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默认矩形

上一篇下一篇

猜你喜欢

热点阅读