/“飘荡”类动效的几种设计方法【半周谈】103
干货2023-03-22

“飘荡”类动效的几种设计方法【半周谈】103


本文的“飘荡”指的是在处理某些特定界面附件美术元素时常用的动画手法。狭隘理解的话，这种动画是那类常在穗穗，小挂件，灯笼，条状柔性物如头发丝，飘带等物品上使用的动画类型。毕竟这些物件的动画本身就具备这样的物理特性。扩展一下理解，这个概念还能囊括一些形态不太固定物质的运动，如絮光、粒子等元素的动画，也可被归纳在这一统一概念下。这类物质也属于界面修饰上的附件，同时也有不太固定，看似比较随意的运动特点。
 

一、最简单的飘荡就是来回晃动。
 



 

晃动又分为循环晃动和一次性晃动。这种最简单的形式不仅限于上述提到的特殊物件，而是应用在更广泛的物件上。
 



 

比如晃动的图标、小红点等：
 



 

它们的曲线或是持续的，或是波动的，但总体上都属于循环动画，具备循环且抖动的共通特性：
 



 

1.单个循环内的起点与终点属性值相同；

 

2.一定程度的剧烈变化，引起注意但不过于抢眼。

 

二、当物件变得结构复杂一些时，飘荡动作会具象化为摆动。
 



 

当处理特定物件的摆动时，比如说处理一个穗类的入场随动，就得为它设置一个初始的角度，而不是从最终垂直的位置出发，这个原理看图就明白：    



 

这是一种每次入场只播放一次就会进入静置的动画，它的主要特征是有一个能量衰减的过程，所以它初始状态含有比较大的能量，为它设置初始角度的原因还在于这个能量是在入场时主体物件带来的，主体物件运动在入场那个瞬间已经在发生了，所以初始状态下它们往往会有比较大的角度：
 



 

主体停下来之后，它的能量需要逐步衰减。这时有两个特征，一个是摆动幅度越来越小，再一个是摆动时间区间越来越长。两者都意味着残留的能量的逐步成倍下降：
 



 

如此设计，这种小物件的运动就显得合理，组合在整体动效中时，就显得细腻。
 

三、当物件变得不那么纯粹，不是条状物，而是片状物时，飘荡动作会具象化为特定的类型。
 



 

如布、头发这类的柔性物体的运动方式。它们具备特定的运动规律，如以前文章中提到的传统动画中的处理方法：
 



 

这类柔性物体很多时候充当界面上的陪衬，是附属类的图形元素。往往需要持续性动作，比较多利用材质动画去完成：
 



 

《马力欧卡丁车8 豪华版》启动画面中的旗帜效果：

 

《跑跑卡丁车：飘移》结算画面中的旗帜效果：

《姜饼人王国》段位提升中的旗帜效果：

更复杂的，充当了主角的飘类设计，在spine人物动画中较为常见，通常做成循环态。这就又回到了“循环动画”+“飘荡动画”的设计形式。
 



 

当单纯讨论飘动动作时，这种循环态的更复杂状态为多层叠加状态。这种情况下通常的处理手段里，主要需要注意层次间的时间错层，偶尔需要注意互相间的互动关系：



 

再复杂一些，就主要靠美术元素的叠加了，比如增加
 粒子和其他元素，如云雾、絮光等，根据具体情况决定。


如《姜饼人王国》中“宝物升级”效果里，营造升级氛围时就用了多种美术元素叠加：

相对一般的情况下，就如下图《格兰骑士团》中的样式，为图标增添流动的絮光效果：


四、飘荡动画再复杂一些可以包括类火焰动画。
 



 游戏里的火焰也分几种，简单的，用序列帧，复杂的用特效方法，利用粒子或者走UV什么的，也可用与布料类相似的处理手段。



 

3D层面上的处理手段更多，如类似的Blender中利用置换去制作火焰效果（
 仅就效果设计而言
 ）：
 



 

还有些特效类的也相当于是飘，但实现原理其实很简单，用通道和贴图来回置换遮罩就可以，难点不在技术手段，而主要在设计手法上。
 



 

比如《黑帝斯》中的这种表现爆裂的效果，就综合利用了多层材质和粒子效果，辅以精细的动画设计，呈现出非常棒的效果，在诸多的游戏中属于独一挂：
 

五、粒子的飘荡运动
 



 

粒子可看作是被“稀碎”化的复杂小物件。粒子运动也分一次性状态和持续状态两种形态，总体上控制好粒子生命、物理环境即可，难点也在具体的设计手法上。
 



 

比如想要炸的效果，就得是一次性状态，是否需要粒子有垂直下落，是否需要有乱流，都要看具体的环境状态。

 



 

如《绝对演绎》中表现新功能解锁的效果里，就利用爆开效果来表达这种含义，这里就用粒子对这种动作进行辅助，此时的粒子形态就得符合“一次爆炸”的动作样式：
 

而想要参与营造氛围感时，粒子所需形态就属于持续状态，这时需要考虑的因素也是类似，根据具体的需要，控制粒子的生命周期、形态变化、数量以及粒子贴图样式和材质。

 



 


 



 

综上所述，我们从表现形式上把飘荡动作从规律到随机进行了排布。但这只是通过表现形式所进行的一种概念上的人为划分，不影响也不改变每种动画的本质，目的是有助于你更好的理解这些林林总总的表现形式。
 



 

这不改变一种本质，即飘荡运动是界面动效中最接近模拟现实中不规则运动物件的一种概念。并且除了这种看起来的不规则特性，它们另外的一个巨大的特性是，必然被主体物件的运动所驱动，这就要求我们在设计这类物件时，应首先考虑其所处的具体环境。

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

TAGS:

相关文章