如何将生活中的动态运动应用到工作项目中？

ASAK

网易互娱 ASAK 设计团队，范围包括: 视觉、UI、交互、动效、视频和AR。专注于AIGC技术领域

2024-03-14浏览 11582,673 字 · 约 9 分钟

…

前言这是两张来自法国东南部肖维岩洞的岩画，经证实可追溯至3万6千年前，是世界上最早的形象画。其中有53幅「动态」图画描绘了马、狮子和水牛等动物，呈现出慢跑、快跑、摇头晃脑、用头碰尾巴等动作。

在伊朗被焚之城中挖掘出的陶碗，则描绘了五幅山羊的分解动作图画。

考古学家认为这是世界第一个展示动画概念的案例：旋转碗的时候可以看到这个山羊朝一棵梨树上跳去。

下图是在1832年，由比利时人约瑟夫普拉托和奥地利人西蒙冯施坦普费尔发明的费纳奇镜。它可以播放连续动画，是早期无声电影的雏型。

从史前文明诞生时出现的壁画，到18世纪费纳奇镜的发明，再到19世纪末电影技术的兴起，从传统动画以及定格动画的产生，一直到现今遍布世界的二维三维电脑动画，无不展现着人类对动态事物的好奇和感知，并热衷于利用当下技术去模拟真实的动态世界。

生活中的动态

广场上仪仗队整齐划一的动作，让我们感受到纪律井然和庄重严肃。

乡野里风拂过麦田，远方一簇簇的麦秆随风摆动，此起彼伏，给人带来一种沁人心脾的舒适。

巨浪猛击礁石，海鸥被惊飞四散开去，没有整齐划一，而是随机错落，富有自然的韵律感。

城市街道里车水马龙，红绿灯以固定频率控制交通，多样的动态节奏呈现出城市特有的韵律，带来喧闹繁杂、充满活力的感受。

日常生活的片段都蕴含着特定的动态规律，小到谈笑间的抑扬顿挫，大到精心排练的宏大管弦乐演出，从中都能挖掘出不同的动态片段启示。

动态设计的要素分析 动态的过程可以简化为：
元素经过有序的规则A进入画面后，维持一段动作，以有序的规则B消失或离开画面，再次有其他元素进入画面，由此循环。 规则A：风格，节奏和影响 风格即元素的入场形式。形式本身没有严格的对错，但是它需要服务于具体的项目主题风格，比如国风、科技风、现代简洁风或者可爱的风格对应的元素进场是不同的，也可以使用一些通用的现代风格。

确立了主题风格之后，需要对不同元素进行对应的风格处理，比如国风（包括硬朗的笔刷风格，以及相对舒缓的水墨风格）、卡通风格（有合理又夸张的变形扭曲，也有怀旧复古的低帧定格效果）、科技风（有信号失真，跳闪或者是颜色分离等）

元素入场要满足自身特定的逻辑自洽，才能更加令人说服可信。比如数字可以采用计时、倒数等形式，花朵采用飘入或者淡入，很少会采用圆形或者方向遮罩。总之不管是单个还是多个元素的入场形式，都要与主题风格统一，并满足自身的逻辑自洽。节奏产生于对比，时间先后，速度快慢，大与小，亮与暗，前与后，一个属性的两个极限值的合理有规则的搭配就会产生节奏。对比较弱节奏就越不明显，对比越强节奏越明显，不同元素之间需要协同搭配才能产生不同的节奏感。

单独以时间先后这个概念来说，它常用于多个元素的画面入场，在无特定情况下，我们会对多元素的动画尽量安排线性或者随机的时间入场，它源自于类似骨牌推倒的舒适感或者自然间无序随机的协调感。整体效果只要做到错落有序，间隔不宜过大即可。

