2分钟掌握参数化动效曲线

作者:信籽、鱼也

 

 

1 参数化设计的目的

大家有没有遇到过这种状况,当把设计好的动效拿去给开发同学时,总要反复调整,历经千辛万苦终于把动效还原成所设计的样子,这究竟是设计师的问题,还是开发同学的问题,后来仔细想想,这明显是我们设计师的问题——由于设计师没有提供准确的参数,开发同学只能一遍遍地对照着设计师提供的动画来调试实现的效果,这样必然导致沟通成本的增加和动效还原度的降低。

通过分析这些现象,我们提出了参数化的动效设计,希望达到以下两个目的:

1)准确的参数:让开发同学有准确的参数来实现动效,减少沟通的成本和提高动效的还原度。

2)指导作用:用准确具体的参数来指导动效的设计,保持动效设计的统一性和复用性。

2 参数化的动效设计2.1 动效的本质

迪士尼著名动画导演理查德·威廉姆斯(Richard·Williams)在他的著作《原动画基础教程-动画人的生存手册》中,详细地分析了动画的本质是时间(timing)和间距(spacing),这两者控制好,才能使得动画更具生命力和真实自然。

由于动效是用于描述动画的效果,因此,参数化的动效设计主要就是要清楚地给出目标对象在整个动画中的时间和间距参数:

1)动效的时间(Timing):指完成该动效初始状态和结束状态的时间长短。

2)动效的间距(Spacing):指整个动效在对应时间内的速度快慢。

下面,我们举两个简单的栗子来对比分析一下时间和间距对动效的具体影响。

对于同样一个硬币,例子1和例子2中硬币的动效时间是相同的(初始状态都是1,结束状态都是25),但是例子1中的硬币的动效间距是速度均匀的,而例子2的速度则呈现出先慢后快再慢,因此,相同的时间,但不同的间距就会产生不同的动画效果了。

 

2.2 动效的参数化描述

在APP动效设计中,最常用的的四种基础要素是位移、缩放、旋转和透明度。复杂的动效都是通过这四种要素组合而成,他们核心的参数就是时间和间距。

 

2.2.1 位移的参数化描述

位移-物体进场的参数化描述

对于物体的进场速度,建议以最高速度进入屏幕,然后再将速度慢慢降至为0,让用户把注意力集中在内容上,而不是进场的动效上。

1)动效时间

a. 比较重的物体的动效时间:T1。

b. 比较轻的物体的动效时间:T2。

2)动效间距 (曲线斜率的变化)

a. 比较重的物体的动效间距:easeOutCubic-由于其物理惯性较大,减速的变化会较为缓慢。

b. 比较轻的物体的动效间距:easeOutExpo-由于其物理惯性较小,减速的变化会较为迅速。

 

位移-物体退场的参数化描述

对于物体的退场速度,建议以越来越快的速度离开屏幕的边界,避免用户的注意力集中在退场的动效上。

1)动效时间

a. 比较重的物体的动效时间:T1。

b. 比较轻的物体的动效时间:T2。

2)动效间距 (曲线斜率的变化)

他们的动效间距都是:easeInCubic-速度越来越快。

 

2.2.2 缩放的参数化描述

对于内容的放大和缩小速度,建议是先快后慢,让用户把注意力集中在内容上,而不是动效上;同时告诉用户该内容在空间关系上的变化。

1)动效时间:T。

2)动效间距 (曲线斜率的变化):easeOutExpo-速度呈现先快后慢。

 

 

2.2.3 旋转的参数化描述

对于内容的旋转速度,建议是先快后慢,让用户把注意力集中在最终的旋转状态上,而不是旋转的动效上;同时告诉用户该内容旋转后的结果。

1)动效时间:T。

2)动效间距 (曲线斜率的变化):easeOutExpo-速度呈现先快后慢。

 

2.2.4 透明度(淡入和淡出动效)的参数化描述

对于内容的淡入出现,建议速度是先快后慢,让用户把注意力集中在内容上,而不是淡入出现的动效上。而内容的淡出消失,建议速度是越来越快,避免用户把注意力集中在图片消失的动效上。

1)动效时间都是:T。

2)动效间距 (曲线斜率的变化)都是:easeInCubic-速度呈现先快后慢。

 

好了,这里是实践的小栗子 ^_^

最后,为大家介绍一套开发攻城师常用的动效曲线库,大家可以根据具体的设计来选用,这样就能与开发愉快地聊天啦~

参考资料:

[1]理查德·威廉姆斯. 原动画基础教程:动画人的生存手册:中国青年出版社, 2006年1月1日.

[2]Easing Function. https://easings.net/en

 

 

 

 

文章来源:MIX无线设计公众号

顶部图片来源:pinterest


评论

© Lee-style | Powered by LOFTER