赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
3.4K 0 0

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

何一个有趣又有生命力且符合逻辑的动效呢?在我看来需要着重以下4个物理特,就能决所有基问题。

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

一、阻力

大家在做动画的候容易考虑惯性,惯性往往是物体身的性。阻力则是外界事物对物体产生的响。但当不见这个外界事物的候,就会忽略这点。

小运动,它上旗帜看上去是不是很奇怪?这是忽略了阻力象带来影响。

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

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

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

二、惯性

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

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

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

动画下表是柔软小球,在力影响时,个球体惯性分布不均匀,球体左侧和右侧生了惯性先后速度,生了形变。最终触碰磁铁后,惯性导致球体左侧结束比右侧晚,生了回弹。

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

三、透视

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

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

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

「近远」分应「快慢」,利用不速度来表现前后关系。我们利用参照物速动画,能做出具有很好空感效。

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

四、焦距

同和透视一,二维的界难表现焦距这个概念。但可以利用色彩和虚实的段来模拟。

左边小在前?或着右边小在前?或者他们是并排站立?由于维限制性,们能过自己想象来弥补三维空缺失。不会出不结论。在这里我们可以过颜色来做到简易前后关系。颜色暗淡或明亮可能由于关系,显离我们比较远或比较近。(结合实场景)

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

利用模糊,我们能表现出更好空效和镜头感。这是利用绘画设计和平设计虚实关系。

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

接下来放几个小编在实设计应用案例,大家感受下(来自开课啦APP):

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

△ 品形象蜜蜂上升动画

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

△ 下刷新品动画

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

△ 开课啦心理魔法院

最后

掌握和楚这四心法,能够让你在设计动态影像时如鱼。其实想做出个优秀动效并不有这些。需要你有颗善于观察心,善于发现你身边那些自然规律。

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

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在 UI 界面当中使用动效已经成为这几年一直被讨论的热门话题了。动效要怎么用,什么样的动效更优秀等等,这样的探讨层出不穷...
UI动效
10个动效案例,让大家避开动效误区。 一、走路 在做走路动画的时候,除了要把脚与地面的接触做出来,更应该要注意的是身体不...
AE动效
疫情期间,在线生活迎来爆发 ,视频行业成了广大网民放松娱乐和了解疫情、学习防护知识的重要平台。 短视频行业的日活用户规...
AE动效
一、微交互到底是什么? 微交互通常关注于单个事件或者单个任务,这些交互元素遍布于整个 APP 的各个角落。这些微交互存在的...
交互设计
阿里作为中国互联网企业的标杆,不仅一直在为广大人民群众提供快捷便利的服务。也不断引领行业,在各个专业领域,给专业人员...
UI动效
编者按:本文由负责Material Design 动效设计的谷歌设计师撰写,帮助大家深入理解动效的作用,才能做出更好的动效设计。 有...
UI动效
动效导出类型 一般情况下我们导出的动效可以分为三种类型。 1. 纯矢量图形动效 此类动效常用于图标、加载、启动页等。 2...
AE动效
一直有很多朋友会问一些关于移动端实现动效的方法,平时也会给大家做一些解答,但是可能没有那么系统性,这次抽点时间总结归...
动效落地