方法：简单图形变换也能诞生很好看的动效

       原图是在微博上面看到的，博主也没有备注作者。不过还在前不久找到了作者了。去到Oi!大佬的个人主页，每一个小动画都有去练习的冲动，推荐大家去dribbble上看一看。

       回归正题，这张图是我365天打卡练习的第163天的练习，不得不说，这张图看几遍都觉得十分有趣。

       不过这篇文章是很久之前的一篇文章了，所以方法和表述会比较含糊和落后，站在现在的角度解析的话，我会把现在的一些想法用加粗的字体标注出来。

       首先需要英文字母。字形我是在AE中直接进行的描摹，但这是第二步，因为每个字体是有动画的，所以需要先分析一下，再进行所需要的图像绘制。

        那么先将字母单独解析一下，介绍一下个人的制作方法。然后在说明装饰元素，润色动效。(合成设置800*600,24fps)。

        第一个字母S。对于字母S，这是最简单的一个字母了，首先，需要用钢笔工具描摹一个S轮廓，并取名为S mask。因为可以很明显的看出来S字母本身的动画仅仅是两个S型的描边加上修剪路径得到的，所以除了S mask以外，还需要两条与它发生作用的S型描边。（两条描边的宽度要适当粗一点，参照S mask，描边要能完全将mask覆盖），并给他们内容-添加-修剪路径。

       由于绘制的时候笔画可能不一样，所以对修剪路径相同的K帧会出现不同的结果。这里我的S是从下往上绘制的，所以k帧只需要对结束K帧。具体数值如下：

 2-S 

—————————————————————————————————————

                1s:10f               1s:13f                            1s:23f                    2s:02f         

透明度      100%

结束                                   0%                                                              100%

—————————————————————————————————————

1-S

—————————————————————————————————————

                1s:10f               1s:13f                            1s:23f                    2s:02f         

透明度       50%

结束           0%                                                       100%

—————————————————————————————————————

       将两个描边打预合成，放在S mask下面，轨道遮罩模式选择为Alpha遮罩。再选中这连个图层打预合成，命名为S。用锚点移动工具（快捷键Y），将锚点移动到合适的位置，这里我选择在整个S的中间偏下的位置。给缩放k帧。（由于打完预合成进行过合成在时间轴上的移动，所以时间会与大家的不一样），具体数值：

————————————————————————————————

                      1s:11f                                                                  1s:23f

缩放            （151,52）                                                         （100,100）

————————————————————————————————

    （这里可以直接用一条S形状描边的修剪路径动画作为S的动画，没必要弄遮罩这么麻烦，除非想要几乎完全吻合的S形状，那就只能画路径了）

      那么以上完成，S动画就做好了。

       然后是字母A。可以看到A最初的雏形是个三角形，先是内部有类似水花的东西向上冲击，接着A开始逐步展开出来。所以首先用多边形工具画一个三角形作为A，之后需要在AI中绘制水花，水花的样子如下图。

       对水花的位置k帧，由于每个人绘制出的水花都不相同，所以这里不给出详细的数值了。水花由下往上运动，选中关键帧F9，不再进行速率调节。将两个水花大预合成，放在之前画好的三角形下面，轨道遮罩模式改为Alpha遮罩。然后将三角形复制一层，记得点出他消失的小眼睛，打开该图层的显示开关。给他的路径k帧，具体操作是将他的顶点往上移动。（在这之前需要选中多边形路径，右键-转换为贝塞尔路径）同时需要注意到，A的顶部是平的，不是尖的，所以我建了一个固态层，适当的移动他的位置，放在A的上面，轨道遮罩模式改为Alpha遮罩。对了，不要忘记切断之前的水花图层（快键键Alt+】）详细见下图时间轴面板的1,2两个图层。

       当然这时的A仅仅是一个梯形，还没有内部的笔画。选中A，给他绘制两个三角形，形状不限，只要是个三角形，进入到图层内容的面板，对这几个形状进行排序，A放最上面，其他两个放在他下面，此时点击内容，然后在添加-合并路径。

       一定要先点击内容，再添加合并路径，否则合并路径的效果可能添加到那三个形状里面的任意一个上去，而不是同时作用在这三个形状上。合并路径的模式改为减去。接下来就是对每个路径进行k帧了。这里说明不了详细的操作，所以用动图演示。（这里其实就是一个布尔运算）

       没错这个A的弹弹的效果是手动k出来的。完成上述操作，就的到字母A了。

       接下来就是K了，K也是比较简单的一个，显示一个大方块变成K的一竖，接着就是一个小于号形状出现。首先说一竖，这里说一个比较笨的方法，当然也有许多方便的方法，不过通过文字传达比较困难，所以介绍笨的方法。

       首先画好一个大方块，然后将他的锚点放在右边的边上，这时候调节缩放的X，它就会贴着右边缩放。然后将它打预合成，将锚点移动到大方块的左边，这时候调节缩放X就可以让他贴着左边缩放了。同理在打预合成，移动锚点让他可以贴着上边缩放。然后对于缩放k帧，由于绘制的大小各不相同，所以不给出详细的数值了。接着给缩放关键帧添加万能弹性表达式或者用motion 2自带的弹性表达式也行，让整个方块的缩放动画有比较Q弹的感觉。最终的大方块变成一竖，那么竖的动画就完成了。对于小于号形状的笔画，先绘制出来一个小于号，给缩放添加弹性表达式，同时对于形状也进行一定的k帧用于优化。可能有人会疑惑，为什么不给出速率曲线，因为所有的关键帧都是线性关键帧，若将他们F9，弹性表达式就不管用了，因为始末的速度为0，计算过程本身的数值一直在加0，不发生改变，也就不具有弹性了。上述步骤完成后，我们就得到所有的字母效果了。（方块动画这里需要理解如何制作多个锚点，现在的话我会用两个空对象a，b来制作，a作为形状的父级，b作为a的父级，对a,b缩放K帧，这样就让形状相当于有了两个锚点）

       有人会问，不还有一个A吗，第二个A只需要将第一个A沿y轴翻转一下就可以了。

       那么，最后就是一些小细节的制作了。

       S的装饰里有两个椭圆圆环的修建路径动画，动画的原理与S本身的动画原理相同，对于他更高阶的一些玩法在漂浮的钢笔视频里面有介绍，感兴趣的可以去看一下。（传送门：https://www.bilibili.com/video/av30115077）

       A的装饰也讲过，首先是球上升下落的动画，这是一个非常经典的动画，更高阶动画的为之前的模拟3d立方体下落，这个也做了视频讲过（传送门：https://www.bilibili.com/video/av31540122）。除了球还有水花装饰，原图没有这个效果，我觉得孤零零一个球比较单调，所以就添了这么一个效果。当然这也是画好描边，添加修建路径制作的。

       K的装饰就更简单了，只需要两条直线添加修剪路径。

       最后一个A，也就是路径动画，先用钢笔工具画好最后的样子，然后倒K帧让他消失。

       这样，整体动画就完成了，而整体动画的核心并不是上述的各种方法，而是贯穿始终的动画原则。节奏是这个动画灵魂，在很短的时间里面出现好多效果，而且即便他们是简单的效果，我也会觉得他很惊艳，看他一遍又一遍。

       每次临摹动画，我都会去感受整个动画的节奏感，去感受动画中的动态感，质量，力度等等。或许这也是为什么好多动画人讲解动画十二原则的时候会把Timing and Spacing放在第一个讲的原因吧。

       以下是最终效果展示。