动效缺少灵魂？掌握这一能力快速提升动效品质

引言 如何解决动效设计中细节突兀或者巨细无关的问题？本文将以一个2D人物的循环动画和一个界面入场动效为例说明设计过程中的主次关系把握。

作者：欧型兔

（本文内容由公众号“COTA五号”提供，转载请征得'同意。文章仅为作者观点，不代表GWB立场）

设计是相通的。动效设计与其他形式的设计至少在一个方面比较相似，那就是设计过程中的主次关系把握。

如果对此没有比较好的把握能力，你的作品极有可能会表现出下边两种主要的问题：

1.细节突兀，乱；2.巨细无关，怪。

动效中的主次关系与静态视觉层面上的类似概念可能会有重合，但未必都指向同一个元素。因为动效中的主次关系判断，是通过“力的来源”来衡量的。即整体运动是由谁驱动的，或者主要是由谁影响的。

如果你的动效细节比较突兀，整体上显得比较乱，通常是由于主次关系判断失误，或者具体的动作设计没有表现出图形元素间主驱动与被动的关系；巨细之间没有显而易见的关系，也显然是驱动和被动的表现出现偏差造成。

接下来，我们分别以一个2D人物的循环动画和一个界面入场动效为例来说明这个问题。这两个“动画”都有“多个元素构成”和“元素间有主次关系需要”的特点，因此非常适合用于说明此问题。

如果有这样一个人物，想要设计它的左右摇摆动画。

从图形的角度上来说，它的摇摆动作应主要由中部的圆形“大头”驱动，一个主要的原因是它看起来比较重，躯干是无法驱动它的。所以它就是本动画中的主要动作元素，可以将它的摇摆动作首先设计出来：

然后再根据头部的运动，将合理的腿部协调动作设计出来。如下图所示，腿根部显然是连接头部的，因此两腿都以腿根部为轴做左右旋转运动：

以相似的逻辑，将胳膊的伴随运动也设计出来。与腿部不同，胳膊要轻一些，因此摇摆的幅度更大：

如果头上还有其他附属物件，如下图这样显然不太合理。首要原因是它虽然跟随头部运动，但它本身的“物理”状态不受头部影响，因此显得僵直、假。

要改善这一点，可以为它设计伴随头部左右晃动而产生的晃动动作：

以上总共三组动作：头部、腿、胳膊、呆毛。其中头部为主要运动元素，而其他的部分全为次要元素，后者的运动可视为受前者运动驱使。另外，如果在每组中间增加少许的时间延迟，可促使整体动画更加生动。如果各组间的运动过于协调，反而显得生硬，增加时间错位一方面是客观如此，另一方面也增加“随机”性，从而显得生动。

假设有这样一个界面，需要为它设计入场动效。

此例平面设计特征非常明显：圆盘和人物是这个界面的主体元素，而三个横条则是圆盘上的附属图形，人物也可看作是圆盘的附属。按照这一显著构图结构来进行动态设计的构思时，思路就会非常清晰了。

作为主体的圆盘应该首先出现，并且“释放”出其他的元素。这至少指明两个设计特征：1，圆盘的运动特征决定其他元素的运动特征；2，圆盘与其他元素的时间先后关系。

所以第一步就是设计出圆盘的入场动画，这里依据它本身的图形特征，做了两层有时间错层的缩放动画：

第二步是圆盘“释放”人物的动画，这里将人物与圆盘的平面关系进行了解释，注意这里的人物缩放中心与圆盘不同，人物结构决定其重心不在视觉中心上：

第三步就是加入横条的动作。这里的设计为通用条目动画：横向上从左到右，这是为了符合圆盘的缩放扩张方向；纵向上以从下到上的顺序进行设计。主要原因是，这个界面的构造特征是上轻下重，即纵向靠上的物品看起来像从纵向靠下逐渐垒起来的。这时候如果将横条的顺序改成从上到下，就会有违该界面整体上表现出的物理特征：

本例的动态设计样式是本例界面设计样式可能性中的一种。如果以不同的逻辑进行拆解，可能会有别的方案。从纯设计层面上讲，只要是逻辑合理，符合动画设计原则的都是可接受的方案。

动效中主次判断的原则，简单总结如下：

首先，判断主体运动元素。即整个动态是由画面中的哪个部分决定的，或者驱动的，先对这部分进行动作设计；

其次，根据主体运动推断随动元素的运动。主体元素的运动决定，或者影响了伴随元素的运动。做完主体运动，就比较方便推断出伴随元素的运动，根据前后者之间的具体关系来进行细节设计；

最后，调整主体和伴随这两者主次的时间关系，通过简单的时间错层即可设计出相对合理的动画动作。

更进一步的，在以上基础上根据特有的设定，判断是否将相对通用的动作异化为特有风格。这一点通常通过添加特有伴随元素，或者对动作曲线进行微调来进行。