第2章 动画原理

在第1章中，我们对动画的各个方面有了一个大概的了解。

在本章的开始，我们先来思考动画作为一种艺术门类，它最独特的性质是什么？

相对于其他绘画、雕塑等“静止”的艺术，动画不单要关注某个形体（空间）自身的形态、色彩等要素，还要特别研究它在时间轴上的运动方式，而它的运动不是简单的物理运动，而是简化的、高度概括的和夸张的运动。

形象点说，我们不单要注意一个角色的造型是否可爱、是否便于动，还要特别关注，在一个特定的时间段内，它是怎样运动的，它是否要变化一下速度（加速、减速）？在什么地方停顿？它是否要变形？关键问题是，这一切变化的规律是什么？能不能概括几条定律，以便于人们掌握？

因此，可以概括地说，动画是一门研究时间和空间的艺术。动画原理阐述的正是时间和空间变化的规律。

现在教科书上的所有动画原理都是经过无数艺术家长时间的、大量的实践，总结、提炼出来的。从某种意义上说，这种规律是“颠扑不破”的，因为它已经建立起一整套用于表达的符号和语言，它是行之有效的；同时，观众也已经习惯了这样的表达方式。

现在，我们想学习制作比较专业的动画，就必须学习动画原理。传统动画原理不仅能使我们的动画看上去更好，而且还能带给我们许多便利——因为它总是用最经济的方法制造出最好的效果。虽然我们使用Flash，但电脑并不能自己准确地画出生动有趣的动画，一切创造性都来源于我们的大脑和双手。绝大多数“动起来”的效果靠CPU是做不出来的。

目前，国内的Flash在总体水平（仅就动画方面来说）上与国外相比仍有较大的差距，其中关键的是动画部分做得不够“专业”，甚至根本就是“伪动画”。凭借Flash本身提供给我们的平移、旋转、放大缩小甚至模仿淡出淡入，能称为“动画”吗？

比如，一对少男少女相对站在那里，镜头转来转去，下一个镜头是少女的脸部大特写，它缓缓地从左边入画，滑到右边出画，除了眼睛里代表“泪光”的一点白色晃几下之外，整个画面再找不到一点动的地方了。

这样的所谓“动画”够典型了吧？我们不妨回忆一下，在国内的各大Flash社区里，各种排行榜上，这样风格的作品是否占了绝大多数？如果关上音箱，屏蔽掉爱情歌曲，仅仅看画面，你还觉得它有趣吗？

一想到这样的现实，我们对于中国的Flash其实就没什么可以乐观的了。

Flash是一种谁都可以玩两下的软件，只要自己做出来高兴就好，正是Flash的这种平易性才赢得了这么大的热潮和这么多的创作人员。但是对于本书读者，我们有理由提出更高的要求，我们都想把动画做得更好、更精彩。

大部分爱好者凭想当然来创作，小部分真正加帧画动画的朋友又不知道从何处下手，即使加了足够多的帧，效果却没出来，动画看起来怪怪的。这都是缺乏传统动画训练造成的。

2.1 时间——变化

2.1.1 物理定律

1.重力

动画并不是拿起来就随便画的，它首先要符合一些物理学的基本定律，否则，动作看起来总有些怪异。

首先考虑这样一个最简单的动画：向上方抛出一个球，它升到一定高度，便回落到地面。我们应该怎样来描绘？

让我们结合实际，在Flash里来解决问题。打开Flash MX，首先用球状渐变画出一个圆球，然后选中圆球，再按F8键，将圆球转换成一个symbol（元件），命名为“ball”，如图2-1所示。

将场景定为100×600像素，将ball置于场景的底部，如图2-2所示。

下面，在时间线上将空白帧加到25（因为规定影片的fps（播放速率）为25，因此这是整1秒钟的时间）。在第25帧上按【F6】键，设置keyframe。在这一帧上将ball拉到场景的上方。在两个keyframe之间创建补间动画（Create Motion Tween），如图2-3所示。这样就得到了球向上抛的动作。

但实际经验告诉我们，这个上抛的球不可能是匀速上行的，受地球引力的影响，它应该是减速上行，越到顶点越慢，在到达顶点的时候速度为零。因此必须对中间过程帧做速度的变化。选取过渡帧中任意一点，在属性面板上修改它的Ease值为75，如图2-4所示。

再回放这段动画，会发现它比较符合习惯中的印象了。这就是物理定律的运用。

下面再做出球体下坠的过程。其速度变化应该和上抛时相反，即离最高点越远，速度越快，其到达地面的一瞬间虽然速度为零，但实际上是“戛然而止”，即已达到了一个最高速度，触到地面，突然为零。

在球向下坠落之前，首先要让它在最高点“停留”一段时间。虽然在现实世界中这段停留时间几乎观察不到，但这是动画片的一种夸张。缺了这一点停留，有时候动画会失去许多乐趣。在第25帧后按几次【F5】键，加上几帧空白，然后再定好两个keyframe，中间同样用25帧（1秒钟）使得ball回落到原地。注意，在回落的25帧过渡帧中，设它的Ease值为-75，如图2-5所示。

类似以上的动画可能大家都做过，用的方法基本都如此，大多数人也能意识到加速减速的问题。通过调整一个数值就很容易改变物体运动的速度，这是电脑动画的方便之处。

在传统动画中，动画家必须将这个过程手工分格，从而体现出物体速度的变化。这更多地是来自于经验。传统动画的分格如图2-6所示。

