美文网首页玩转动效设计@产品
动效篇-AE之UI动效(小球粘性融合)

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

作者: redBlue_ | 来源:发表于2017-04-01 14:53 被阅读1200次
今天分享下粘性融合的制作方法!!!
klkl.jpg

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

(二)UI动效常用插件

图片.png

1插件安装

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

图片.png 图片.png

2插件使用

讲讲讲

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


缓动调节工具

图片.png

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

Screen Capture on 2017-03-29 at 16-24-10.gif Screen Capture on 2017-03-29 at 16-36-15.gif

(三)小球融合之redblue

最终效果

新建一个白色背景层

图片.png

建立一个空层(Com+Shift+Alt+Y新建一个空物体层快捷键)


图片.png

新建形状图层


图片.png

新建红色形状回归中心点


图片.png

给形状图层添加滑块控制效果


图片.png

然后我们给形状层的位置加上表达式,我们先拾取控制层的位置,在位置后面加上*再拾取滑块的位置,就可以了

图片.png

如何激活表达式书写框Alt+点击秒表按钮


给形状图层下的锚点添加表达式如上


图片.png

分别在滑块控制和旋转上key帧 具体值如图


图片.png

复制一层修改颜色为蓝色 修改滑块控制中间那一帧的数值如图


图片.png 图片.png

给动画加上缓动


图片.png

效果如下

Screen Capture on 2017-04-01 at 14-25-15.gif

之后我们留着背景层,将其他三层打上预合成名字为红蓝动画,
给红蓝动画分别添加快速模糊和简单阻塞工具效果如图

图片.png 图片.png 图片.png

整体效果如下

Screen Capture on 2017-04-01 at 14-38-40.gif

在红蓝动画的预合成中新建一个文字redblue


图片.png

退回到最上层合成观看效果如下


Screen Capture on 2017-04-01 at 14-47-10.gif

在视频讲解合成中复制出一层文字做透明度的动画


图片.png

最终效果


Screen Capture on 2017-04-01 at 13-43-56.gif

相关文章

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

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

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

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

  • 彩虹手帐033 | UI动效设计

    UI动效是什么?“没有动效的APP,不是好的APP”,优秀的动效设计在提升产品体验、用户粘性方面的积极作用有目共睹...

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

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

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

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

  • UI动效学习阶段一

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

  • UI动效

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

  • UI动效

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

  • UI动效

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

  • AE动效设计课堂笔记

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

网友评论

  • jhyHenry:AE如何导出插件生成svga格式的高级特效?
    jhyHenry:@redBlue_ 额,设置的问题答案是什么?
    jhyHenry:@redBlue_ 额,有问题啊,加不了。。。
    redBlue_:@jhyHenry 刚看到你的留言,加我q具体聊772530746

本文标题:动效篇-AE之UI动效(小球粘性融合)

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