AE设计之拆解原理



交互动画练习一拆解原理


打开PS软件,分析一下。下面的功能区是不需要变动的,整个需要进行交互的部分是上面一部分。所以首先需要将整个界面设计出来,将这些区分开来。所以设计的时候一定要把这些拆开,需要变动的部分是数字、转动部分。转动部分可能只是白色的部分进行转动(本节课暂时不讲)。另外背景需要颜色的变化,分数越低需要告诉用户是一个危险的颜色,所以这时用的是红色,等开始进行交互的时候,颜色会进行变化,这就是设计的原理。


0.png


1.png


回到AE里,打开数值部分,之前添加效果是在:效果、文本、编号。这个“编号”的意思是会对数值产生随机或者一个变化的数目,这里可以选“数目”,也可以选“时间”,时间就是倒计时。包括数字日期的一个转换,短日期、十六进制,这里只需要考虑0到100的数目,所以我们选择数目就可以了。这里选数值随机最大,并没有是随机的,因为如果勾选“随机”这框的话,它可能就是随机的值,所以不勾选“随机值”的话就是从8递增,它会自己计算整个数值。位置就是X轴跟Y轴的一个交点。


2.png


转动部分变色的部分,使用色相和饱和度,从红色到黄色到绿色的一个变化,这个变化是系统自己算出来的。其实可以选择一个区间,在某一帧调一下别的颜色,这时就会有相应的颜色变化。


打开“转动”的部分,选中运动曲线,然后选择图表编辑器,把图示这块放小一点,“编辑速度图表”。这就是转动部分的一个参数值,所以做任何动画之前,一定要想好设计什么样的动效,然后用Photoshop把整个界面画出来,然后才能进行相应的调整,包括一些动效的实现。


3.png


怎样输出?可以“合成、渲染前”,然后就可以。或者也可以通过别的方式,包括可以新建一个项目。有时可以看到一些侧面的展示图纸,可以把它的宽度改宽一点,给它设置一个浅灰色,在这个页面可以把图进行稍微的变形,可以借助上面的工具进行变化。


4.png


现在整个界面没有问题。现在可以在这个界面给它一个斜的展示,选择效果,可以选择扭曲,再选择边角定位,然后就可以随便改变边角的位置,然后调整好透视关系。然后再给它一个投影,点开窗口,有一个动画预设,在右边的窗口输入“投影”,左边是一些投影的参数,可以进行调节。


5.png


如图右下角绿色条就是代表已经渲染好的部分,灰色的就是没有渲染好的部分,整个鼠标都是一个正在渲染的样式,前面出现蓝色的部分是刚刚渲染过的,可能会进行中断的部分。


6.png



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

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

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

客服热线 400-862-8862

回到顶部