请注意，这个分格既可以看成向上抛出，也可以看成向下坠落的分格情况。

如果将问题稍微复杂化一点，情况会怎样呢？比如说，一个球向斜上方抛出，它不会像上面例子中的球那样回到原地，而是落在比较远的地方，它走出的路线是“抛物线”，如图2-7所示。在这个过程中应该怎样分格？

可以将这个运动看成两种运动的合成，即上一例子中的垂直向上抛起、下落的运动和沿一条直线向前的匀速运动。在图2-7中，通过分格的方式可以很明显地看出这种合成。

这就需要积累经验了。现在将球单独提出来，大家都很好理解，它是合成运动，但在实际工作中碰到这样的问题时，尤其这只球仅仅是动画的一小部分时，是否有这样的意识？脑子中是否有一张这样的分格图？是否在Flash中使用动画指导（Motion Guide）直接为代表球的symbol规定好一条路径就可以了？

因此，在实际工作中应该灵活地考虑问题。比如，画一棵大树倒下的动画，其倒下也是一种变相的重力加速度运动。

2.重心

重力定律是最容易理解，也是最容易表现的。其实，动画中还涉及其他一些物理定律。重心就是一个容易被忽视的要点。物体的重心如图2-8所示。

前面谈到抛物线，如果抛出去的是一个可以旋转的东西，它的旋转会遵循什么规律呢？

实际运动中，旋转物体的运动规律是物体的重心沿着抛物线运动。

在图2-8（a）中，榔头围绕自己的重心旋转的同时，其重心沿着抛物线运动；在图2-8（b）中情况相同，虽然旋转着的是有生命的人体，但依然要遵循这个规则。

3.简谐运动

在重力作用下物体的运动速度发生变化，所以动画实际表现为物体运动间隔距离的变化。这种变化不仅仅限于重力起作用的场合。一般的物体运动都有间隔变化的情况。

例如一个比较沉重的箱子，想把它从a点推到b点。如果我们是那个推箱子的人，从对箱子加力的变化中就能体会出一些微妙的速度变化。读者不妨亲自试一试。

简单来说，在箱子推动的初期，想把它推离原地要费较大的力气，这时速度较慢；一旦动起来，费的力气要小一些，而速度变得较快；接近终点时，速度又会明显慢下来。

如果用动画稿上的分格来表示，可以画出如图2-9所示的简谐运动的情况。

这样的运动方式称为简谐运动。一切物体，从一个静止状态移动到另外一个静止状态，都要遵循这样的规律。

简谐运动的规律可以用圆周投影的方法确定，如图2-10所示。

圆周上的16个点是等距离的，将它们的位置投影于垂直的直线上，得出的分格是严格意义上的简谐运动。可以想象一下，一个点在这条直线上，按照从点1到点9再回到点1做往复运动的情况。将这条直线水平放置，就是图2-9。

制作动画时，无法精确地用这种方法确定分格，一般采用等分法代替。如图2-9中的分格，是将整个直线等分、等分、再等分……得到的。这样做起来比较简单。关于这种方式，请参考第1章中等分法的介绍。

简谐运动是经常用到的运动方式，这一点往往容易被大家忽视。如图2-11 所示的拉锯的往复动作就是简谐运动。

这个动作是一个循环动作。图2-11 中是两幅原画，表示的是两个极端位置，其他身体位置在这两个位置之间。如何分配加动画就要按照简谐运动来考虑。即越接近这两个位置时，速度越慢；处于这两个位置之间1/2位置时速度是最快的。

4.物理定律的应用

我们的工作是动画而不是科学实验，一切对物理定律的研究目的应该是更好地画出角色的性格特征、更清楚地交代故事情节。

物理定律的研究对象是无生命的东西，而动画中更多的是有生命的角色在做动作。这些有生命的角色做出这样或那样的动作完全是主动的，那么其运动规律的理论依据是什么？它留下的是一种什么线索（情节上的或性格上的）？物理定律的应用可以参考下面几个例子。

如图2-12 所示的是手的动作。图中手指指向远处的普通动作符合上面介绍的简谐运动规律。从分格上可以看出，它开始时加速，结束前减速。

如图2-13 所示的是比较激烈的手的动作。可以想象，这可能是角色在严辞指责什么。他包含一个预备动作（第1～5帧），手很快伸出（第6～9帧），手回到最后的位置（第10～12帧）。

这个例子中包含了其他两个动画原理，即预备动作和物体的变形（第9帧的手臂被拉长了许多），在以后章节中会详细讨论。对比图2-12可以体会出分格对体现性格或情节的重要性。

如图2-14所示的是一个更加激烈的动作，充满了动画的戏剧性。我们可以注意到，第5帧到第6帧的直接过渡，体现了驴子愤怒一踢的力道。同时第6帧也有比较大的物体变形（拉伸）。

2.1.2 质量与受力

动画的重要任务之一是体现出物体的质量和受（发）力。当一个彪形大汉和一个小个子做相同的动作时，高明的动画家绝对要设计出不同的动作来体现他们的质量差别。如图2-15所示是胖子走路的动画。

在图2-15 中为体现角色庞大的“质感”，设计者使他在一只脚做主要支撑脚触地时，整个身体也随之压向这一边，另外，其身体的变形也比较夸张。

可以通过两个方面体现质量和力，一方面通过造型本身来表现；另一方面通过运动来表现。拉绳子的动画如图2-16所示。

在这个动作里，图2-16中的角色要将画面外的什么东西通过绳子拉进画面。注意他身体的移动顺序：

