AE设计之常见动效类型



交互基础


交互基础一般就是视觉表层跟信息的外观,然后动效与信息的运动方式,来表现视觉层级关系,以及UI之间的相互交换。如图是常见的IOS系统图层的相对运动,Icon图层做相向运动,视野缩小,视野中物体变大;Icon放大变成APP&文件夹,切换成APP界面或者文件夹。


6.png


常见的四个动效类型:


APP的Icon到全屏APP界面


如图点击了文件夹,文件夹进行慢慢缩放,是iPhone界面里一个常见的类型。


7.png


列表到页面


就是比如点击了列表,然后列表到下一个页面,即新的页面被打开。


8.png


按钮到页面


点击下面的按钮,然后慢慢滑上来,这是IOS系统最常见的一个类型。


9.png


page到多任务


90.png



举例 APP的Icon到全屏APP界面


准备两张图片,一张是IOS系统的界面,另一张是苹果手机里一个应用的截图。下面完成第一张界面点开到第二张整个界面的动效。


91.png


首先分析一下,点开图标之后会有一个点击效果,点开之后再进行一系列缩放。打开AE软件。文件,新建一个项目,将上面两张图片拖到素材库里面。这时将整个图片拉倒下面里面,如图,新建一个合成,这个合成就是整个动画的一个合成。


92.png


同样,把另一张也拉进来,就是打开之后的效果。分析一下整个运动方式:就是这张图片进行缩放,逐步放大。假如动画是两秒钟,我们先给它一个正常的状态,也就是说下面的背景是不变的,主要运动是中间一块。所以先给它一个位置和一个缩放。AE的运动方式就是某个图层的位置跟缩放的距离的参数进行变化,就会造成一个动效的实现,点开“变换”进行设置。


93.png


现在给它一个不正常的,先进行缩放,将它拉到对应的图标上,当点完之后,它会进行相应的效果,这时给它一个不透明度的变化。这时会进行相应的动作。一般情况下整个动效的效果不大于400毫秒,这里设置为600毫秒,就是在两秒钟之后会进行一个相应的切换。


同样这里可以给它一个点击效果,画一个圆角矩形工具,然后人为的加一个点击效果,即给它一个变换。然后在两秒钟的时候进行了变换。调整颜色和不透明度,就有一个按下去的效果。


94.png


95.png


“缓入缓出”最主要是一个位置和缩放的关系,先把缩放点开,然后点开图片编辑器,这里可以选择“编辑速度图标”,把这个选开,给它一个曲线,大家可以看到整个曲线的变化。然后前面快,后面比较慢。注意首先应该把整个图的中心缩放的点拿到适当的位置。


96.png


现在整个效果就已经完成了,速度可以调整快一点,很自然。


97.png


但是还是少了一个东西,现在IOS系统和之前的还是不太一样,因为它的背景也进行了相应的缩放。这里先把背景命名一下,命名为“背景”,给它一个变化值,给它一个位置及缩放,不透明度也相应给一个变换。同样需要调整位置,从而进行相应的曲线的变换。如图可以看到有一个类似白色的效果,因为背景是绿色的,所以在这里还需要再建一个纯色。


98.png


这就是一个很简单的一个交互效果,在这里首先点击按钮进行相应的触发,然后背景进行相应的位置的移动来完成。



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

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

麦子大聚惠,豪华礼包你领了吗?

客服热线 400-862-8862

回到顶部