动画效果
运动的物体总是能最有效的吸引住人类的注意力。在界面设计的领域,也是一样,当你希望用户的注意力从一个点转移到另一点,在这两点之间设计一个迁移的动画是在合适不过的了。
动画基本上可以分成以下几类:
- 平移动画:
- 渐变动画:
- 缩放动画:
- 旋转动画
其他所有的动画基本上都是这些单一的动画,或者多个动画的叠加。例如,一边平移一遍放大。
动画由两个要素:一个是上面各种动画体现出的空间变化;另一个就是动画相对于时间的变化。
Material Design
从真实的世界当中借鉴了重力和摩擦力对事物的影响,用它们来设计动画在时间维度上的变化。
动画的时间要素
一个动画持续的时间要控制在300左右,短了用户看不清,长了太拖沓。
动画变化的速度要平缓,主要有以下几种速度:
- 标准速度曲线:速度先快后慢
- 减速曲线:速度从快到慢
- 加速曲线:速度从慢到快
- 陡峭曲线:速度变化快速
这些速度是Material Design
动画效果的基石。我们看到的那些自然的动画,都是依靠这些速度的配合而形成的。
使用动画的对象
为了突出重点,吸引用户的注意力,动画的使用场景可以归纳成如下几点:
- 应用的界面切换:例如屏幕中进入或者退出一个对象物体。
- 元素属性的变化:例如屏幕中一个物体的形状发生变化。
- 内容的迁移:例如通过屏幕中的局部内容展现更多内容。
- 点击的反馈:当用户点击屏幕时,提供视觉上的动态效果。
界面切换
界面切换的效果,根据切换的内容不同,速度也有一些变化:
- 整个屏幕的切换,动画效果控制在375ms;
- 小的元素进入屏幕,动画效果持续225ms;
- 小的元素离开屏幕,动画效果持续195ms;
- 当一组对象被移动的时候,使用
标准曲线
,
- 当一个对象进入屏幕的时候,使用
减速曲线
,
当一个对象离开屏幕不再回来的时候,使用加速曲线
,
- 当一个对象暂时离开屏幕、但随后还要回来的时候,使用
陡峭曲线
,
元素属性变化
- 矩形变化:矩形的长宽发生变化。长与宽不同时变化,
- 长与宽同时变化,
- 圆形展开:圆形逐渐扩大,展开成矩形,
- 圆形先做一个平移的动画,再展开成矩形,
- 合并与分割:多个矩形从分裂的状态聚合到一起形成整体;一个整体分裂开,成为独立的部分,
内容迁移
简单的说,就是把显示出的部分内容,扩展成完整的内容,
- 将现有的内容,原封不动的扩展出更多内容,
- 视频中的圆形和矩形,在动画前后都保留了下来。只是通过平移和缩放的动画,把之前隐藏的内容显示了出来。
- 保留关键内容,扩展出更多内容,
- 视频中的圆形得到了保留,其他元素被隐藏起来。动画过程中显现了更多的界面元素。
点击的反馈
为了增加用户点击屏幕时的视觉反馈,Material Design
对按钮、列表等拥有点击交互的组件增加了水波纹效果-ripple
,