影响也就是元素带来的基于逻辑的二级动画效应，这与动画师生存手册当中Secondary Action 附属(次要)动作类似，比如爆炸会产生烟雾、火星粒子或者轰鸣。在强节奏下尤其需要强化元素的动态效果，我们可以添加多个由元素带来影响的二级动画，比如闪光、反向或者震动等等。又比如公交车起动和刹车时给乘客带来的惯性反应，这给运动带来连续性和逻辑性，可以让动态更具可信度。 规则B：剪辑和转场 转场首先要服从于主题风格，其次才是选择如何转场。在这里以一个视频为例： https://www.bilibili.com/video/BV1Hj411N7CC/?spm_id_from=333.337.search-card.all.click&vd_source=a6d36c7a6d9e5912ee4aa3f843502a4e

在以上视频中出现了这些过场手段：

1.the cut硬接

2.fade淡入淡出，渐白，渐黑

3.dissolve叠化

4.match cut匹配剪接，利用前后两个的镜头相似的元素或者逻辑关系

5 iris模拟早期相机光圈打开或者关闭

6.wipe擦除，方向线性擦除，形状遮罩擦除 7.passing遮挡转场，借由镜头或者物体过场，比如墙体、物体的局部遮挡过场，维持动态

8.whip pan镜头的快速摇移

9.smash cut用高对比的元素对比剪接 10 J、Lcut前后镜头元素的提前或者延续交错

整体来说，一切以逻辑合理性、元素相似性、动态连续性等为思考方向。

合理的节奏设计 生活中的节奏设计：假设要为景区设计策划一个徒步游览活动，最摆烂的方案莫过于直接从起点走到终点，全程不提供餐饮和游乐环节。但若想满足娱乐和宣传需求，甚至吸引游客付费参加，就要有意识地进行节奏设计。例如可以结合当地特色设计奖励机制，在合适的节点上为游客提供特定资源。具体来说可以在每隔500米设置一处当地调制的水酒服务，在三分之一处提供B等级的餐饮美食和游乐节目，在三分之二处提供A等级服务，终点提供S等级服务。

项目案例分析：
回到项目案例中，确立整体风格后，我们需要对节奏进行有意识的设计。处理单页面，除了画面中元素本身的节奏变化，也要注重多元素之间的层级关系。若存在多个页面，还要统一考虑多个页面之间的层级关系，主要元素或者主要页面需要更强烈的节奏设计。以我们实际案例VSBumper的动态节奏设计来说，由于VS Bumper常规是单个页面，所以处理不同的元素层级节奏是重点。首先我们需要对手上的资源也就是视觉元素进行划分类别。各个元素之间的主次关系，常规分成S，A和B三个等级依次减弱，或者是SAA的等级设计（SA主次，AA平行）。毋庸置疑，S的处理要最醒目，动态效果要最强也要更丰富，而AB或者AA就要相对更弱，由此元素动态之间产生了对比，也就产生了节奏感。在下面的VSBumper案例中，S元素是VS字样，A元素是战队和成员信息，B元素是周边碎片或者是项目Logo。所以对VS的动态是要突出处理的，其他级别的元素动态做弱化处理，各个层级的元素进场时间也要尽量错开。

在处理单页面维持动态时，以我们的循环为例，同样区分主体和次体元素，整体要尽量避免画面的完全静止。保持次体元素的动画的同时，不能夺取主体动态的吸引力。还是以上面左边的VSBumper为例，在元素完全入场后，在维持大块玻璃的运动同时，周边的碎片玻璃、底图圆环和中间更碎的部分同样也要做相对微弱的动态处理。在处理多个页面时，以我们带intro的大屏制作为例，它往往包括多个页面的动态制作。同样首先也要将这几个页面进行类别划分，也就是大框架下的SAB细分。着力强调S页面（包含元素S-S，S-A，S-B等元素）的动态效果，强调S-S元素的动态效果。在下面的冠军大屏动画案例中，涉及到多个页面的动态处理，S级页面是最后的冠军页面，A级页面是冠军Logo的进场页面，B页面是带冠军奖杯的引入画面。