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

动效篇-AE之UI动效(水波荡漾)_第1张图片
klkl.jpg

(一)UI动效常用快捷键

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默认矩形

(二)UI动效常用插件

1插件安装

把插件安装到ScriptUI Panels文件夹下就可以在窗口菜单下找到插件入口,点击激活插件

图片.png
动效篇-AE之UI动效(水波荡漾)_第2张图片
图片.png
动效篇-AE之UI动效(水波荡漾)_第3张图片

2插件使用

讲讲讲

轴心点都是一一对应的 ,我们在做动画时可以很方便的通过工具来调节元素的轴心点


动效篇-AE之UI动效(水波荡漾)_第4张图片

缓动调节工具

动效篇-AE之UI动效(水波荡漾)_第5张图片
图片.png

1缓入----开始很柔和
2缓出----结束很柔和
3缓入➕出---开始和结束很柔和

动效篇-AE之UI动效(水波荡漾)_第6张图片
Screen Capture on 2017-03-29 at 16-24-10.gif
动效篇-AE之UI动效(水波荡漾)_第7张图片
Screen Capture on 2017-03-29 at 16-36-15.gif

(三)小动效(水倒入容器loading)

1新建一个白色纯色图层 Com+Y 新建固态层

动效篇-AE之UI动效(水波荡漾)_第8张图片
图片.png

复制一层Com+D复制图层,改为蓝色Com+Shift+Y

图片.png

给蓝色图层添加置换图效果

动效篇-AE之UI动效(水波荡漾)_第9张图片
图片.png

把水平置换调节为0

动效篇-AE之UI动效(水波荡漾)_第10张图片
图片.png

把蓝色图层新建预合成Com+Shift+C

动效篇-AE之UI动效(水波荡漾)_第11张图片
图片.png

在预合成中新建一个灰色层

动效篇-AE之UI动效(水波荡漾)_第12张图片
图片.png

给灰色层添加一个无线电波效果

动效篇-AE之UI动效(水波荡漾)_第13张图片
图片.png

无线电波效果设置


动效篇-AE之UI动效(水波荡漾)_第14张图片
图片.png
动效篇-AE之UI动效(水波荡漾)_第15张图片
图片.png
动效篇-AE之UI动效(水波荡漾)_第16张图片
图片.png

把灰色图层新建预合成Com+Shift+C

动效篇-AE之UI动效(水波荡漾)_第17张图片
图片.png

模糊效果设置


图片.png

用蓝色层置换水波那一层,并调节置换强度

动效篇-AE之UI动效(水波荡漾)_第18张图片
图片.png

新建一个形状图层

动效篇-AE之UI动效(水波荡漾)_第19张图片
图片.png
动效篇-AE之UI动效(水波荡漾)_第20张图片
图片.png

用圆形做个遮罩

动效篇-AE之UI动效(水波荡漾)_第21张图片
图片.png
动效篇-AE之UI动效(水波荡漾)_第22张图片
Screen Capture on 2017-03-29 at 15-23-14.gif

复制这两层(形状图层和与合成)

动效篇-AE之UI动效(水波荡漾)_第23张图片
图片.png

给最下面与合成填充个颜色,然后调整位移


动效篇-AE之UI动效(水波荡漾)_第24张图片
图片.png
动效篇-AE之UI动效(水波荡漾)_第25张图片
Screen Capture on 2017-03-29 at 15-30-37.gif

把这两个预合成做父子链接


动效篇-AE之UI动效(水波荡漾)_第26张图片
图片.png

调整下边预合成的位移


图片.png

把穿帮的地方key透明度一帧切


动效篇-AE之UI动效(水波荡漾)_第27张图片
图片.png
图片.png
动效篇-AE之UI动效(水波荡漾)_第28张图片
Screen Capture on 2017-03-29 at 15-42-20.gif

钢笔工具建路径


动效篇-AE之UI动效(水波荡漾)_第29张图片
图片.png

给形状图层添加修建路径


动效篇-AE之UI动效(水波荡漾)_第30张图片
图片.png
动效篇-AE之UI动效(水波荡漾)_第31张图片
图片.png

通过曲线调整运动规律(水柱下落会很有冲击感)


动效篇-AE之UI动效(水波荡漾)_第32张图片
图片.png
动效篇-AE之UI动效(水波荡漾)_第33张图片
Screen Capture on 2017-03-29 at 15-55-54.gif

(四)其他注意事项

导入psd设置


动效篇-AE之UI动效(水波荡漾)_第34张图片
图片.png

你可能感兴趣的:(动效篇-AE之UI动效(水波荡漾))