Material Design Animation

Authentic motion 真实的运动

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

Mass and weight: 质量和重量

在物理世界中,一个物体要运动,必须有力施加在它身上. 力的强度和持续时间规定了物体的加速度或者运动方向的改变. 即便是最急促的开始和结束也不是瞬时发生的, 因为物体的加速或者减速都是需要一定的时间的. 所以,当动画有着生硬的开始或者结束,或者唐突地改变方向,它们就会看起来很不自然.
Material design中的运动应该在不失高雅简洁和美感的情况下,尽可能地贴近真实的物理运动和真实世界的行为.
自然的加速和减速
加速和减速的变化应该在动画持续时间内平滑变化.
为了特定的目的,要吸引对某个物体的注意,或者要给某一个动画增加特征,可以在开始和结束的时候改变它的加速度.
不对称的加速和减速会创造出一种更加自然和愉悦的运动.
当加速和减速不平滑的时候,运动会显示出机械性,速度和方向上的突兀的改变看起来会不和谐,引起注意.
这就是为什么不对称的曲线变化比线性的变化要好,线性的变化总是会出现突兀的拐点,所以应该避免线性变化.
 
入口和出口
物体速度和方向的变化会引起用户的注意.
一个物体在进入和退出帧的时候变化速度,预示着它运动的距离.
比如,一个物体在退出的时候减速,会引起注意,暗示着它将停在画面帧外边框不远处.
特别地,在转场动画的时候,需要考虑入口或出口的哪一部分应该获得最多的注意. 在入口和出口处都应该采用一个近乎常量的速度,来减小注意力.
不要在进入的时候加速,退出的时候减速,这样会吸引很多不必要的焦点,分散用户的注意力.
做出调整
不是所有的物体都是以同样的方式运动的. 轻或者小的物体可以运动得更快,因为它们需要的力更小,而大或者重的物体需要更多地时间来加速.
使用曲线型的运动,避免线性分段的路径. 找出最适合物体的运动特性,然后相应地表达出来.
曲线表现了一种在特定值的范围内,随时间的变化. 找出最适合你想描述的运动的曲线.
 

Responsive Interaction 响应式交互

User Input

触摸,声音,鼠标和键盘是同等重要的用户输入.
UI元素看起来都是可触摸的,视觉和运动线索应该及时承认用户输入,并且应该以一种像是被直接操纵的形式动画.

Surface reaction

收到输入事件后,系统应该在接触点上提供即时的视觉确认线索,比如: 手指点击的地方, 声音输入的mic, 键盘点击的合适的字段.
表达这种接触的核心视觉机制是:"点击波纹”, 即”Touch Ripple”.
设备表达了一个点击事件的方法和持续事件,也可以用来表达其他的动态变量,比如音量或者点击压力.
 
最佳实践: 从输入的接触点(比如指尖的接触点或者声音mic的icon)开始,让视觉反应径向(辐射状,放射式)传播.
 

Material response

除了墨水式的表面反应, 材料在被点击的时候可以抬起来,标识出一种活跃状态.
通过点击,用户可以生成新的材料,或者转换已经存在的材料,或者直接通过拖拽或者快划来操纵材料.
材料可以被线性或者径向改变大小.
 
原点: 当用户触发生成新的材料的时候,它应该从输入点开始,进行尺寸增长. 这样就在输入和生成之间建立了联系.
 
点击升高: 当一个card或者一个可分离的元素被激活的时候, 这个card应该升高,标识它处于一个激活状态.
 

Radial Action: 径向行为

应该给用户输入加上视觉反应使之更加清晰.
墨水从输入点向四面散开的视觉波纹就是一种径向行为.
输入事件是可视化的: 输入事件和屏幕上事件之间的联系应该是视觉上绑定的. 对于触摸事件或者鼠标来说, 这个发生在接触点上, 对于声音来说,则是麦克风的icon. 一个touch ripple标识着touch发生的位置还有时间,另外它也标识着点击输入被接收到了.
 
连接输入和行为: 输入事件触发的转换或者行为动作, 应该与输入事件有视觉联系. 震中附近的波纹反应比远处的反应要发生的快, 比如: 1.一系列的内容变化: 很多图片的出现或消失; 2.一系列的材料运动: 卡片移入或者移出屏幕.
 

Meaningful transitions 有意义的转换

运动设计可以通过通知和取悦的两种方式有效地引导用户的注意力.
使用运动可以: 让用户在导航上下文之间平滑转换, 解释屏幕上元素的排布, 加强元素继承体系的概念.
 

Visual continuity 视觉连续性

两种视觉状态间的转换应当是清晰, 平滑, 并且轻松不费力的.
一个设计良好的转换可以告诉用户应该把注意力放在哪里.
 
转换类型和行为:
Incoming elements: 新生成的或新转换成的项目被引进或者重新建立.
Outgoing elements: 与上下文不再相关的元素被移除.
Shared elements: 转换期间存在的元素, 可以是微小的(一个图标), 或者占据主导位置的(一个gallary图像慢慢增长到占据整个屏幕).
 
 
注意事项:
设计动画时,注意以下几个方面:
1.引导用户的注意力. 用户的注意力应该被引导到哪里? 什么元素和运动可以达到这种目的? 转换过程中, incoming, outgoing, shared元素都应该如何被强调或者去强调?
2.视觉上连接转换. 在转换状态之间创建视觉联系,可以通过颜色或者持续性的元素.
3.使用精确的运动. 考虑如何运动一个特定的元素给转换增加清晰度和愉悦感.
 

Hierarchical timing