（1）首先是臀部（②）；

（2）接下来是肩部、手臂（③）；

（3）最后是拉直的绳子（④）。

动作的幅度取决于角色的拉力。这个动作顺序是不能错的。可以看到，通过这个动作完全突出了角色使劲的样子。

相反，如果情况是绳子将角色拉出画面，那么其顺序也相反，被绳子拉的动画如图2-17所示。

（1）首先是绳子动，拉直（②），带动手；

（2）然后是手臂，臀部也被带动（③）

（3）由于拉力很猛，整个身体被拉成一条直线（④）；

（4）被拉出画面，仅一双脚留在画面内（⑤）。

此例通过顺序的变换，很好地突出了绳子上的拉力。将图2-17与图2-16对比，可以看出它们一个是角色本身发出的力，另一个是外界突然给予角色的力。

如图2-18 所示的是典型的通过动作体现重量的例子。通过研究这个例子，可以明显地感觉到动画家的苦心经营——动画，并不是想当然就能画出来的。

图2-18 中的人举起榔头，狠狠地砸向地面。榔头的头部几乎和角色的头部一样大，可以想象它一定很重。通过这一系列动作设计，你是否感觉到榔头的重量了？

这里的序号并不代表实际的帧数，只是一个顺序，我们可以将其理解成原画。

（1）由于很沉，榔头的一端放在地下。

（2）为了将榔头举起来，角色做出两个动作：第一，他右脚向前跨出了一步；第二，他的右手向前伸，抓住手柄靠近榔头的地方。

（3）举起榔头，注意角色的腿曲起来，肚子在尽量向前拱。

（4）举到头顶最高点，注意，角色的腿伸直了。

（5）要往下砸的一瞬间，注意，角色的头部、胸、肩等已经向前移动了，但榔头的头部因为惯性原因，却拖在了后面，即它的位置相对于第4帧来说，还要向后、向下。实际上这里是它的最低点。

（6）继续砸，身体向前几乎水平趴下去了，臀部撅起来，这时最重的榔头头部拖后，它刚刚运动到最高点。

（7）砸到了地面，身体恢复了常态（恢复到1，可以看成一个循环动作）。注意榔头头部的变形。

从图2-18中可以看出角色的动作设计，处处体现出那个榔头的沉重。

再来看图2-18中的（a），它是一个错误的描绘。如果像那样举起榔头，整个角色会失去重心而向前跌倒，或者理解为那个榔头是纸糊的，几乎没有重量。

在本例当中，还综合运用了其他拖曳、变形等动画原理，在以后的章节中会有详细描述。

2.1.3 时间的安排与停顿

动画的关键是如何安排角色运动的时间。一段成功的动画，其精彩之处不单体现在对物体“运动”的描述上，同时也体现在对“停顿”或“静止”的描述上。

需要记住，“停顿”是为了更好地突出“运动”。

“停顿”听起来是很简单的事情，实际上并不是可以随意处理的。“停顿”运用得当，可以很好地体现物体的运动；运用不当，可能会使运动变得怪异。

如图2-19 所示为动作的时间安排，图中给出了一个动作的几幅原画。这是一个比较快的动作——打拳。动画片的原则是：越快的动作越要让观众“看清楚”。

首先，要给观众一个预感：这个角色要出拳了。从第1帧到第11帧都可看做是预备动作，这里的动作比较慢（花费了11帧）。

在第11帧后有几帧的停顿，在第17帧突然出击，第19帧表示打到了目标。

我们注意三点：第一，第17帧到第19帧仅仅2帧，显示动作的速度很快；第二，第19帧中角色的身体有比较严重的变形，体现出动作的力度；第三，角色的动作在第19帧又是一个停顿。这个停顿在动画片中是必须的，它要告诉观众打到什么了，产生了什么效果（打到目标产生的“爆炸波”延续2帧）。

然后动作回落到第21帧，最后结束在第27帧。

通过这个例子我们体会到动作节奏的重要性。需要特别强调速度和力度时，用比较少的中间帧过渡；两处停顿更不可或缺，它好像是在明确地告诉观众，请看清楚，是这样一个动作。

精心安排时间间隔和停顿，实际上是为了达到速度变化的目的。在图2-13中那个手臂前伸的动作中，应用了简谐运动的规律，如果想更清晰地表示速度的变化，应该如图2-20所示的那样。

图2-20中的（a）描述的是一个投球的动作。假如将这个动作用4帧来表现，则可以像图中那样安排。

（1）第1帧：手臂屈起，积聚力量的准备动作。

（2）第2帧：开始投球的一瞬间。

（3）第3帧：继续动作，注意和第2帧的距离。

（4）第4帧：投出去，动作完成。注意和第3帧的距离，将它与第3帧和第2帧的距离做比较。

这是一个典型的加速动作，手臂在上面的时候比较慢，越接近投出点越快。因此用这样的间隔安排来体现速度的变化。

如果是没有经验的制作者，很可能用一个平均的速度处理，可以想象，那样的动作将变得软绵绵的，毫无力道。

请大家注意，这里的力道不仅要通过速度的变化体现，而且还有其他两个细节：第一，球的变形，在投球的方向上它明显地拉长了；第二，球投出的时候，在手和球之间加上了一点速度线。

图2-20中的（b）是一个小狗踢球的动作，与投球的动作类似。这里用3帧来表示，更加简单明了。

（1）第1帧：腿向后撤，准备动作。

（2）第2帧：开始踢的一瞬间。

