动效设计中的物理模拟

Sponsor

动效设计并非空想的产物，而是对现实的一种抽象模拟，这意味着动效需要遵循现实中的一定物理法则。设计达人今天分享的这篇文章，通过对静态插画的动效化，再现动效设计的流程和思路，阐述动效设计中的物理模拟概念。话不多说，让我们跟着文章的思路了解动效设计中的物理模拟吧！

作为动效达人，我被问到最多的问题是：

我该如何开始学习动效设计？

对此，我通常直接回答：从物理学开始。我的回答吓跑了大多数的新人😂，但这是事实——真正热衷于此道的人不会因为一个问题而止步，他们追逐着永无止境的问题，我喜欢他们！❤️

每一周，我会在日程上留些空档，用来指导这些热情的朋友。我亲自和他们见面（前提是他们在印度班加罗尔附近），或者通过互联网交流。我喜欢这样做。😊

当然，我的努力只能辐射到我圈子覆盖到的人。我肯定的是，世界上有许多朋友想知道这些。因此，这篇文章就是最好的传达。

物理是唯一

当我说：“你从物理学开始吧”，我没有全错。物理通常让我们回想起在学校中被方程式和公式支配的可怕经历！

然而在现实中，物理比所有纸上的这些复杂东西都重要得多。它是自然的行为方式、物体的运动轨迹、事物的此起彼伏。

例如：知道什么时候举手抓住飞来的球、什么时候后退以尽可能地减小球对手部的冲击力，这是真正的物理学。

对现实世界的理解是你开始动效设计所需的所有物理学。

让事物生动起来！

这是Snehal Patil戴着圣诞帽，骑车送快递的图片。非常可爱，对吧？😀

骑车送快递的简单插画

我们可以说他是“骑”在车上，而不仅仅是坐在上面，因为他的另一条腿可以倚在地上。但那只是一个猜测！我们如何才能让观众感知到车是运动着的而不是静止的？答案是编排！

让我们开始做有史以来最设计师的事情：

分解问题——这次是字面意思！

插画中的元素分解后，可以将每个组件视作一个单独的实体，分别进行动画处理，然后再组装在一起。

编排

我确定了5个简单的补充，这些补充将使这副静态插画生动起来，让我们开始吧！😍

01. 车轮会旋转（很明显）

旋转很简单！After Effects有旋转选项，我们只需要间隔几秒钟加2个关键帧，以及调整角度的不同。然后，根据自然法则的建议，车轮每旋转一圈，我们将底盘、车轮和骑手的整个组件向前移动2（π）r的距离——唷！🙄

或者，我们可以先跳过这些难题，尝试一些轻松而复杂的技术。这个怎样？

摩托车的轮子在旋转

看起来很微妙，不是吗？这里，我们基于两个假设：

• 摩托车的速度很快，因此车轮的辐条看不见；
• 车轮的表面天然瑕疵，因此反射闪烁；

专业建议：可以用简单的白色圆圈和After Effects中的“修建路径”工具来创建闪烁。

这种闪烁的确给人一种运动的感觉，但距离真实还差得远。让我们看看下一个。

02. 摩托车的底盘会隆起

即使我们假设摩托车在平坦的沥青路上行驶（在印度简直不可能😛），由于避震器的作用，仍然会有节奏地上下运动，就像这样。

轮子旋转、底盘起伏的摩托车

感觉上好多了，对吧？但它仍然缺少一些东西。

03.骑手的身体自然活动

这里的骑手可不是装在紧身衣里的塑料模特，他是人类，应该表现出人类的动作。想象当你在骑摩托车时会发生什么，身体的不同部位会彼此关联地运动。例如，你的手肘的角度会变化、你的脖子和头会活动、你的背部会弯曲伸展等等，我们只需要模仿其中的一部分动作。

车轮旋转、底盘起伏和骑手身体活动的摩托车

你看到这里的额外动作了吗？如果有，那么你就拥有设计师之眼😃这些点很微妙，但是它们让整个结构增添许多活力。它们清晰地将没有生命的食物盒与有生命的人类区分开来。

专业建议：骑手的身体可以进一步地分解，每个组件都位于不同的图层上。然后在After Effects中巧妙地移动和旋转这些组件来实现人的动作。

骑手的身体可以进一步分解，每个部分都位于不同的层上。然后，可以通过在After Effects中巧妙地移动和旋转这些部件来实现人的动作。在角色动画的世界中，这个过程被称为装配。

04. 一点儿额外提醒

我们都知道圣诞帽的一端是松弛的，当骑手高速行驶时，它永远不会僵硬，它会扑哧扑哧地扑打飘摆，所以我们继续😇

轮子旋转、底盘起伏、骑手身体活动和帽子扑打的摩托车

帽子扑打的这个步骤非常容易上瘾，你可能会觉得有些夸张。其实我也做得夸张了！😆但是，可以控制夸张。

专业建议：只需在很短的时间内将帽子从一种形状变形为零一种形状即可完成飘摆。这比看起来还容易！

05. 最后的修饰

嗯……让我看看……车轮在按应有的样子旋转，底盘在按应有的样子起伏，甚至骑手和他的帽子也是应有的样子。但是，仍然没有任何迹象表明摩托车正在向前行驶，这或许是所有步骤中最简单的！

只要，

我们将整个组件（底盘+轮子+骑手）向前移动；

或者，

我们可以简单布置个城市景观，并将其向后移动——就像我们从暴力摩托、超级马里奥和魂斗罗等电脑游戏中学到的那样，相对运动，你看😄

最后一个…耶！

看……我们增添许多活力！

专业建议：这样创建一个永远循环的背景非常容易。你只需要将2个副本拼接起来即可。最后，仅揭示组成无限循环的那部分内容。

原文作者：Saptarshi Prakash
原文地址：https://medium.com/swiggydesign/how-i-started-motion-design-using-high-school-physics-fa6cdbf12cde
翻译作者：小谭 | UI设计师
编辑整理：铅笔头 | 设计达人编辑组

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。