赞助商
立即赞助

老司机干货!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个技巧让你玩转轻量级动效

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

相关文章

之所以喜欢这篇文章,并将它翻译出来,其原因是文中的那些动画打动了我,仔细思考每一个动画都能让自己产生很多联想和灵感,...
交互动画
疫情期间,在线生活迎来爆发 ,视频行业成了广大网民放松娱乐和了解疫情、学习防护知识的重要平台。 短视频行业的日活用户规...
AE动效
一、可用性价值 动效很容易被象成某种增强愉悦的东西,自身并不具备什么价值。常常被当做可有可无部分,通常作为最后一步点缀...
交互设计
在无限的信息体量和有限的用户浏览范围之间求得平衡,让用户看到全部创作中他最想看到的那一面。 在B端产品的设计过程中,我...
B端产品
编者按:本文由负责Material Design 动效设计的谷歌设计师撰写,帮助大家深入理解动效的作用,才能做出更好的动效设计。 有...
UI动效
如何在一个快速发展的领域不断成长?这可能是每个设计师都需要思考的问题。了解新的设计趋势,学习新的设计技术,磨练手艺,...
动效设计
功能性动效的主要类型有页面空间转换、视觉信息反馈、功能操作引导、品牌与趣味,本文就来谈谈这四种功能性动效在移动端的使...
AE动效
一、微交互到底是什么? 微交互通常关注于单个事件或者单个任务,这些交互元素遍布于整个 APP 的各个角落。这些微交互存在的...
交互设计