（3）第3帧：球踢出去。

这3帧的间隔不同：由于是加速运动，第1帧和第2帧的间隔小，速度慢；第2帧和第3帧的间隔大，速度快。

我们注意到，这里并没有小狗的脚实际接触到球的瞬间。这又是动画的一个技巧：将这一帧“跳”过去，可以使得动作更加流畅。同时也应注意，这里也有球的变形和速度线。速度线不单是在球和脚之间，腿部也有。另外一处值得关注的是：可能由于用力很大，小狗的身体跳离了地面。

这样一个小小的例子，通过细细分析会发现画出来的一切都在体现这一“踢”的力度。这是我们最应该学习的地方。在面对实际问题时，应该运用一切动画原理为角色的“做戏”服务。

谁是动画片真正的主角？是银幕上那些小猫小狗吗？——动画设计者才是动画片真正的主角。如果一个角色在银幕上表现不好，动作乖张而违背常理或死气沉沉缺乏生气，是动画设计者的“表演”不成功。我们是通过大脑，通过勤奋而灵活的手在表演。

总之要记住：速度快时，过渡帧数少；速度慢时，过渡帧多；需要强调时，停顿一下。

最典型的例子是“快速跑出画面”，如图2-21所示。这来自一个经典的Flash幽默短片“Smoky & the Fire”。图中连续截取了12帧画面。

动画片中，我们经常看到一个角色“快速跑出画面”的动作。这里的角色是一辆老爷车。在Flash中一般来讲，动画原理的应用都已经简化到最低程度。图2-21中共12帧。

（1）第1帧：车是静止的。

（2）第2帧：变形，这里仅仅将车的symbol做压缩。

（3）第3～6帧：继续变形到一个极端位置。这又是我们常讨论的“预备动作”。注意这里做的停顿，第3帧至第6帧停顿了4帧，仿佛在告诉观众：注意！这是个预备动作，下一步我要冲出画面了。

（4）第7帧：这一帧的处理特别具有Flash特色——车突然消失，完全跑出了画面。初看起来有些突兀，但正是通过这样的手法，体现出了车动作的迅捷。在影片开始，这辆老爷车缓慢地从远处喷着烟开来，这一帧里用这样干净利落的交代与前面形成了强烈的对比，大大地突出了戏剧性。

一般的动画中还要加一帧车尾部留在画面中的情景，如图2-17 最后一幅图中，我们还能看到角色的一双脚。但这里更加省略了。必要的是产生的烟留在了画面里。它可能是汽车喷出来的废气，也可以理解成普通意义上为增加气氛而产生的烟。

（5）第8～12帧，没有其他变化，只是烟在慢慢散去。这里用的也是Flash特有的简便方法——没有描绘烟散的具体过程，只用调整Alpha值来体现。

这样一个动作，加上很有趣的造型，再配上合适的音效就能特别突出幽默的气氛。

2.2 空间——变形

在2.1节中讨论的重点是时间的变化，即通过动作中帧的分配、停顿等来体现动作的轻重缓急和各种情绪。这一节主要介绍动画原理的另一个重要方面，即物体的变形。从空间的角度来考察物体的变形。我们将把一个角色从时间线上拿下来，看看它自己发力和受力时表现出的种种特性。

在讲时间变化时，我们已经接触了不少变形的情况。例如，图2-19中角色身体的变形；图2-20中受力的球的变形；图2-22中拉长的手臂和图2-18中最后榔头的变形。

变形无处不在，变形是动画的基本要素。动画片中几乎一切都要变形——不管是柔软的物体还是刚性的道具。在它受力或发力时，必须将它变形。

动画的魅力在于夸张，它提供给我们一般故事片所没有的梦幻气氛和特殊趣味。而从技术角度来讲，变形是最基本的夸张。

为什么初学者做出的动画看起来不好玩？最大的一个原因可能是初学者试图用“现实主义”的手法表现事物，而没有学会变形。动画拒绝现实主义。再形象一点说就是我们的动作是僵硬、死板的，专业人员的动作是柔软而富有弹性的。还记得小时候在电视里看的迪斯尼电视版的《米老鼠和唐老鸭》以及米高梅的《汤姆和杰瑞》那些影片吗？在那些影片里，情节已经退到一个次要的地步，而是整个用夸张激烈、追逐打闹的动作来充斥影片。还记得那些影片里的家具、道具等东西吗？即使是沉重的钢琴、卡车等，也无一不富有弹性，好像是橡皮做的。从技术上讲，这正是动画片的精髓。而同时期的《机器猫》等大量日本动画剧则走了另一条路，它们是通过有趣的情节、对话和配音来引导观众（近年来流行的《蜡笔小新》、《樱桃小丸子》等更是这种风格的典型代表），动画本身和米老鼠比起来是很简单的。我们从动画技术上考察得出的结论是：应该掌握经典的迪斯尼风格的动画技法，它是一切动画片的技术基础。

动画片如果失去变形夸张，角色失去弹性，就将不再具有独特的生命力或完全变成另外一种风貌的东西。

2.2.1 典型的变形——弹跳的球

还记得图2-7中的球吗？当时我们只分析了重力的因素，分析了时间的变化，对空间的变化——变形，没有多加考虑。

如果按照“一切都要变形”的理论，它是否也应该变形？

实际上，球的弹跳是典型的变形的例子，几乎所有的动画教科书上都讲到它。我们来看看，用Flash怎样实现球的变形。

