交互动画练习进阶



天气界面的动效


下面进行设计天气界面的动效,不考虑它的逻辑性与数据,只考虑动效。首先用Photoshop把它设计好,用PS把AE里面的动效拆分好。如图已经拆分好了,晚上的可以命名为“1”,白天的就不命名,这样容易区分。编组之后会在AE里面变成一个合成,那样子的话就不好调节。


7.png


打开AE,新建一个项目,再把“天气”拖进来,“合并图层样式到素材”,确定。之前编的组已经变成了一个合成,所以说有的不需要编组,因为编组之后,调节合成会比较麻烦。先把“天气2”的隐藏掉,把持续时间改为“20s”。


给下部分一个变化,如图,在两秒钟的时候产生一个位置的变化,以及给它一个不透明度的变化,因为天气是要加载出来的,所以给它一个从下到上的变化。


8.png


同样给分割线一个变化。


9.png


做好天气2的变化,位置、不透明度。那么这块加载的样式就做好了。然后给它一个“缓入缓出”的效果。


90.png


然后再调上面这一块部分,调整不透明度的变化,因为整体效果优点生硬,所以给上部分相应元素一些效果。给云一个动态效果,第一秒给一个位置,第八秒实行第二个动画,就是白天的天气,从左到右。同样其他云也添加动画。然后所有元素都设置一个运动模糊的效果。


91.png


流星部分,因为云是在流星后面的,所以流星的图层位置要挪动一下。先给流星2的参数,刚开始不透明度肯定是0%,然后中间是100%,后面又是0%。同样给它帧的位置的变化,再加上“缓入缓出”的效果。然多添加一些流星,增加动感,只需要挪动位置就可以了。这样晚上的效果就完成了。


92.png


因为有点枯燥,再加上数值的变化,给它一个文本,“效果、文本、编码”,加粗,居中对齐,确定。设置文字大小,打锁。这里也可以调节具体的位置。


93.png


之前的数字变量可以隐藏掉了,颜色变为白色。开始为“-1度”,在第八秒时可以设置为“-8度”,然后动效就会呈现数字的变化。然后左边可以选择随机值,那么温度就会随机变化。这样动画就完成了。


94.png



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

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

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

客服热线 400-862-8862

回到顶部