AE设计之基础交互动画



常见的基础交互动画


常见的基础交互动画有:页面的切换、弹窗、最小化、通知、下拉刷新。下面完成一个“下拉刷新交互动画的设计”。


交互设计首先要把界面设计出来,如图是以前设计好的一个水果的项目,然后将进行动画的地方进行拆分,如图这部分进行下拉,然后上面不动的部分以及下面工具栏也是不动的,都需要拆分开。下拉之后还有楼顶的一个进度条,下面首先把这个做好。先保存为“下拉刷新”PSD格式。


0.png


“背景”就是下拉下来背景的颜色,这需要提前设计好。打开AE软件,图片上面与下面工具栏都是固定不动的,所以把它拿到最上面。点击文件,新建一个项目。将“下拉刷新”拖进来,选择“合并图层样式到素材”。打开“下拉刷新”,先点击“顶部工具栏”,固定一下,加把锁。下面工具栏也固定。


1.png


将动的部分,在两秒钟的时候给它一个位置的变换,把之前的“图表编辑器”把这个关掉。先是有一个弹性的东西,假如这个东西是一秒钟,这里会进行一段时间。当开始下拉的时候会有一个回弹的效果。


2.png


楼顶的东西也会随着改变,也就是在相应的地方让它跟着动起来,同样先给它一个位置,刚开始它是在上边的,当随着下拉栏下来,它也是下来的。同时在下面需要固定一段时间。注意对齐一下,然后加缩放效果,使它有弹性,接下来进行细节的调整。在相应的位置加“缓入缓出”效果。速度太慢,调快一点,持续时间改为10秒。


3.png


再加上运动模糊的效果,运动模糊会使视觉看起来更舒服,更有运动的感觉。然后可以让楼顶的东西旋转更快一点。如下效果:


4.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部