一个皮球从屏幕左侧跳进来，在地下弹了两下从右侧跳出了屏幕。球弹跳的轨迹如图2-22 中虚线所示。

也许你会说，这有什么难的呢。先做一个symbol——用“圆”工具画出一个球，然后把它放置到场景中去。在开始的位置，即第一个关键帧，球在屏幕左侧的点A进入，按【F5】键，加22帧中间帧，在第24帧按【F6】键再设定一个关键帧，球在屏幕右侧的点E跳出。注意，E点应该比A点低，即虚线构成的三个波峰是渐次降低的，因为球总是越弹越低。定好这两点之后，在两点之间创建补间动画。

这时球的运动并不是以虚线为轨迹的，而是从A点沿一条直线飞到E点。我们在创建从A到E的补间动画层上加导向层【Add Motion Guide】，在导向层中按照虚线位置描出轨迹。然后按下【吸铁石】工具，使球按照轨迹运行。

到这里似乎就可以了，但仔细观察一下还有不对的地方。从 A点到 B点由于是下落过程，应该是加速，同样从C点到D点也是这样；而从B点到C点、从D点到E点情形应该相反，是减速运动。那么在Flash里如何设定呢？我们在B、C、D三个点设置关键帧，即在球所在层的时间线上，当球到达这3个点时，分别按下【F6】键设置关键帧，如图2-23所示。

A点至B点之间任意一帧，在属性面板上将其【Ease】值设成-85，如图2-24所示。

同样，把C点至D点之间的【Ease】值也设成-85。把B点至C点、D点至E点之间的【Ease】设为85。

现在可以来看看影片的效果。大多数朋友认为，做到这一步就是最好的效果了。其实，这离专业水平还有一点距离。

专业动画人员似乎已养成了这样一种习惯：一切都是富有弹性的，一切都得变形，决不保持它们在现实中的样子。如图2-25所示是他们设计的球弹跳的动作。

为了便于说明，把每个位置都画在同一个画面里。仔细观察，我们会发现以下两点。

（1）每个球只是在运动到最高点时才基本保持原状，其他位置都有或大或小的变形。在接触地面的一帧里它们被压扁，在接近地面的帧里他们被拉长，而拉长的方向是沿着运动轨迹的方向。

（2）每帧位置间距离的变化体现了物体运动速度的变化。在接近每个波峰的地方它们排列得比较紧密，说明球在这里速度减慢；越接近地面距离越大，说明球在这里速度加快。

可以按照这样的规律进一步修改刚才的动画（如果你一直跟着我们的讲述在操作，请将文件保存，以便于比较）。我们只需要在原来的基础上再加进几个关键帧，即在图2-25中的第5帧、第7帧、第12帧和第14帧位置上增加关键帧，如图2-26所示。

这几个位置是球沿着轨迹拉伸最厉害的地方。在这几帧里也将球按各自的方向拉长。在接触地面的keyframe里，将原来的球“压扁”，如图2-27所示。

这次再看一看生成的影片，可以把它和刚才那个没有做变形的球的文件同时打开，并排放置进行直观的对比。第一次的球是对现实世界的物理描述，有些死板；第二次的球被赋予了一种生命和活力，就像一只真正的橡皮球，这就是动画特有的魅力。

看优秀的动画影片时你可以仔细观察，除了背景以外，影片中几乎一切东西，只要它动了，它都在夸张地变形。虽然它在现实的物理世界中不变形或变形小到肉眼根本看不出来，但一旦进入到动画世界中，它必须有活力，必须变形，必须有弹性。

跳跃的青蛙如图2-28 所示。仔细观察可以发现，青蛙跳跃遵循的运动规律、变形规则和球弹跳的动作是一样的。我们可以将蓝色的路径想象成一个管子，在这个管子中，青蛙必须随时调整它的身体（变形）以适应管子方向的变化，这样它才能够“挤”过这个“通道”。

与橡皮球不同的是，它制作起来就复杂得多了，不像我们刚才可以对球的symbol简单地拉伸、压扁，而要画出青蛙在那一瞬间的特定形态。这就要求原画人员有很强的造型把握能力。

记住这个最基本的原理，后面的一切动画规律、时间规律都是从它引申开的。下次再做Flash时不要再简单地把一个现成的symbol摆来摆去了。要想想，怎么让它活起来，怎么让它显得有质量。

实际上，Flash已经为我们提供了很好的工具，让我们以最“经济”的手法做变形。针对一个symbol，我们可以对它进行transform（变形）操作，包括各种旋转（roate & skew）、拉伸（scale）、放大缩小（zoom）和翻转（flip）。这些“动作”不需要再进一步做什么，只是简单地拉动箭头即可。在图1-9 中采用的就是对兔子的头部做简单的transform操作，达到了很好的效果。

图2-21中，老爷车的挤压变形也是采用这种做法。相对于图2-28中的青蛙，这种变形要简单得多。我们仔细观察会发现，大多数Flash作品都采用这样的做法。

2.2.2 其他变形例子

如图2-29 所示为一个人受惊的样子。单看第8 帧看不出有多少变形，可能许多人在做这个受惊过程时直接就从第1帧跳到了第8帧，但动画家把中间过程处理得极具戏剧性：第5帧和第6帧变形得非常厉害，对照第1帧，几乎看不出来了。我们可以将第2帧至第4帧理解成一种“预备动作”，但这里的重点是变形。

猫的坠落如图2-30所示。这个猫坠落的动画是传统动画片中常用的噱头。注意第5帧中角色的剧烈变形，它受到了十分强烈的拉力（重力）。

