RT,这期的讲解手机滑动屏幕的动画,你们脑洞大开一下哈!

RT,这期的讲解手机滑动屏幕的动画,你们脑洞大开一下哈!

RT,这期的讲解手机滑动屏幕的动画,你们脑洞大开一下哈!

游戏ui界面教程_游戏ui界面设计素材_游戏ui界面设计欣赏

这次教程主要讲解屏幕的滑动动画如何用ae来完成。

主要的key点是:图层的alpha跟随遮罩。因此我着重讲解跟随遮罩的原理和用法

首先给大家看一下这节教程滑动效果的效果图(动画原件我就先不讲了,有些麻烦,大家可以结合我之前的教程自行制作一下):

游戏ui界面教程_游戏ui界面设计素材_游戏ui界面设计欣赏

我替换了背景画面,并且DIY了一下音乐播放的界面,很明显,这是一部音乐智能手机= =,好吧,你们不要在意这些细节,谢谢大家.....

这里我用到了一些图片,其中大图是来自万能的网络,你们也可以找其他的风景图片,不过图片要足够大才可以,不要仅仅和屏幕一样宽,这样咱们就没法滑屏了。

游戏ui界面设计欣赏_游戏ui界面教程_游戏ui界面设计素材

头像用了我喜欢的DJ——Quadrat Beat游戏素材下载 免费,你们可以找一些其他的歌手图片,有风景背景的其实最好,我这个不够小清新。

OK,我们开始。

首先把手机psd的图导进AE,会提示是否导入合成,点击是就可以了,这样导进的psd就会保留分层图层的信息,导入的图会分成好多原件。

其中有个原件叫做screen游戏ui界面教程,也就是咱们的屏幕图层

(你需要点进最外层的合成,然后找到PHONE的合成,点进去才能找到)

游戏ui界面教程_游戏ui界面设计素材_游戏ui界面设计欣赏

游戏ui界面教程_游戏ui界面设计素材_游戏ui界面设计欣赏

游戏ui界面设计欣赏_游戏ui界面设计素材_游戏ui界面教程

我们找到这个图层后,暂时先不管他,这里我们找一个大的风景图,我这里换一张图用(大图如果有版权,那么仅限学习交流,别用于商用)

游戏ui界面设计素材_游戏ui界面教程_游戏ui界面设计欣赏

然后把这张图放在screen图层的下面游戏ui界面教程,最后得到如图的效果

游戏ui界面设计欣赏_游戏ui界面设计素材_游戏ui界面教程

接下来关键的一个步骤,我们调节风景图的track matte选项至alpha matte “screen”

游戏ui界面教程_游戏ui界面设计素材_游戏ui界面设计欣赏

意思就是风景图层跟随screen图层的alpha遮罩,结果就是只要在screen的覆盖下的地方就会置换成咱们的风景图2d素材,没有screen覆盖的地方就什么都没有。(仔细体会下)结果如图:

游戏ui界面教程_游戏ui界面设计欣赏_游戏ui界面设计素材

这里的风景图的初始位置稍微再调一下,把风景图的X轴位置调节一下(注意不要动screen图层):

游戏ui界面设计素材_游戏ui界面设计欣赏_游戏ui界面教程

这回好多了,再加个字幕在上面:

游戏ui界面设计素材_游戏ui界面教程_游戏ui界面设计欣赏

我们到最外面的合成看一下整体效果

游戏ui界面设计素材_游戏ui界面教程_游戏ui界面设计欣赏

是不是很带感了呢?

OK!接下来我们只做屏幕被滑动后向右移动的动画。

很简单,首先先把所有的字幕放在一起并生成新的合成,方法是:shift选中所有的文字字幕图层,然后ctrl+shift+C,然后点确定

游戏ui界面教程_游戏ui界面设计欣赏_游戏ui界面设计素材

接下来把字幕合成绑定至风景图层

游戏ui界面教程_游戏ui界面设计素材_游戏ui界面设计欣赏

然后设置风景图层位置的关键帧动画

观看一下效果:

游戏ui界面教程_游戏ui界面设计素材_游戏ui界面设计欣赏

接着我们制作一个音乐界面,并且生成合成后绑定风景图层!过程跟字幕合成的绑定一样,只不过绑定的位置要设置好,在风景图层运动的最后一帧绑定!

游戏ui界面设计素材_游戏ui界面教程_游戏ui界面设计欣赏

再次预览效果:

游戏ui界面教程_游戏ui界面设计素材_游戏ui界面设计欣赏

最后一步了,再坚持一下!

把字幕合成组和界面合成组都按照之前的风景图的方式对screen进行alpha matte的跟踪遮罩,由于只有一个screen,因此我们需要复制另外两个,然后分别放在界面合成和字幕合成的上面,然后再调节选项。

游戏ui界面教程_游戏ui界面设计欣赏_游戏ui界面设计素材

最后预览最终效果!

游戏ui界面设计素材_游戏ui界面教程_游戏ui界面设计欣赏

这个是比较简单的滑动动画,至于每个原件的动画我并没有一一制作,需要大家打开脑洞举一反三了~这里主要讲解如何利用psd来制作滑动界面的动画,当然可能实现这一效果有其他的方法,你们自行考量,哪个简单就用哪种!

下次的教程会告诉大家如何利用ae的摄像机实现3D的透视视角,并且适当加入摄像机的景深,使画面更加有层次感,UI界面神马的还是倾斜着看比较高大上!

不是吗???

游戏ui界面教程_游戏ui界面设计素材_游戏ui界面设计欣赏

文章来源:https://www.toutiao.com/a6456965353598616078/