当建立一个转换时, 要注意元素运动的顺序和时间. 要确保运动支持信息继承关系, 通过为视线建立一个路径来传达最重要的内容.
然而, 这并不是一个简单的公式, 说最重要的东西最先运动, 最不重要的最后运动. 
转换元素的时间应该平滑地流动, 避免脱节的感觉.

Consistent choreography

转换中的元素应该协调地运动. 元素运动经过的路径应该有意义并且有序. 偶然性的运动会分散注意力.
当转移中的元素都很协调的时候, 会帮助用户更好地理解应用.
 
最佳实践:
1. 尽量避免线性的路径. 但是当运动被限制在一个轴上的时候, 或者运动是朝向或者离开某个点的时候例外.
2. 让方向性的元素在转换期间的运动保持一致. 避免冲突的运动和重叠的路径.
3. 元素运动的深度是多少以及为什么?
4. 如果所有运动的元素都跟随它们在屏幕上的路径, 看起来会美观并且有序吗? 是否能够描绘出一幅清晰的图, 指示应该往哪里看?
5. 通过一致的进入和移出运动来强调元素间的空间关系.
 

Delightful details

动画可以存在于一个app中的所有元素组件, 不论规模, 从一个细节的icon, 到关键性的转换和动作.
所有的元素一起工作, 来构建一个滴水不漏的体验和一个有功能并且漂亮的app.
 
动画最基本的用法是在转换中, 但是一个app如果能在一些微小的地方使用动画真的能够取悦用户.
一个可以变成箭头或者播放键的菜单按钮, 控制了一个平滑转换, 同时具有两种功能: 通知了用户, 也让app本身在这一刻充满了惊喜和设计感.
 
 
 

参考资料

 

Material Design Animation的更多相关文章

  1. Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果

    Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...

  2. 直接拿来用!十大Material Design开源项目

    来自:http://www.csdn.net/article/2014-11-21/2822753-material-design-libs/1 介于拟物和扁平之间的Material Design自面 ...

  3. 【Android】进入Material Design时代

    由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Desi ...

  4. ANDROID L——Material Design综合应用(Demo)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Material Design: Material Design是Google推出的一个全 ...

  5. Android群英传笔记——第十二章:Android5.X 新特性详解,Material Design UI的新体验

    Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高 ...

  6. Material Design学习之 ProgreesBar

    转载奇怪注明出处:王亟亟的大牛之路 继续我们Material Design的内容,这一篇讲的是进度条,上一篇是Switch地址例如以下:http://blog.csdn.net/ddwhan0123/ ...

  7. 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

    分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...

  8. Material Design系列第六篇——Defining Custom Animations

    Defining Custom Animations //自定义动画 This lesson teaches you to //本节课知识点 Customize Touch Feedback //1. ...

  9. Material Design系列第四篇——Defining Shadows and Clipping Views

    Defining Shadows and Clipping Views This lesson teaches you to Assign Elevation to Your Views Custom ...

随机推荐

  1. Qt Undo Framework Demo

    Qt Undo Framework Demo eryar@163.com Abstract. Qt’s Undo Framework is an implementation of the Comma ...

  2. Inno Steup 打包加入文件夹

    在[Files]段下,添加下面代码Source: "执行文件.exe"; DestDir: "{app}"; Flags: igNoreversionSourc ...

  3. 使用wireshark抓包分析浏览器无法建立WebSocket连接的问题(server为Alchemy WebSockets组件)

    工作时使用了Websocket技术,在使用的过程中发现,浏览器(Chrome)升级后可能会导致Websocket不可用,更换浏览器后可以正常使用. 近日偶尔一次在本地调试,发现使用相同版本的Chrom ...

  4. Android随笔之——Android广播机制Broadcast详解

    在Android中,有一些操作完成以后,会发送广播,比如说发出一条短信,或打出一个电话,如果某个程序接收了这个广播,就会做相应的处理.这个广播跟我们传统意义中的电台广播有些相似之处.之所以叫做广播,就 ...

  5. JavaScript的全局变量与局部变量解析

    一.JavaScript scope 的划分标准是function函数块,不是以 if.while.for来划分的 <script> function f1(){ alert(" ...

  6. Xen之初体验:XenMotion、 StorageMotion、Site Recovery、Power Management 各种新、高级功能免费

    Xenserver 的新版本6.2现在已经全面开源,省掉了原有的序列号,也能免费体验曾经标题中的付费高级功能. 安装镜像:http://downloadns.citrix.com.edgesuite. ...

  7. PHP面试题目搜集

    搜集这些题目是想在学习PHP方面知识有更感性的认识,单纯看书的话会很容易看后就忘记. 曾经看过数据结构.设计模式.HTTP等方面的书籍,但是基本看完后就是看完了,没有然后了,随着时间的推移,也就渐渐忘 ...

  8. objective-c中的@selector()和 c /c++的函数指针

    先看tomcat里用到的代码: //然后开始动画 //把图片放到animationImages,接受数组参数 self.tom.animationImages = arrayImage; //设置时间 ...

  9. Oracle普通表->分区表转换(9亿数据量)

    背景介绍: 环境:Linux 5.5 + Oracle 10.2.0.4 某普通表T,由于前期设计不当没有分区,如今几年来的数据量已达9亿+, 空间占用大约350G,在线重定义为分区表不现实,故采取申 ...

  10. WebSocket 介绍(一)

    WebSocket 发起单个请求,服务端不需要等待客服端,客户端在任何时候也能发消息到服务端,减少了轮询时候的延迟.经历一次连接后,服务器能给客户端发多次.下图是轮询与WebSocket的区别. 基于 ...