需要注意的是，为增加戏剧性，不单是人物、动物这些有生命的角色能够变形，在动画中，无生命的道具也富有弹性。如图2-31所示为刚性的物体在受到强大外力的冲击时表现出来的弹性。

如图2-32中所示的足球在受到外力的一瞬间产生强烈变形。

如图2-33 所示的大炮是《都市三重奏》中画的大炮。在它发射炮弹时产生变形，好像炮弹是被它很费劲地“挤”出来的。这样可以产生生动的效果。

绝大多数的变形都是一种中间过程，在加之于物体的外力消失后，物体恢复原状。比如图2-33 中的大炮在放完一发炮弹后，应该恢复到第1帧的状态。

现在，可以这样总结变形的规律：第一，将一切物体都想象成橡皮制作的；第二，受力（或主动发力）时就变形，力消失就恢复原状。

下面我们看一些国外优秀的Flash作品。采用老方法，一帧帧地截取画面来分析。如图2-34所示画面来自于“Spawn of Satan”系列的第2集。这个系列是一个比较血腥的作品，但制作很具专业水准。

这里实际包含了两个镜头。我们逐帧分析。

第1帧正常状态，但角色已经准备出手了；

第2帧举起拳头，做出击的准备；

第3～6帧运用变形原理，将角色的symbol做简单地拉伸（压扁了一些），其中第5～6帧重复，造成停顿，强调了动作；

第7帧镜头拉近，实际上symbol和第6帧相同；

第8～14帧未做变形，但向左下方移动了symbol的位置，第12～14帧停顿3帧；

第15帧拳猛然出击；

第16帧拳头充满镜头，造成强大的视觉冲击力。

这个例子的重点是，它运用简单的变形手段制造效果。压扁的身体使观众感觉到角色在积蓄很大的力量。另外，注意其停顿的两个地方。为什么要停顿，请结合前面的内容思考。还要注意时间的分配，最后出拳“打到观众”时只用了第15、16两帧来表现。

再看下面摔倒的例子，如图2-35所示，选自“Wendal”系列的一集。

在这个动画中，角色捧着一只球摔倒在地下，球跳出画面。我们看看应用变形原理应该如何处理。

第1帧从画面外跌入；

第2帧继续跌倒；

第3帧跌倒，接触到地面，注意，这里角色的身体被压扁；

第4帧身体回弹（恢复），并且在惯性的作用下，向前滑行一小段距离；

第5帧再次压扁，但压扁的程度不如第3帧。依然向前滑行一小段距离，手中的球跌出去；

第6帧再次回弹；

第7帧回弹到一个最高点，同时，球由于压向地面，也被压扁；

第8帧身体从最高点再次压扁，但这次压扁的程度微乎其微，身体继续以惯性向前滑行一小段距离；

第9帧身体恢复到正常状态（没有变形），完全停止。

第10帧身体停止，球继续向前，落回地面，再次压扁，但注意，与身体的变化相同的是这次球的压扁程度也比第7帧要小；

第11帧球继续向前；

第12帧球跑出画面。

在这里，角色的身体好像是弹簧一样，经历了3次压扁变形，但一次比一次压扁的程度小，最后趋于正常。球的变形也遵循同样的原理。

可以对照图2-25的球和图2-28的青蛙来理解这一变形过程。

与图2-34相比，图2-35复杂的地方在于，它不是对symbol做简单的拉伸变形，而是针对每一种变形，画出了其具体的形态。

变形的例子在动画中俯拾皆是。我们再看同一影片中另一处例子。原来，上一例子中的球是怪物丢失的眼睛，于是怪物大怒，要袭击人了！怪物的爪子如图2-36所示。

这是一只怪物爪子的特写。它要向下挥击。

第1帧正常状态；

第2帧向上抬起一段距离；

第3帧继续向上抬起一小段距离；

第4帧挥下的一瞬间，爪子完全变形；

第5帧挥下时剩在画面中的一部分，注意有一些速度线；

第6帧完全挥出画面。

如果单看第4帧，怎么也不会想到是变形的爪子。为加深理解，关于这个例子的一些深入话题，将在本节的习题部分继续。

如图2-37所示的是被袭击的画面，也是变形的例子。

这个例子并不像前几个那样规范，但也体现出了基本的动画原理。一个家伙被红色的颜料袋袭击了。我们看连续的4帧：

第1帧角色没有动；

第2帧角色仍然没有动，红色的颜料袋飞入；

第3帧击中，角色的头部变形；

第4帧角色倒下。

在第3帧中，角色的眼睛被击中，引起整个头部夸张地变形，同时，颜料袋由于突然受到阻力，也有一个变形，从长条状挤压成西红柿状，但随着角色的倒下，其阻力消失了，所以它在第4帧中大致又恢复了长条状，随角色一起倒下。

这个看似潦草的漫画效果的动画，如果这样一帧帧地看，依然能看出不少学问。同时请大家注意速度线和逐渐散开的爆炸波。

再来看如图2-38所示的角色亮相的例子。这是连续截取的6帧画面。

这是常见的角色亮相的表现方法：从画面底部探出大半个身子。

第1帧露出一部分头顶；

第2帧探出大半个头；

第3帧几乎完全露出来；

第4帧到位；

第5帧在惯性下变形；

第6帧恢复到4的位置。

