今天向大家展示一个动画从无到有的过程，讲述一些陌生的概念。特别适合新手阅读，而这个教程也讲述了软件与软件之间的切合关系，了解软件之间是怎么相互作用做出一个动画来的。先来看一个效果图。

工具

今天这个动画用到的工具都是ADOBE公司的AI、AE和PS。简单来讲就是用AI绘画矢量图像导到AE制作动画再导到PS中制作GIF格式的过程。过程很简单，但是牵扯到三个软件之间的相互作用。然而这都并不是我想说的，很多时候我们看到一个效果很棒的交互动画都会很自然的问这是用什么软件做成的。软件只不过是一个辅助工具，其实这个那么简单完完全全可以用FLASH做甚至连PPT也可以实现，而我希望真正能做到的是我们的内心，我们的思考方式，我们的灵感能不能想到这么一个简单的动画。

先思考

以这个动画为例，我们先思考他的构造。一个蓝色背景、两个看书的人物和一句标语，而人物就是用线条以及填充色构成。

再动手

打开AI，新建一个900PX*200PX的画布。用矩形工具画出一个900*200PX大小的背景图。颜色填充#91d3f9。然后按快捷键Ctrl+2键锁定这个背景图层。

以左边的人物为例，我们来拆分一下这个人物的构造。可以看出这个人物是由圆形和方形裁减或者合并得来的，可以拆解如下图。

一个个图层叠加可以得到这样的图形。相应的右边的人物也可以拆解为简单的圆形和方形。

加上一些文字。例如我们公众号的使命“看技术、品产品、悟人生”就大功告成了

接着我们按动效结构切图，导出相应的图片。这个很简单，你只要看到他那一部分是需要做动效的就单独分开切出来。比如像本教程的人物和文字都有不同程度的变化着。第一个人物眨眼睛，那么我们就需要把眼睛和整个人物分开；中间文字闪动属于一个整体也需要单独分开；第二个人物帽子和头部都有不同程度的“运动”，所以分成帽子、头部和身体三部分。如下图

我们将他分成①-⑥六个部分，以更好的管理分类制作动效。

接着到AE上场了。我们打开AE软件，新建一个项目，然后新建合成。合成名称：欢迎动画，这个我要强调一下，很多新手没有怎么一个习惯给项目一个名称导致之后的命名非常的乱。宽度900PX高度200PX跟AI画布一样。帧数率25帧每秒，这里帧速率可以理解为一秒有25张图片。为什么要那么多大呢，因为我想做出来的动画效果显得非常流畅，时间只要5S就行了，因为我制作的这个动画就是5S循环一次。

新建形状图层，然后用形状工具拉一个跟画布一样大小的矩形，填充颜色为#91d3f9，命名为bg（背景图）并将其图层锁定。然后把之前的切图导如素材库。由下往上按①-⑥的顺序拖到合成里面，并借助辅助线的形式按原来的位置大概摆放整齐。

ok，我们来局部分析动画的原理。首先是左边的人物眨眼睛。其实只要控制眼睛的不透明度就可以解决了。睁眼不透明度100%，闭眼不透明度0%，只要控制好时间就能达到眨眼睛的效果。如图

第一个关键帧不透明度100%，第二个关键帧0%，第三个关键帧100%就会形成睁闭睁的效果即眨眼睛。

第二个人物有个“抬头抬帽子”的效果，其实只是发生的位移的变化而已。但是特别要注意的是这两个的位移是一样但是时间有错落所以才会形成帽子比头慢一点下落的效果。

头和帽子第一个关键帧都是原来的位置，第二个关键帧就是垂直发生了位移，位移多少就要看示效果而定了。我这里的设置是由原来的60变成了58px，即是垂直移动了2个像素。第三个关键帧是回到原点，那么我们只要逐个复制第一帧就行了。特别要注意的是帽子的第三帧要往后移动一点点，行成错落感。

然后有点难理解的就是中间的文字的闪动。他是如何做成的呢？用“蒙版”就行了。这个“蒙版”在PS里叫做剪切蒙版而在AE里就叫Alpha遮罩。原理很简单，局部显示要显示的部位。我们再建立一个形状图层。在形状图层上建立一个大于画布的矩形，旋转15度如图

然后把这个形状图层拖动到文字图层③下面（一定要是文字文字图层③下面）。然后在选择Alpha遮罩“③.png"，就能形成”蒙版“效果了。剩下的就是给这个蒙版做位移打关键帧。

当然这里还需要复制一个文字图层③作为文字闪动之后的一个文字渐显的效果，还是给他打不透明度由0%到100%关键帧的效果。第一个关键帧为0%，第二个关键帧也为0%，第三个关键帧为100%。

再错开一下时间就会形成效果图的效果了。

最后一步就是导出文件到PS。这里把文件放置到渲染列队，导出的文件可以各不相同，但是我个人的做法是导出PNG文件序列。这样做的好处是文件较小，方便导出。接着添加一个文件夹用于存放你的PNG序列。

最后就是PS登场了。这里PS没有起多大的作用，只是做了一个格式的转换和设置循环播放图片的效果，但是少了这一步也是完成不了的。

我们打开PS，然后打开保存的文件序列的文件夹，导入AE中导出的序列到PS当中。导入的同时帧速率设置跟AE一致25帧/秒，以保持最终效果的一致性。

接着按ctrl+shift+alt+s或者点击文件>导出>存储为web所用格式。这里要注意两个设置。一个是文件保存为gif格式，一个是动画循环选项设置为永远，这样gif图片就可以永久循环下去。

总结

设计一个动效乃至于做什么事情。先明确业务需求，就是先要明确你要做成什么效果的目的和做成后想要达到的目的目标，再将这个业务需求转化为用户需求，用户看到这个之后想要干嘛。再形成影响用户做这个事情的关键因素是什么会不会引导不到位乃至于误导用户的操作与识别。当这一切都解决之后才是对这个动效或者事情做分析。分析他的布局分析他的结构，最后把需求效果拆分为一个个简单的图形或者颜色以达到设计的目的。