老司机干货!4个技巧让你玩转轻量级动效

MG动效动效设计轻量级动效
最美UI小编收集整理的老司机干货!4个技巧让你玩转轻量级动效教程,供你快速学习UI

MG 全称是 Motion Graphic(动态图形),是一种现在非常流行的动画分支。它更像是介于平面设计与动画片之间的一种产物。动态图形在视觉表现上使用的是基于平面设计的规则,而在技术上使用的是动画制作手段。简单来说,这类动画往往都以简约的几何图形来描述物理特性,但表现力极强。轻简的特性也成为 UI设计中的一个点睛环节。

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

四大心法:阻力、惯性、透视、焦距。

一、阻力

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

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

老司机干货!4个技巧让你玩转轻量级动效

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

老司机干货!4个技巧让你玩转轻量级动效

二、惯性

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

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

老司机干货!4个技巧让你玩转轻量级动效

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

老司机干货!4个技巧让你玩转轻量级动效

三、透视

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

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

老司机干货!4个技巧让你玩转轻量级动效

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

老司机干货!4个技巧让你玩转轻量级动效

四、焦距

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

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

老司机干货!4个技巧让你玩转轻量级动效

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

老司机干货!4个技巧让你玩转轻量级动效

接下来放几个小编在实际设计中应用的案例,大家感受一下(来自开课啦APP):

老司机干货!4个技巧让你玩转轻量级动效

△ 品牌形象蜜蜂上升动画

老司机干货!4个技巧让你玩转轻量级动效

△ 下拉刷新的品牌动画

老司机干货!4个技巧让你玩转轻量级动效

△ 开课啦心理魔法院

最后

掌握和清楚这四点心法,能够让你在设计动态影像时如鱼得水。但其实想做出一个优秀的动效并不只有这些。需要你有一颗善于观察的心,善于发现你身边的那些自然规律。

欢迎关注作者的微信公众号:「开课啦UED」

老司机干货!4个技巧让你玩转轻量级动效

如果觉得最美UI所整理的设计内容对你有所帮助,欢迎将最美UI网站推荐给身边设计好友。

本设计资源来源于网友网络收集整理提供,主要用于学习设计之用,请勿直接用于商业化设计。

猜你在找的UI


大厂硬核干货!深入分析弹性动效的应用及原理
弹性是动态设计领域中一种常见的表达方式。不同于影视特效、动画 CG 等设计输出即为最终产物的生产环境,UI 动效始终面临着动效还原带来的种种问题,弹性动效的还原就是其中之一。
这些小小的改变,能够让UI动效更上一层楼
UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI动效对于整个界面的提升是显著的。
谷歌设计师:只要掌握这两个方法,帮你做好动效设计!
今天这篇文章,讲的又是大家感兴趣的动效知识。现如今,动效对于品牌的传达变得越来越重要,所以我想尽可能多的去搜集动效相关的资料,跟大家一起,紧跟趋势,把这块的能力掌握好。
别轻易说你会动效!这10个动画误区你都犯过吗?
10个动效案例,让大家避开动效误区。 一、走路 在做走路动画的时候,除了要把脚与地面的接触做出来,更应该要注意的是身体不同部位的跟随与节奏。
如何用最经典的迪士尼动画设计原则赋予 UI 灵性?
学习动画的同学应该都知道迪士尼的动画设计12原则吧?这可能是传统动画领域,最为重要、价值不可估量的原则之一。它是 Ollie Johnston 和 Frank Thomas 在他们的书《生命的幻觉》中所提出的。虽然这些原则最初是应用