首先，这个动效的设计师是我在dribbble上非常喜欢的一位设计师，他制作了好多有趣的动效，无论是2D还是3D的，虽然现在无法原创出像他的那么优秀的作品，但是对于他作品的临摹还是可以让我获益匪浅。

   那么拿到这么一个动图，我们首先需要做的是在AI中绘制我们需要的一些基本图形，这里我已经绘制好了，并作为附件进行了上传。拿到AI文件之后不要上手就跟着本篇教程做，先想一下为什么我会绘制这几张静态图，以及为什么我会将一个画面分成多个层。

   接着我们就可以导入AE里进行动效制作了（30fps）。首先我们需要得到这样的一个动画效果。

这里需要制作两个动画，一个是杯子出现，一个是那个运动活跃热气。

首先是杯子，这里先给大家详细的关键帧数值，在进行一些说明。

杯身：锚点在杯子底部

0:00:00:00

位置：383.5，628.7

缩放：0，0

旋转：+8

0:00:00:12

位置：405.3,339.8

0:00:00:14

位置：405.3，346.1

0:00:00:20

旋转：-5.4

0:00:00:23

位置：399.5,400.7

缩放：100,100

0:00:00:24

旋转：+3.2

0:00:00:26

旋转：-1.6

0:00:00:27

旋转：0

盖子（这里盖子分成了两层，不过上层的父级链接底层的盖子，底层的锚点也同样在底部）

0:00:00:09：

位置：404.6,237.8

缩放：30.6,30.6

0:00:00:17

位置：402.5,132.1

0:00:00:19

位置：402.5,132.1

0:00:00:24

位置：405.2,226.5

0:00:00:25

位置：402.4,239.6

0:00:00:26

位置：395.4,238.6

缩放：100,100

旋转：+3.2

0:00:00:27

位置：397.4,239.1

0:00:00:28

位置：398.9,239.1

旋转：-1.6

0:00:00:29

旋转：0

到这里就完成了我杯子的动画，至于k帧，这立说明一下原因，首先我们可以观察到杯身是从下方逐渐放大出现的，先上升后下降，并在现将后由于惯性摇晃了几下。同样的事也发生在盖子上。所以对于杯身，在0帧的位置我们让他位于合成的下部分，缩放为0，而在杯身上升到最高的地方时，我复制了做高出的位置关键帧，让他在最高处多待几帧以便模拟滞空效果，最终杯子落下，同时大小回到（100,100）。至于旋转，我需要让他满足能量守恒，所以可以看到数值：+8，-5.4，+3.2，-1.6,0，这些数的绝对值在减小，而且这些关键帧之间的时间也越来越短，这里指的一提的是，我并没有在杯身到达（100,100）时使旋转为-5.4，而是将-5.4的关键帧移到了之前，这样我们的动效就没有卡顿感，不会是一个一个区间动画，而是一个动画执行的时候，别的动画也同时执行，这些从上图可以十分直观的看出来。当然同样的规律也适用于盖子，而且我甚至将杯身旋转的最后3帧直接复制过来了，原因是这时盖子已经落在了杯身上，他会跟着杯身一起运动，不过盖子下落的力会让盖子反弹起来，所以我们将盖子旋转关键帧在时间轴上向后偏移几帧，这也是动画十二原则的第五条中的动作重叠原理的应用。还有一个大家很容易注意到的，我在位置上手动k了好多帧，这里我是让盖子的锚点与杯身顶部的中点在y轴上大致相同，至于为甚么不完全相同，因为形变，空气阻力都是一些不定因素。最后就是关键帧速度曲线的调节，这个其实大体的节奏很容易调节，我们可以想象一下，将篮球向上抛出最终落地，它的y位置上的速度一定是先快后慢直至0，此时也到达了最高点，然后下落，速度随着下降越来越快，以这种物理规律推下去，而想要的到最完美的节奏需要不断不断的尝试与经验，所以大家如果单纯按照上面的时间k帧，在最后的盖子位置k帧可能很难的到自己想要的那种感觉。

接下开说的就是热气的制作：

首先，我们用钢笔工具绘制一条直线，添加Z字形，修改大小，每段的背脊的参数。在添加修剪路径，降低结束的值，确定我们想要的长度，然后鼠标拖动偏移的数值，会发现我们想要的效果已经大致得到了，不过他的位置一直在改变，所以我们需要给他的位移k帧，让热气看起来是在原地变化。

下图数值:

0:00:00:00

偏移：12.7

位置：390，-138

0:00:05:29

偏移：324.6

位置：-246.4.-138

