第一期

对于新手来说，快速学习的方法就是做简单的练习让自己快速熟悉软件和进入状态。如何临摹一个动画呢，首先观看动画，眼睛扑捉到他的几次关键跳转，然后分析它的初始状态和结束状态，最后关注小的细节就是中间状态。

然后女，打开软件，对着例子先自己尝试做，自己尝试解决问题，最后真的不OK我们再来看源文件分析。

例子

这个例子包含的所有原件，肉眼可见的几个：

1.两个长方形

2.一个梯形+一个小三角形（仔细可以看出最后的三角形是两个图形拼接起来的）

3.文案PAUSE

4.文案PLAY

分析之后可以动手做了

几个重点：

1.图形A变到图形B的时候，图层名字必须是一样的，一样的，一样的。。

2.command+D原地复制，这个快捷键会用到很多次。

3.变化前和变化后的图层名字，数量相同。

恩，可以开始啦。

第一步新建一个新的文件，快键键command+N。然后修改文件名以及保存位置，把画板背景颜色改成黑色。

01

第二步在画板上新建图形，刚才总结过的几个图形，不过这里的动画其实是遮挡动画，所以一共需要6个原件来制作这个动画。

1

所有组件摆放位置及图层关系如下：

下面调整各组件开始时的状态，上下遮挡与背景融为一体，这样视觉上就看不到上下遮挡了。

开始时状态

开始时PLAY文案是看不到的，所以这里调整他的透明度为0。

遮挡

文案

文案

左右两个矩形为颜色大小相同的两个矩形。

结束时状态

下面要制作结束时的状态了，图形结束后是三角形。PLAY透明度变成100。结束时的效果主要靠两个上下遮挡。

首先复制一个画板，点击artboard 1，选中后快捷键command+D原地复制一个新的画板。

复制后

画板2，就是结束状态的画板，所以这里需要调整画板2中各图层状态。

首先三角形是两个拼接在一起的两个矩形，调整两个矩形状态如下，一长一短两个矩形。

长方形

然后调整文案的状态，PLAY的透明度为100，PAUSE透明度改为0。

文案透明度

重点来了，在这里改调整上下两个遮挡的位置，首先是旋转的操作，选中上方遮挡，按着command键和鼠标左键配合旋转，两个遮挡旋转角度相同方向相反，都是向内旋转，旋转后如下。

遮挡

最后，细节调整，例如文案的左右滑动。文案滑动依然用到对齐。

第一个点击

开始和结束状态都做完了，就剩下一个步骤了！！点击画板1会出现一个闪电按钮，这里点击闪电后会有很多种交互方式，这里选择tap（就是点击），按住闪电不放发现会有一个箭头出现，让箭头指向画板2，第一个点击就完成了。

时间条

时间条调整

第一个点击

第一个点击完成后的动态。

第一个点击状态完整后，我们只是从暂停到开始，但点击开始会变成暂停，这是一个循环，所以还需要让他变回来。所以要从画板2回到画板1。同理，点击画板2的闪电指向画板1。这样我们的动画就完成了。

第二个点击

然后就是最后的效果了

两个点击

最后在演示框点击保存GIF就可以了。

思考一下，文案的左右滑动是怎样用对齐做得到的呢，我会在第2次的教程中解释。