动画效果

运动的物体总是能最有效的吸引住人类的注意力。在界面设计的领域,也是一样,当你希望用户的注意力从一个点转移到另一点,在这两点之间设计一个迁移的动画是在合适不过的了。

动画基本上可以分成以下几类:

  1. 平移动画:

     anim_trans
  2. 渐变动画:

     anim_fade
  3. 缩放动画:

     anim_scale
  4. 旋转动画

     anim_rotate

其他所有的动画基本上都是这些单一的动画,或者多个动画的叠加。例如,一边平移一遍放大。

动画由两个要素:一个是上面各种动画体现出的空间变化;另一个就是动画相对于时间的变化。

Material Design从真实的世界当中借鉴了重力和摩擦力对事物的影响,用它们来设计动画在时间维度上的变化。

 motion_with_time

动画的时间要素

一个动画持续的时间要控制在300左右,短了用户看不清,长了太拖沓。

动画变化的速度要平缓,主要有以下几种速度:

  • 标准速度曲线:速度先快后慢

     motion_standard_curve
  • 减速曲线:速度从快到慢

     motion_deceleration_curve
  • 加速曲线:速度从慢到快

     motion_acceleration_curve
  • 陡峭曲线:速度变化快速

     motion_sharp_curve

这些速度是Material Design动画效果的基石。我们看到的那些自然的动画,都是依靠这些速度的配合而形成的。

使用动画的对象

为了突出重点,吸引用户的注意力,动画的使用场景可以归纳成如下几点:

  • 应用的界面切换:例如屏幕中进入或者退出一个对象物体。
  • 元素属性的变化:例如屏幕中一个物体的形状发生变化。
  • 内容的迁移:例如通过屏幕中的局部内容展现更多内容。
  • 点击的反馈:当用户点击屏幕时,提供视觉上的动态效果。

界面切换

界面切换的效果,根据切换的内容不同,速度也有一些变化:

  1. 整个屏幕的切换,动画效果控制在375ms;
  2. 小的元素进入屏幕,动画效果持续225ms;
  3. 小的元素离开屏幕,动画效果持续195ms;
  • 当一组对象被移动的时候,使用标准曲线

     motion_group_objects_moving_standard_curve
  • 当一个对象进入屏幕的时候,使用减速曲线
    当一个对象离开屏幕不再回来的时候,使用加速曲线

     motion_leave_screen_forever_acc_curve
  • 当一个对象暂时离开屏幕、但随后还要回来的时候,使用陡峭曲线

     motion_slider_leavescreen_temperily_sharp

元素属性变化

  • 矩形变化:矩形的长宽发生变化。长与宽不同时变化,

     motion_rect_change_asyn

    长与宽同时变化,

     motion_rect_change_syn
  • 圆形展开:圆形逐渐扩大,展开成矩形,

     motion_circle_to_rect_without_move

    圆形先做一个平移的动画,再展开成矩形,

     motion_circle_to_rect_with_move
  • 合并与分割:多个矩形从分裂的状态聚合到一起形成整体;一个整体分裂开,成为独立的部分,

     motion_rows_merge

内容迁移

简单的说,就是把显示出的部分内容,扩展成完整的内容,

  • 将现有的内容,原封不动的扩展出更多内容,

     motion_keep_ori_show_more

    视频中的圆形和矩形,在动画前后都保留了下来。只是通过平移和缩放的动画,把之前隐藏的内容显示了出来。

  • 保留关键内容,扩展出更多内容,

     motion_share_key_element

    视频中的圆形得到了保留,其他元素被隐藏起来。动画过程中显现了更多的界面元素。

点击的反馈

为了增加用户点击屏幕时的视觉反馈,Material Design对按钮、列表等拥有点击交互的组件增加了水波纹效果-ripple

 motion_ripple_effect