/动效设计基本问题自检-P5 动效设计中的动作曲线 1/2【半周谈】097
干货2023-05-02

动效设计基本问题自检-P5 动效设计中的动作曲线 1/2【半周谈】097



 
本篇系自检指南系列的最后一趴，回顾起始篇所提及的框架内容，动效设计师对自己的作品进行自检时，应注意以下几个方面的问题：
 



 

第一，基本的节奏问题；
 

第二，对图形的理解和再创造；
 



 

第三，功能的具体表现形式；

 



 

第四，色彩和造型设计；
 



 

第五，调好曲线。
 

前边的部分我们讨论了前四项，这次讨论的是动作曲线。
 


 
正如过去提过的，动作曲线是构成动效的最基本“砖瓦”。我们以往文章中多次提及一些曲线的细节设计，并且强调过，看似稍加修改的细节，能对整体效果有很大的影响。
 


 
针对比较基础的部分，动画曲线的设计中最容易忽略的，大概都包括这些：

1.没有为动作添加曲线；

你没有看错，确实有相当一部分设计师没有这一习惯。并且还纳闷，为啥我动作都有，效果却不如别人？我们讨论动作曲线的前提是得“有”曲线。所以你至少需要养成为关键帧添加曲线的习惯。

不过，的确有一些特定的动作是不需要有动作曲线设计的，比如大部分透明度变化，以及一些需要被设计成均匀速度的循环动画的动作曲线。

比如下图所示的循环转动效果：
这是个单个循环为1秒的动画，该效果中的首尾关键帧之间是没有运动曲线的，或者说，它的曲线是一条直线：
但如果给这段动画的首尾关键帧加上缓入缓出，就会变成这样的效果：
显然，它在每个循环区间内都有忽快忽慢的变化。此时曲线为：


它体现出的效果是很容易理解的，这段缓入缓出使它在每个单位循环内的起始与结尾阶段的运动速度偏慢，因此每段循环的首尾相接处，都处于速度较慢的阶段。

除非想要设计一段单位区间内运动速度有特定变化的循环动画，最好不要为其动画添加运动曲线。
针对这一点，需要注意两方面：
①要养成为所设计动作添加曲线的习惯；
②根据实际情况判断特定的动作设计是否的确需要曲线。

2.没有顾及前后关系，盲目设计曲线；

有时候同一个动效中，前后两个元素有互相衔接的关系，虽然有时候两个元素的动作曲线单独看都是OK的，但是连起来看却感觉非常别扭，这时候问题大概率就是前后的动作的曲线设计未进行衔接导致的。

比如下图所示，常见的框体嵌套结构的界面入场：
灰框入场之后，其内容物三个绿条稍微滞后入场。

乍一看这个动画似乎没有什么问题，这里所有的横移动作都套用了常见的快入慢出曲线：

但是仔细感受会发现，灰框和绿条之间在前后接续的瞬间，有一定的“停顿”，这个感觉稍微削弱了灰框右移时的顺畅动作。问题就出在绿条的横移曲线上，拿其中一条绿条的横移曲线与灰框的曲线，在时间轴上比对：

在红箭头所指的一刻，灰框正保持一个较大的速度，且速度仍在变大过程中。绿条速度则为零，虽然稍等它的速度也会快速提升上来。但正是因为这一瞬间两者在速度上的巨大差异，造成整体上右移时我们感受到“停顿”的感觉。

一个解决方案是为绿条增加透明度变化，就像灰框入场起始阶段的几帧那样：

这时，“停顿”神奇的消失了。看下图：
黄框内是透明度变化关键帧，可以简单的认为，在这个时间区间内我们是看不到绿框的。对比下图黄色箭头所指的同一时刻上，横移曲线的点位：

这时候绿框的速度正从最高速度逐渐降低，这导致它与此时灰框的速度状态相协同，此刻灰框处于基本完成入场动作的状态，也正处于速度逐渐降低的区间。

也就是说，我们通过增加一个透明度变化，将绿框出现瞬间的0速度状态给隐藏了。通过隐藏“停顿”状态来改善这一感受，与前述元素协同。

根据这一逻辑，很容易想到另外一个类似的办法，即将0速度状态所保持的时间将至最少，少到我们无法觉察：

这个办法是将绿框的横移曲线左端调整得极为陡峭：

这就意味着，绿框横移曲线中几乎不存在速度为零的瞬间。从上边的效果也能看出，刚开始的“停顿”感受已经消失了。

很简单的例子，但是可以总结一些规律，供更复杂的情况使用：

①元素间状态衔接出现问题时，得是后续元素协同前述元素；
②设法使后续元素出现那一瞬间的状态，调整到与前述元素相对协调。

3.不遵守运动规律的曲线；

有一些曲线非常好用，比如说快入慢出，就被我们普遍用于通用型的入场动画中。类似的还有摔入类的动作曲线。但是这类曲线仅仅针对通用型设计，一旦应用到有特殊动作含义的图形元素上，就需要多加考虑，而不是任一情况都可以无脑套用。尤其当还要照顾到运动规律时，就需要进行额外的，或针对性的细节设计。

比如我们在《半周谈-064》中提到过的一个示例：
设计这种略显特点的多元素动画，需要先搞明白各个组件间的运动关系和互相影响，其实就是针对运动规律去分析的。此例在当时有过比较详细的分析，此处从略。

又如下方这种结构稍显复杂的动效：
右上的摆穗如果只按照通用型曲线去做，倒是不影响功能，但由于不遵守这种物体的运动规律，就会显得单调：
这方面需注意以下两点：

①套用可以，但干涩，需要照顾实际情况；
②不管用什么设计方法，运动规律是第一准则。

关于曲线的部分，剩下还有四个方面需要注意，篇幅问题我们将在后续文章中继续展开。

这里是COTA五号，关注我们，共寻设计本质。
本文完。
 

本文来自微信公众号“COTA五号”作者：欧型兔（ID：cotadesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章