打mg电子游戏几点容易出分

当前位置: 首页 ? 平面设计 ? 设计理论

新版MATERIAL DESIGN 官方动效指南(二)

时间:2016-05-17 来源:IT技术吧 作者:小陈 点击:53
  昨天@平行煎餅 发了新版Material Design官方动效指南的第一节,今天继续第二部分,从动效的速度、动态持续时间、通用持续时

   昨天@平行煎餅 发了新版Material Design 官方动效指南的第一节,今天继续第二部分,从动效的速度、动态持续时间、通用持续时间和缓动曲线4个部分,教你创建平滑一致的Material Design 动效。再系统的干货都比不上官方的动效指南,西瓜就在这,赶紧来捡。

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

   新版MATERIAL DESIGN 官方动效指南

  速度

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

新版MATERIAL DESIGN 官方动效指南(二) 三联

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

15motion20160513

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

  动态持续时间

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

14motion20160513

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

13motion20160513

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

  通用持续时间

  移动设备

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

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

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

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

  动画超过400ms会显得慢而?#20139;场?/p>

  大屏幕移动设备

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

  平板设备

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

  可穿戴设备

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

12motion20160513

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

  桌面

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

  由于桌面动画可能不太引人注目,他们?#21335;?#24212;应该更敏捷、更迅速。

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

11motion20160513

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

  自然的缓动曲线

  缓动曲线可以对物体的速度、?#35813;?#24230;、大小产生效果。

10motion20160513

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

9motion20160513

  当加速?#22270;?#36895;不对称时,动效会看起来更自然,更令人愉悦。(红色对称,蓝色不对称)

  缓动曲线

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

  标准缓动曲线

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

8motion20160513
7motion20160513

  减速曲线(“缓出”)

  物体全速进入进入屏幕时,?#32531;?#24930;慢减速静止在屏幕上的某个点。

  在减速过程中,物体可能从很小变到正常大小,?#37096;?#33021;从?#35813;?#21464;到不?#35813;鰲?#26377;时候,当物体?#35813;?#36827;入屏幕,可能从?#28304;?#30340;大小缩小到正常的大小。

6motion20160513
5motion20160513

  加速曲线(“?#33322;?rdquo;)

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

4motion20160513
3motion20160513

  急转曲线

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

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

2motion20160513
1motion20160513

?关键字: (责任编辑:IT技术吧)

------?#25351;?#32447;----------------------------
? 打mg电子游戏几点容易出分 大富豪棋牌游戏官网 六肖中特是什么意思 幸运飞艇官方开奖直播 NBA比分预测 中国福利彩票深圳风采开奖结果 欢乐生肖彩票怎么玩 五星彩票安卓 星空棋牌手机版下载安卓 河北11选5官网app 超级大乐透开奖