这两帧的图形在调节之后是相同的，将0:00:00:00~0:00:05:29的动画在0:00:06:00复制一份，当然在仅在0:00:06:00复制0:00:00:00的数值，并给偏移以及位置加上loopOut（“cycle”）表达式也能完成同样的效果。

接下来是二维码的动画，这里二维码的白底是一个简单的缩放的动画，不多赘述，至于二维码本身的图形除了整体的缩放还有单独的缩放。这里进入内容，组，变化：组，调节缩放的数值做动画。还有一点，这里选中某个组，我们用锚点移动工具，同样也是可以移动这个组的锚点的，然后给缩放添加弹性表达式（百度就有）。这里的话，我用的是motion 2 自带的添加弹性动画功能，使用方法，选中关键帧，点击下图的按钮。然后在效果控件里面会出现3个滑块，第一个表示振幅，数值越大摇晃的范围越大，第二个表示频率，数值越大摇的越快，第三个表示阻力，数值越大摇晃趋于平稳的时间越快。如果用滑块来控制弹性表达式的话（无非是将amp，freq，decay链接出来，用滑块控制数值），控制原理是相同的。当然，关键帧（一定要是线性关键帧，不要缓动）之间的时间长短也会有不同的影响，相距的时间越短越明显。我的三个数值为10,40,80.

接下来是手机出现的动画，这里需要将手与手机先分离，就是手机与手的图层复制一层，删除内容里的组，一个留下手，一个留下手机。（这里如果在AI里面分好的话会省时间）。

手机绑定父级为手，对手做缩放与旋转 ，必要的话可以加上一点位置动画来丰富动画，对旋转做弹性效果，用上述两种方法一种都行。同样手机自身也有一个摇晃动画，同样给旋转一个弹性效果。手机与手出现的同时，二维码移动至手机屏幕。

然后是扫码动画，这个动画，显示绘制一个矩形，然后修剪路径得到一个角，将形状复制一层，改变修改路径的偏移参数，用此方法做出四个角，做缩放动画，并给他加一个alpha遮罩为手机的屏幕。

聚焦后，有个手靠近二维码远离我们的动画，扫描完成又有一个拉近的动画，这里就是简单的缩放。然后二维码有一个被扫描的动画，在讲之前的二维码动画时，大家细心的话，会发现还有一层二维码，就是现在的这个动画，需要两个，因为我改变的二维码各个组的锚点，这样缩放动画较之前是不同的，而且这里我用的是缓动关键帧，没有使用弹性动画，因为使用弹性缩放会看起来特别的别扭，大家可以自行尝试一下。然后是大拇指的动画，这里没有别的什么方法就只有k帧，我是录了一个自己使用支付宝扫码的视频，对照着自己的手指做的动画，为此还损失了3元（难受）。

路径的关键帧也不是很复杂，而且经过观察手指按压是先快后慢。后面的选择价格的手指滑动也是用的路径动画，而且手指滑动之后有一个短暂的停顿时间。这些都是我自己观察自己的付款视频发现的。

然后就是欧元的付款了。

有一定ae基础的一下就能看出来就是一个遮罩动画。这里我输了0,1,2三个文本，并且将他们按上面排列，1父级为0,2父级为1，这样0向上移移动，1,2也会一起运动。来到合成外。画一个下图的矩形作为该合成的alpha遮罩，当然用蒙版也是可以的。

还有一个付款完成的对勾动画，我们用钢笔绘制一个√，然后添加修建路径，对结束K帧0->100，如果你的动画是反的，那是因为你是从右往左画的，解决方法有两个，一个是结束设置为100，修改开始的参数。另一个是点击如下按钮。这个是反向路径。

做到这里我们已经大致完成了动画了，还差最后一步，手机变奶茶，这里就是硬切动画。首先我们给手旋转做弹性动画，然后在过程中我们切断手机图层（alt+]），让他在这个时间之后就没有了，然后我们将第一步做的奶茶动画的合成拿来，改变一下旋转，让他的旋转与手机的旋转一致，同时调节一下缩放让手握住奶茶，然后在同样的时间点让奶茶动画出现（alt+[）,同时父级链接手。由于手机，奶茶的父级都为手，而且衔接的那个时间点旋转的数值相同，所以即便是硬切，节奏也是相同的，给钱我们的感觉就像是变魔术，手机变成了奶茶。

做到这想必大家还有一个问题，手机，奶茶都在大拇指与手指的上面，这里是最后的处理了，将已经完整的做好的带有全部动画的手的合成复制一层（这里是在项目里复制，不要直接在图层面板复制合成，那样修改复制出来的，原合成的内容也会跟着一起修改），顺序放在最上面，然后独显手指与大拇指图层。

终于到真正的最后了，输出视频，ps转gif，完成了。