需要注意，如果第4帧和第6帧被认为是“正常状态”的话，第2帧、第3帧和第5帧就是一种变形。可以想象在第5帧中，有一个看不见的平板放在角色的头顶，限制他进一步向上运动，从而造成挤压。这里同样使用最简单的symbol拉伸法，达到了最“经济”的效果。

2.3 动作前后

在大致研究了动画原理中时间和空间的一些概念后，还剩下一个问题，那就是动作前后物体的反应。

在动画中，一个动作做出来之前，它必定有一个预备动作，目的是提醒观众注意；在这个动作完成之后，它很有可能继续产生一些影响，或者说一些附加的小动作仍然在进行。

我们要搞懂的是：这“之前”和“之后”的动作都是为了突出主要的动作，使之更醒目、更生动、更引人注目。

2.3.1 预备动作

预备动作为观众提供了一个线索，它告诉观众动作发生的方向和力度。

在现实生活中我们都有这样的经验：当我们想狠狠打出一拳时，必须先将拳头向后收回来积聚力量，然后再快速击出。这样，打击力度才能达到最大。

需要打击的力量越大，拳头收回得越要充分。这就是典型的预备动作。

如果单独看拳头收回的动作，这一动作和主要动作方向是相反的。大多数预备动作具有这样的特征。预备动作和变形往往是密不可分的。动画由于要对现实生活做夸张的描绘，它对于预备动作则更加关注。

如图2-21中的老爷车冲出画面前被压扁，就是一种预备动作。压扁可以认为是在积聚力量。

如图2-29中的人，从第2帧到第5帧实际上都是预备动作，只不过比较夸张而已。我们可以做这样的实验，将中间的过程都盖起来，只露出一头一尾的第1帧和第8帧。我们也可以理解，这是一个人受惊了。但加上中间的预备动作和强烈的变形，它就从现实中的动作进化为一个动画片中的动作。甚至可以说，这中间的几张原画包含了全部动画的精髓。

动画大师哈拉斯对预备动作是这样表述的：

“当银幕上有一些静止的物体时，观众会在它们之间平分其注意力，如果其中一个物体突然动起来，所有的眼睛在1/5 秒之后都将转向它。动作实际上是能吸引注意力的。因此，如果在主要动作之前有一准备动作，例如在踢之前将脚向后缩，观众的注意力将会集中到脚上。这就能保证观众会注意到踢的动作，“准备性动作的长短会影响到随之而来的主要动作的速度。如果能把观众引导到将要发生的事情上，那么当这动作发生时，即使非常快，其线索也不会被观众所忽视。如果没有前面的准备，后面发生的极快的动作将会使观众毫无准备，不清楚发生了什么事。在这种情况下，这个动作必须放慢一些”。

抓东西的预备动作如图2-39 所示，图中角色想抓起桌子上小昆虫之类的东西。这是一个需要速度的动作，那么他必须做出一个类似图2-39中②那样的预备动作。

如图2-40所示是一个激烈的动作，它的预备动作更加夸张。请注意图2-40中②的动态线体现出动作的幅度。

如图2-41 所示的小熊要挖金币。它在将手伸进金币堆里之前，必然要做出一个夸张的预备动作。请注意，在动作中它的眼睛都闭上了。

在图2-42 中，角色要快速走出画面。它不能像前面的老爷车那样采用压缩的方法，于是它做出一个姿势。可以想象出，这个姿势走出去的动作比较快。

如图2-43所示，图中表现一个牛仔大吃一惊的场面。第2帧作为预备动作也是不可或缺的。注意这个动画中表现出的夸张：第3帧中角色身体的拉伸和手的变大。

学习了预备动作之后，可以对照以前自己的作品反思一下。初学者往往忽略了这一关键步骤。其实，在观看动画片时，我们都看到了预备动作，但没有意识到或把它下意识地“想当然”了。动作缺乏预备动作，角色就缺乏弹性，于是导致动作节奏不对、表现突兀并且生硬。

下面再来看看国外优秀Flash作品中“预备动作”的一些例子。

如图2-44所示的小狗是“Bark in the Park”中的连续3幅截图。这个例子实际上和图2-43中的牛仔很相像，但在Flash中处理起来更简单。

第1帧看到了新衣服；

第2帧预备动作，我们看到，这里将小狗的头做成单独的symbol，并对其压扁；

第3帧拉长的头部，表示吃惊。这个头部换成了另一个单独制作的symbol。

想象一下，如果缺少第2帧，直接跳到第3帧，动作是否显得突兀了？

如图2-45所示为截取自名为“Bee”的短片。这是一部剪纸风格的Flash作品。这个动作是表现蜜蜂发起攻击。

第1帧正常状态；

第2帧压扁；

第3～5帧有3帧停顿，继续压扁，到极限位置；

第6帧开始窜出；

第7帧窜出，身体拉长；

第8帧出画面，留下一阵烟；

第9帧完全出画面，烟留在画面内，继续扩大。

这个动作与老爷车的例子基本相同。这一类也是预备动作的最简单应用。

如图2-46所示的是恐怖系列片“Little Death”中的一个场景，表现小骷髅跳下树的情形。

第1帧正常姿势；

第2帧预备动作开始，身体向下屈；

第3～4帧屈到最下端，停顿第2帧；

第5帧开始跳；

第6帧跳出去。

这个动画需要注意的是，角色被分解成几个单独的symbol（头、身体），这样在变形过程中可以更加灵活地分别处理。

通过以上几个例子，我们可以看出预备动作和变形是紧密联系在一起的。

2.3.2 追随动作

