Material Design Animation

Material Design Animation

Authentic motion 真实的运动

运动以一种优美流动的形式描述了空间关系,功能和目的.

Mass and weight: 质量和重量

在物理世界中,一个物体要运动,必须有力施加在它身上. 力的强度和持续时间规定了物体的加速度或者运动方向的改变. 即使是最急促的开始和结束也不是瞬时发生的, 由于物体的加速或者减速都是须要必定的时间的. 因此,当动画有着生硬的开始或者结束,或者唐突地改变方向,它们就会看起来很不天然.

Material design中的运动应该在不失高雅简洁和美感的状况下,尽量地贴近真实的物理运动和真实世界的行为.

天然的加速和减速

加速和减速的变化应该在动画持续时间内平滑变化.

为了特定的目的,要吸引对某个物体的注意,或者要给某一个动画增长特征,能够在开始和结束的时候改变它的加速度.

不对称的加速和减速会创造出一种更加天然和愉悦的运动.

当加速和减速不平滑的时候,运动会显示出机械性,速度和方向上的突兀的改变看起来会不和谐,引发注意.

这就是为何不对称的曲线变化比线性的变化要好,线性的变化老是会出现突兀的拐点,因此应该避免线性变化.

 

入口和出口

物体速度和方向的变化会引发用户的注意.

一个物体在进入和退出帧的时候变化速度,预示着它运动的距离.

好比,一个物体在退出的时候减速,会引发注意,暗示着它将停在画面帧外边框不远处.

特别地,在转场动画的时候,须要考虑入口或出口的哪一部分应该得到最多的注意. 在入口和出口处都应该采用一个近乎常量的速度,来减少注意力.

不要在进入的时候加速,退出的时候减速,这样会吸引不少没必要要的焦点,分散用户的注意力.

作出调整

不是全部的物体都是以一样的方式运动的. 轻或者小的物体能够运动得更快,由于它们须要的力更小,而大或者重的物体须要更多地时间来加速.

使用曲线型的运动,避免线性分段的路径. 找出最适合物体的运动特性,而后相应地表达出来.

曲线表现了一种在特定值的范围内,随时间的变化. 找出最适合你想描述的运动的曲线.

 

Responsive Interaction 响应式交互

User Input

触摸,声音,鼠标和键盘是同等重要的用户输入.

UI元素看起来都是可触摸的,视觉和运动线索应该及时认可用户输入,而且应该以一种像是被直接操纵的形式动画.

Surface reaction

收到输入事件后,系统应该在接触点上提供即时的视觉确认线索,好比: 手指点击的地方, 声音输入的mic, 键盘点击的合适的字段.

表达这种接触的核心视觉机制是:"点击波纹”, 即”Touch Ripple”.

设备表达了一个点击事件的方法和持续事件,也能够用来表达其余的动态变量,好比音量或者点击压力.

 

最佳实践: 从输入的接触点(好比指尖的接触点或者声音mic的icon)开始,让视觉反应径向(辐射状,放射式)传播.

 

Material response

除了墨水式的表面反应, 材料在被点击的时候能够抬起来,标识出一种活跃状态.

经过点击,用户能够生成新的材料,或者转换已经存在的材料,或者直接经过拖拽或者快划来操纵材料.

材料能够被线性或者径向改变大小.

在状态转换的时候显示动画: http://developer.android.com/training/material/animations.html#ViewState

 

原点: 当用户触发生成新的材料的时候,它应该从输入点开始,进行尺寸增加. 这样就在输入和生成之间创建了联系.

 

点击升高: 当一个card或者一个可分离的元素被激活的时候, 这个card应该升高,标识它处于一个激活状态.

为你的View指定高度:  http://developer.android.com/training/material/shadows-clipping.html#Elevation

 

Radial Action: 径向行为

应该给用户输入加上视觉反应使之更加清晰.

墨水从输入点向四面散开的视觉波纹就是一种径向行为.

