当下最流行的Motion Graphic（MG动画），你知道多少

2020-03-20 10:28 发布

幕后 | 后期分享

随着社会的发展和时代的进步，设计也在不断更新，视觉表现形式越来越多样化。如果你喜爱平面设计，一定听过时下最流行Motion Graphic。

Motion Graphic 简称MG，全称应该是Motion Graphics Design。如果从字面翻译，通常被翻译为动态图形或者运动图形。广义讲是一种融合了电影与图形设计语言，基于时间流动而设计的视觉表现形式。

现如今，它是一种现在非常流行的动画分支，更像是介于平面设计与动画片之间的一种产物。动态图形在视觉表现上使用的是基于平面设计的规则，在技术上使用的是动画制作手段。

越来越多的交互设计师开始涉猎mg动画。无论是为了更好的表现交互原型，或者设计微交互动画，又或者为了炫技，mg动画成了交互设计师进阶的普遍需求。

简而言之，动画和电影都需要用来讲故事，具有叙事性。而Motion Graphic 通常更为短小精悍，题材、手法、风格包容性强。既可以用来讲故事，也可以传达观点，表达情绪，甚至可以没有意义，只是为了有趣。

轻简的特性也成为设计中的一个点睛环节。从这一点上来说，MG的门槛更低，成本更低，上手也十分容易。最主要的是，小身材却有大作用呀，无论是在艺术创作还是商业空间中都有广泛的应用。因此，这么流行也就不奇怪啦。

那如何制作一个有趣又有生命力且符合逻辑的动效呢？需要着重了解以下这4个物理特性，就能解决所有基本问题。

1 阻力

大家在做动画的时候很容易考虑到惯性，惯性往往是物体自身的特性。阻力则是外界事物对物体产生的影响。但当我们看不见这个外界事物的时候，就会忽略这点。

小车运动中，它上面的旗帜看上去是不是很奇怪？这就是忽略了阻力对对象带来的影响。

材质相对较轻的旗帜会比车子更容易受到空气阻力的影响，这样看上去才比较符合现实。

2 惯性

惯性是动画中最常见的动态规律。也是最容易出效果的参数。我们调整物体的缓入缓出的幅度来表现不同质量的物体运动。

动画上方的小球是匀速接近磁铁，下方的小球是匀加速接近磁铁。哪个看上去更符合现实呢？你答对了！下方的小球表现出物体本身的惯性。当有外力突然吸引时，物体由于本身质量的影响，逐渐失去静止的状态，而不是瞬间。

动画下方表达的是柔软的小球，在当外力影响时，整个球体惯性分布不均匀，球体左侧和右侧产生了惯性先后速度差，产生了形变。当最终触碰磁铁后，惯性差导致球体左侧结束比右侧晚，产生了回弹。

3 透视

在二维动画中，透视是一个相对较难的表现形式。我们往往需要利用参照物来体现二维物体之间的空间关系。

我们在坐高铁的时候观察窗外，风景是这样移动的吗？树林、远山和更远的云层。三者由于透视的关系，是不会以相同的速度移动的。

「近中远」分别对应「快中慢」，利用不同速度来表现前后关系。我们利用参照物的差速动画，就能做出具有很好空间感的效果。

4 焦距

同样和透视一样，二维的世界很难表现焦距这个概念。但我们可以利用色彩和虚实的手段来模拟。

左边的小人在前？或者右边的小人在前？或者他们只是并排站立？由于二维的限制性，人们只能通过自己的想象来弥补三维空间的缺失。不同人会得出不同的结论。在这里我们可以通过颜色来做到简易的前后关系。颜色暗淡或明亮的可能由于光源关系，显得离我们比较远或比较近。（结合实际场景）

利用模糊，我们能表现出更好的空间效果和镜头感。这是利用绘画设计和平面设计中的虚实关系。

看到这里可能你最想要知道的是哪些软件可以做动效？

Adobe After Effects

AE这个软件我想都该知道，火得一塌糊涂，它目前属于设计师学动效的首选。

它的特点就是强大且牛逼。基本上要的功能都有，UI动效制作其实只是用到了这个软件很小的一部分功能而已，要知道很多美国大片都是通过它来进行后期合成制作的，配合PS和AI等自家软件，更是得心应手，Dribbble 上很多的大神都是用这个软件在show。另外因功能繁杂，学习成本高，所以入门门槛较高。

Adobe Photoshop

可能很多人都认为PS 只用来作图和处理图像的，并不知道PS 可以做gif，然而当AE没有火起来的时候，老设计师们都是用PS 做Gif，用Flash 做Demo。PS从CS 6之后开始进一步加强了动效的模块，现在的版本能够实现很多相对复杂的动效。复杂的效果不太容易制作，适合用来完成逐帧动画（如表情包里的简单小 gif）。