预备动作发生在主要动作之前，而追随动作发生在主要动作之后。

追随动作一般指柔软的物体运动时的特性，或者一个系统中动作先后的顺序。在一个系统中，主要动作完成后，可能联动的部分还需要继续进行自己的动作。追随动作，一般用来体现柔软物体的质感。

下面是哈拉斯对追随动作的表述：

制作物体附属物的动画，例如衣服的后摆或帽子上的羽毛的动作，是不能与该物体所依附的物体本身的动作同样去做原画的。它们的动作多少有些独立性。所以，如果不按照附属物的动作一张一张画下去，很难预见它们在几格之后的具体位置。

物体附属物的动作取决于：

（1）角色的动作；

（2）附属物本身的重量和柔韧性的程度；

（3）空气的阻力。

哈拉斯为我们详细描述出了追随动作的情况。下面来看具体的例子。

如图2-47所示为哈拉斯所描述的羽毛的动作。

在这个动画中，主体是头部，主体动作是头的转向，羽毛是跟随动作。

第1帧静止的；

第2帧头开始转，柔软的羽毛并没有马上跟随头部一起转动，而是垂了下来；

第3帧当头部转到1/2处时，羽毛才开始转动；

第4帧当下半部分羽毛已经固定在新位置时，上半部分羽毛仍在颤动；

第5帧羽毛呈现于新位置。

羽毛很轻，而且很容易受空气阻力的影响。因此，镶嵌在帽子上的羽毛必须用追随动作的方法处理。从图2-47 中可以看出，相对于帽子的运动，羽毛总是滞后一点，为便于记忆，可以简单地将追随动作理解成“慢半拍”。

下面来看一只简单的狗头，如图2-48所示。

注意它在【向前】、【向后】、【停止】的过程中耳朵的运动规律。柔软的长耳朵也被看成追随动作最好的体现者。狗耳朵的运动如图2-49所示。

第1帧头开始向前运动，这时耳朵拖在后面一点；

第2～4帧头继续向前运动，至第4帧到达最前端，在这个过程中，耳朵被逐渐拖到后面，在第4帧它被拖到最后端的位置，和头的位置形成鲜明对照；

第5帧头从最前端开始向后移动，但耳朵在惯性的驱使下预备继续向前运动；

第6帧头完全停止，但耳朵继续向前移动，比上一帧位置更靠前；

第7帧头静止，但耳朵达到前方极限的位置；

第8帧头静止，耳朵到此时才回到静止的位置。

这个例子中耳朵的柔软性是考虑的重点。为更好地理解，请看如图2-50所示的狗的耳朵。

在图2-50 的（a）中，狗从静止突然起动，向前窜去。耳朵被拖在后面；（b）中，狗从奔跑状态到静止，当狗完全停下来时，耳朵继续运动，经往复摆动，最终停止。

请注意图中每个耳朵根部（用圆圈代表）的位置，看看它们的间隔在加速和减速中的变化。通过以上的讲解，可以更好地理解“慢半拍”的特性。

反过来想，如果狗的耳朵和狗头的动作完全合拍，那么它柔软的性质就无法体现，好像是一只铁耳朵。不妨将图2-49中的例子在Flash中实现一下，把狗头做成单独的symbol，耳朵可以简单地画出。

在上面的几个例子中，要注意的是：柔软的物体和运动主题的连接点，即耳朵和羽毛的根部。这个连接点是和运动主体的移动保持一致的，但它带动的整个柔软物体将落后半拍。

请注意羽毛例子中的第4帧，与帽子相连接的羽毛根部与帽子的动作一致，但羽毛整体要被这一点拖动。

追随动作最常见的是用来描述动物的尾巴，尤其是像松鼠这样的大尾巴。请看下面如图2-51 所示的松鼠的尾巴。

这是布莱尔的经典原画——松鼠“跑跳步”。我们注意它尾巴的运动——在身体的拖动下或者更准确一点说，是被与身体连接的那一点的拖动下，尾巴显示出明显“慢半拍”的特性，当它整体向下移动时，松鼠已经向上运动了，反之亦然。通过追随运动，很好地体现出了蓬松的大尾巴的质感。

为更好地理解这一点，如图2-52所示的是另外一只松鼠的例子。看看这只松鼠的尾巴在跳跃和身体静止的状态下是怎样摆动的。

下面总结动画中尾巴的拖动。动物尾巴如图2-53所示。

动物在奔跑过程中，其高度不可能维持在一条直线上，因此图2-53 中的连接点在一条曲线上上下波动。当连接点在比较高的位置时，尾巴的整体还并没有到达最高点，或者说尾巴达到最高点时总比连接点的到达慢半拍，反之亦然。

2.4 习题

（1）把图2-7中描述的“抛物线”运动的球做成Flash动画。

（2）下图是一棵大树倒下的画面，请为这个动画分格，并完成它。

（3）在图2-36的例子中，请大家考虑：

第一，第2帧与第1帧中爪子的距离大于第3帧与第2帧中爪子的距离，为什么？

第二，第4帧和第5帧的颜色有变化，是怎样变化的？为什么要变化？

第三，第6帧的完全空白有什么作用？提示：请结合之前讲的“停顿”考虑。

（4）图2-38的例子中，请大家考虑：

第2帧、第3帧和第5帧中变形的“方向”（拉伸方向）是否不同？请说出它们采用各自方向变形的道理？

（5）请用最简洁的语言总结一下本章讲到的几条动画原理——越简洁越好，以便加强记忆。