Source素材站

我们期望,一旦你来到这个网站,就可以迅速找到所需的素材,然后离开,去做自己想做的事情.

持续时间和缓动 – MD 官方动效指南(翻译理论)

by matoi
标签:

Material Design的动效设计是响应式的,自然的。使用缓动曲线和持续时间模式可以创建平滑、一致的动效。

 

速度

某个元素移动或者改变状态的时候,运动速度应该足够快,使用户不用等待。出现频率高的转场动画应该短一点,而有些转场动画要慢一点,来保证用户能理解它。

1464225824-6800-1cf1573449ee6ac725263168e39f

正确:动效应该足够快,让用户不用等待动画完成。

 

1464225824-8745-643c573449ff6ac725263117c0cc

错误:不要做无意义的拖延。

 

 

动态持续时间

应该调整每个持续时间,来适应不同的移动距离、每个元素的速度、和表面的变化。而不是所有动画都用同样的持续时间。物体离开屏幕应该是一个很短的持续时间,这样用户就会减少对他的注意力。

 

1464225824-2178-4bcb57344a546ac7252631c99ad5

当物体需要移动较大位移,或有很巨大的变化时,应该占用更长的持续时间。

 

1464225824-9269-49fe57344a7d6ac725263195e206

当物体移动较小距离,或者有很微小的变化时,应该减少持续时间,这样就不会使动效看起来很慢很迟钝。

 

 

 

通用持续时间

 

移动设备

移动设备上,动画通常会持续300ms左右:

 

大而复杂的全屏移动设备上,通常需要更长的持续时间,375ms左右。

物体进入屏幕的持续时间大概是225ms。

物体离开屏幕的持续时间大概是195ms。

动画超过400ms会显得慢而拖沓。

 

大屏幕移动设备

在大屏幕移动设备上,同一时间段内,物体移动较长的距离速度比移动较短的距离更快。越大的屏幕物体移动的持续时间应该更长,这样动效不会显得太快。

 

平板设备

平板设备上动效的持续时间应该比移动设备长30%左右。移动设备上300ms的持续时间,在平板设备上应该是390ms左右。

 

可穿戴设备

可穿戴设备上的动效时间应该比移动设备上短30%左右。移动设备上300ms的持续时间,在可穿戴设备上应该是210ms左右。

 

1464225824-3716-682057344ac96ac7252631633524

动效元素在大屏幕设备上会移动很大的距离,动画可能会比小屏幕设备上看起来略为放缓。

 

桌面

桌面动画应该比移动设备上的动画更快、更简单。通常只会持续150ms到200ms。

 

由于桌面动画可能不太引人注目,他们的响应应该更敏捷、更迅速。

复杂的网页动画肯能会导致掉帧(除非他们专门为GPU加速)。更短的持续时间可以让动效快速完成,减少注意。

 

1464225825-6147-d0ac57344aec6ac72526316d88c4

桌面动效明显看起来更快。

 

 

自然的缓动曲线

缓动曲线可以对物体的速度、透明度、大小产生效果。

 

1464225825-5073-2fb557344b3a6ac72526310172a6

加速和减速变化应该是应该是平滑的贯穿于动画的持续时间之中的,使动效看起来不会那么机械化。(红色无缓动,蓝色有缓动)

 

1464225825-2169-8a1657344b866ac7252631987403

当加速和减速不对称时,动效会看起来更自然,更令人愉悦。(红色对称,蓝色不对称)

 

缓动曲线

缓动曲线可能会在不同的平台或者软件上有所不同。不同平台上的缓动曲线准则会涉及到普通缓动曲线、减速缓动曲线、加速缓动曲线,和急转缓动曲线。

 

标准缓动曲线

这是最常见的缓动曲线。物体可以根据在屏幕上的位置迅速加速或缓慢减速。这个曲线适用于增加或减少元素,和其他属性的变化。

1464225825-1882-45b057344bf16ac7252631d4027f

1464225825-5249-779e57344bf16ac72526314a5b3c

 

减速曲线(“缓出”)

物体全速进入进入屏幕时,然后慢慢减速静止在屏幕上的某个点。

在减速过程中,物体可能从很小变到正常大小,也可能从透明变到不透明。有时候,当物体透明进入屏幕,可能从稍大的大小缩小到正常的大小。

1464225826-6766-09a757344c226ac7252631263c70

1464225826-9612-a02057344c226ac7252631209d46

 

加速曲线(“缓进”)

物体离开屏幕是以全速离开,他们离开屏幕时不会减速。

1464225826-6421-821e57344ce26ac725263121fdcb

1464225826-6829-97c757344ce26ac72526319a850f

 

急转曲线

急转曲线被用于随时离开屏幕随时回到屏幕的情况。

物体可能会在屏幕上某一点迅速加速,然后以一个对称的曲线快速减速运动到屏幕外的某一点。减速会稍快于标准曲线,因为他们不会尊循于一个准确的路径到屏幕外的某一点。物体可能会随时回到原点。

1464225826-7081-001657344d436ac72526319abfe2

1464225826-6053-9d1757344d436ac72526318766cb

 

 

本站的素材全部来源于设计师提供和站长自己的搜集,如果其中有“不可商用”的问题请及时向站长联络。另外本站尊重素材的提供者,如果您是本素材的原作者,请联系本站,我会在第一时间署上您的姓名。Source素材筹集QQ群:527250994。

发表评论

电子邮件地址不会被公开。

DESIGN
COURSE