2020-11-19 UI设计培训

帧动画制作简单loading动画

一说起做动效,大家一般都会想到AE吧,作为一个专业做动效的软件,AE功能强大,可以做出很多酷炫的效果,但是繁复的功能对初学的小白可能不是那么友好,当我们需要快速做一个界面里要用到的loading小动画时,用AE就有点杀鸡焉用牛刀了。这个时候PS就再次证明了自己在Adobe家族“全能小王子”的地位,是的,UI设计培训中我们在PS里利用帧动画,用不了五分钟就可以顺手把这种小动画做好~

先来看看效果:

UI设计

看起来很简单对不对?跟着像素妹一起让它动起来吧~

第一步,做好基本形状

通过观察我们可以发现,这个loading小动画其实是由几个小正方形组成的,并且有一个颜色深浅的变化,我们可以通过更改不透明度来实现。

1.新建画布,用矩形工具按住shift画一个小正方形,颜色随意,如下图;

640.jpeg


2.ctrl+j复制五次,然后按住shift依次水平移动,把它们排列好,并更改每个图层的不透明度,使它们的不透明度有一个从低到高的变化,如下图;

UI设计培训


第二步,做动效

1.在顶部菜单栏的“窗口”里勾选“时间轴”,在弹出的面板上点击“创建帧动画”,如下图;

UI设计培训


2.点击过“创建帧动画”之后,在下面会出现一个有缩略图的小窗口,我们制作动效需要用到的每一帧都会在这里显示 ,前面的序号1就代表了这是第一帧。点击下图框选的按钮就可以新建帧动画,如下图;

UI设计培训


3.通过观察可以发现,这个loading动效是通过从左到右切换不透明度来实现的,也可以通俗的理解为不透明度100%的这个矩形是火车头,它带领着后面的矩形一直在从左向右跑,只要最后首尾相接,这个动效就做好啦~所以新建第二帧,并且选中第二帧,依次更改不透明度,如下图;

UI设计培训



那么第三帧就还是依次向右移动,如下图;

UI设计培训



第四帧,如下图;

UI设计培训

第五帧,如下图;

UI设计培训


第六帧,如下图;

UI设计培训


做完第六帧就会发现已经和第一帧首尾相接啦,我们可以按空格键预览一下,可以把下面那个次数改为“永远”,它就会首尾相接一直动起来啦,看起来是不是稍微有一点生硬?那我们可以再给它加上三帧,把不透明度改低,作为过渡;

4.复制第一帧,并把它拖到第六帧的后面,作为第七帧,把不透明度整体改低,如下图;UI设计培训

复制第七帧,在第七帧的基础上继续降低不透明度,如下图;

UI设计培训

复制刚才的第八帧,降低不透明度,如下图;

UI设计培训


再预览一次,这样有了过渡是不是就自然多啦~

第三步,导出GIF图

执行文件—导出—存储为web所用格式,快捷键是ctrl+shift+alt+s,在弹出的窗口中,把红色框住的那一栏改为GIF,循环选项改为“永远”, 点击存储,就可以啦,如下图;

UI设计培训

UI设计培训


这样就做完啦,整个过程是不是非常简单呢?用这种方式也可以做出很多其他有趣的动效,原理都是相同的,感兴趣的同学可以动手试试哦我们是UI设计培训新像素~












林老师:0371-5556 6060