输入事件是可视化的: 输入事件和屏幕上事件之间的联系应该是视觉上绑定的. 对于触摸事件或者鼠标来讲, 这个发生在接触点上, 对于声音来讲,则是麦克风的icon. 一个touch ripple标识着touch发生的位置还有时间,另外它也标识着点击输入被接收到了.

 

链接输入和行为: 输入事件触发的转换或者行为动做, 应该与输入事件有视觉联系. 震中附近的波纹反应比远处的反应要发生的快, 好比: 1.一系列的内容变化: 不少图片的出现或消失; 2.一系列的材料运动: 卡片移入或者移出屏幕.

Use the reveal effect:  http://developer.android.com/training/material/animations.html#Reveal

 

Meaningful transitions 有意义的转换

运动设计能够经过通知和取悦的两种方式有效地引导用户的注意力.

使用运动能够: 让用户在导航上下文之间平滑转换, 解释屏幕上元素的排布, 增强元素继承体系的概念.

 

Visual continuity 视觉连续性

两种视觉状态间的转换应当是清晰, 平滑, 而且轻松不费力的.

一个设计良好的转换能够告诉用户应该把注意力放在哪里.

 

转换类型和行为:

Incoming elements: 新生成的或新转换成的项目被引进或者从新创建.

Outgoing elements: 与上下文再也不相关的元素被移除.

Shared elements: 转换期间存在的元素, 能够是微小的(一个图标), 或者占据主导位置的(一个gallary图像慢慢增加到占据整个屏幕).

 

自定义Activity转场:  http://developer.android.com/training/material/animations.html#Transitions

 

注意事项:

设计动画时,注意如下几个方面:

1.引导用户的注意力. 用户的注意力应该被引导到哪里? 什么元素和运动能够达到这种目的? 转换过程当中, incoming, outgoing, shared元素都应该如何被强调或者去强调?

2.视觉上链接转换. 在转换状态之间建立视觉联系,能够经过颜色或者持续性的元素.

3.使用精确的运动. 考虑如何运动一个特定的元素给转换增长清晰度和愉悦感.

 

Hierarchical timing

当创建一个转换时, 要注意元素运动的顺序和时间. 要确保运动支持信息继承关系, 经过为视线创建一个路径来传达最重要的内容.

然而, 这并非一个简单的公式, 说最重要的东西最早运动, 最不重要的最后运动. 

转换元素的时间应该平滑地流动, 避免脱节的感受.

Consistent choreography

转换中的元素应该协调地运动. 元素运动通过的路径应该有意义而且有序. 偶然性的运动会分散注意力.

当转移中的元素都很协调的时候, 会帮助用户更好地理解应用.

Use curved motion:  http://developer.android.com/training/material/animations.html#CurvedMotion

 

最佳实践:

1. 尽可能避免线性的路径. 可是当运动被限制在一个轴上的时候, 或者运动是朝向或者离开某个点的时候例外.

2. 让方向性的元素在转换期间的运动保持一致. 避免冲突的运动和重叠的路径.

3. 元素运动的深度是多少以及为何?

4. 若是全部运动的元素都跟随它们在屏幕上的路径, 看起来会美观而且有序吗? 是否可以描绘出一幅清晰的图, 指示应该往哪里看?

5. 经过一致的进入和移出运动来强调元素间的空间关系.

 

Delightful details

动画能够存在于一个app中的全部元素组件, 不论规模, 从一个细节的icon, 到关键性的转换和动做.

全部的元素一块儿工做, 来构建一个滴水不漏的体验和一个有功能而且漂亮的app.

 

动画最基本的用法是在转换中, 可是一个app若是能在一些微小的地方使用动画真的可以取悦用户.

一个能够变成箭头或者播放键的菜单按钮, 控制了一个平滑转换, 同时具备两种功能: 通知了用户, 也让app自己在这一刻充满了惊喜和设计感.

 

 

 

参考资料

Material Design Animation:  http://www.google.com/design/spec/animation/authentic-motion.html