AE设计之创建交互动画



如何快速创建一个交互动画


如图QQ的界面,也是常见的抽屉式界面。这个动效很简单,就有三个地方的变化:位置的位移、大小的变化、不透明度的变化。


90.png


如图是已经设计好的界面,将两个界面衔接起来增添动效是有一个衔接过程的,大致分为三个过程。


91.png


用PS给背景一个蓝色,然后文字部分给一个白色,这部分白色就是QQ联系人界面,然后保存到桌面。以后做任何动效之前都需要用PS设计出来,然后命名规范一点。


92.png


保存之后用Photoshop打开、用AE软件打开。如下图点击确定。


93.png


首先设置位置动画,即从左边到右边。一共有三个图层。主界面设置一个位移动画,如图在位置处“打一个点”,在一秒钟之后进行动画的触发事件。在右下角打一个帧,把动画时间设为一秒钟。再加上一个缓入缓出的效果,它的快捷键是“Shift+F9”,可能电脑之间不一样,一般PC是“Shift+F9”。


94.png


同样在文字信息部分给一个位置的变换,同样一秒钟触发事件。再加上缓入缓出的效果。透明度的变换,加一个变暗的过程,出发的时候透明度设置低一点,出发完之后再给高一点。同样给文字信息部分一个大小的变换,如图,过渡自然。


95.png


上面是一个demo,下面完成一个实际的效果。把之前做好的主界面导出来,把背景导出来。因为通知栏这块是不变的,所以归于背景里面。先把背景切出来,然后把文字信息切出来。然后导入PS里面,新建文件。把背景拉进来,处理一下边缘,命名为“背景”。把主界面拉进来,再把文字信息拉进来。当完成之后,可能是如下效果,然后保存一下,命名为“第一个交互动画”。


96.png


然后用AE把下面效果新建一个项目,这里不保存了。


97.png


然后把第一个交互动画拖进来,选“可编辑的图层样式”,保持图层大小,点击确定。


98.png


点开“第一个交互动画”,有三个图层:主界面、文字信息、背景。主界面给一个位移,在一秒钟之后给它一个出发事件,给它一个位置的变化,设置为一秒钟。加入缓入缓出效果,可以看到这里图标的形状已经变成了一个漏斗。这里注意一般情况下,动画响应的速度保持在400毫秒以内,这里为了掩饰所以设置为一秒钟的时间。


99.png


背景是一直不变的,但是要加一个不透明度的变化。先把不透明度改为30%,弄完之后再打一个帧,不透明度改为100%。同样在第三秒钟的时候,再打一个帧,不透明度改为30%。这时再给一个文字的信息,“变换”,也给它一个位置……简单的就做好了。由于动画还是比较生硬,所以还要设置一个衔接,“缓入缓出”。这里不打忘记大小的对比,添加一个缩放和设置不透明度的变化。


990.png


如图,变化自然,效果完成。


991.png



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

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

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

客服热线 400-862-8862

回到顶部