热评 Flora

真不错!!!满当当的干活,厉害

如何将生活的动态运动应用到工作中?实战案例来了!

一、前言

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

如何将生活的动态运动应用到工作中?实战案例来了!

如何将生活的动态运动应用到工作中?实战案例来了!

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

如何将生活的动态运动应用到工作中?实战案例来了!

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

如何将生活的动态运动应用到工作中?实战案例来了!

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

如何将生活的动态运动应用到工作中?实战案例来了!

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

二、生活中的动态

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

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

如何将生活的动态运动应用到工作中?实战案例来了!

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

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

如何将生活的动态运动应用到工作中?实战案例来了!

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

三、动态设计的要素分析

动态的过程可以简化为:元素经过有序的规则 A 进入画面后,维持一段动作,以有序的规则 B 消失或离开画面,再次有其他元素进入画面,由此循环。

规则 A:风格,节奏和影响

风格即元素的入场形式。形式本身没有严格的对错,但是它需要服务于具体的项目主题风格,比如国风、科技风、现代简洁风或者可爱的风格对应的元素进场是不同的,也可以使用一些通用的现代风格。

如何将生活的动态运动应用到工作中?实战案例来了!

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

如何将生活的动态运动应用到工作中?实战案例来了!

元素入场要满足自身特定的逻辑自洽,才能更加令人说服可信。比如数字可以采用计时、倒数等形式,花朵采用飘入或者淡入,很少会采用圆形或者方向遮罩。

总之不管是单个还是多个元素的入场形式,都要与主题风格统一,并满足自身的逻辑自洽。

节奏产生于对比,时间先后,速度快慢,大与小,亮与暗,前与后,一个属性的两个极限值的合理有规则的搭配就会产生节奏。对比较弱节奏就越不明显,对比越强节奏越明显,不同元素之间需要协同搭配才能产生不同的节奏感。

如何将生活的动态运动应用到工作中?实战案例来了!

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

如何将生活的动态运动应用到工作中?实战案例来了!

影响也就是元素带来的基于逻辑的二级动画效应,这与动画师生存手册当中 Secondary Action 附属(次要)动作类似,比如爆炸会产生烟雾、火星粒子或者轰鸣。

在强节奏下尤其需要强化元素的动态效果,我们可以添加多个由元素带来影响的二级动画,比如闪光、反向或者震动等等。又比如公交车起动和刹车时给乘客带来的惯性反应,这给运动带来连续性和逻辑性,可以让动态更具可信度。

规则 B:剪辑和转场

转场首先要服从于主题风格,其次才是选择如何转场。在这里以一个视频为例:

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

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

①the cut 硬接

②fade 淡入淡出,渐白,渐黑

③dissolve 叠化

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

如何将生活的动态运动应用到工作中?实战案例来了!

如何将生活的动态运动应用到工作中?实战案例来了!

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

⑥wipe 擦除,方向线性擦除,形状遮罩擦除

⑦passing 遮挡转场,借由镜头或者物体过场,比如墙体、物体的局部遮挡过场,维持动态

⑧whip pan 镜头的快速摇移

⑨smash cut 用高对比的元素对比剪接

⑩J、Lcut 前后镜头元素的提前或者延续交错

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

四、合理的节奏设计

1. 生活中的节奏设计

假设要为景区设计策划一个徒步游览活动,最摆烂的方案莫过于直接从起点走到终点,全程不提供餐饮和游乐环节。

但若想满足娱乐和宣传需求,甚至吸引游客付费参加,就要有意识地进行节奏设计。例如可以结合当地特色设计奖励机制,在合适的节点上为游客提供特定资源。具体来说可以在每隔 500 米设置一处当地调制的水酒服务,在三分之一处提供 B 等级的餐饮美食和游乐节目,在三分之二处提供 A 等级服务,终点提供 S 等级服务。

如何将生活的动态运动应用到工作中?实战案例来了!

2. 项目案例分析

回到项目案例中,确立整体风格后,我们需要对节奏进行有意识的设计。

处理单页面,除了画面中元素本身的节奏变化,也要注重多元素之间的层级关系。若存在多个页面,还要统一考虑多个页面之间的层级关系,主要元素或者主要页面需要更强烈的节奏设计。

以我们实际案例 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 页面是带冠军奖杯的引入画面。

如何将生活的动态运动应用到工作中?实战案例来了!

S 页面中“冠军”又作为该页面的 S 元素,其他比如成员信息作为 A 级元素,可以看到虽然 A 级页面中战队 Logo 也有相似的入场,但相比“冠军”的进场会稍微弱化一些,“冠军”在这里加入了亮光、震动、光效素材和飘散粒子,作为重点强调区分开来。

如何将生活的动态运动应用到工作中?实战案例来了!

如何将生活的动态运动应用到工作中?实战案例来了!

这样就会使得在完整的大屏动画下,页面与页面之间有节奏上的产生,同时在单个页面下又有每个元素间的节奏区分,由此就完成了一次相对合理的节奏设计安排。

五、总结

最好的灵感和参考是生活本身,动态无时无刻产生于日常生活中的片段,我们只需要仔细多观察生活,感受来自实际生活各个片段带给我们的不同情绪,抓取每一个节奏片段进行总结分析,就可以运用到我们的实际工作项目上去。

欢迎关注作者微信公众号:「ASAK」

如何将生活的动态运动应用到工作中?实战案例来了!

收藏 8
点赞 43

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。