MaterialDesignAnimation_html/css
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