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. GO语言的开源库

    Indexes and search engines These sites provide indexes and search engines for Go packages: godoc.org ...

  2. Android图片选择器

    1.概述 应公司项目需求,要做一个图片选择器,网上搜索了一些源码,我在别人的基础上进行了修改,另外页面也进行了重整,我的是先加载图片文件夹列表,然后再进入选择图片.            参考博客地址 ...

  3. BFC之浅析篇

    BFC是什么呢? 掏粪男孩? 当然不是咯.BFC,英文名Block formatting context,直译为“块级格式化上下文”.它是W3C CSS 2.1规范中的一个概念,决定了元素如何对内容进 ...

  4. Stop sucking,Become awesome.这一年我做到了么

    一年前,我因一些原因,工作变动,当时痛下决心,引用了<程序员的呐喊>封面的那句话: Just stop sucking and become awesome! 一年很快就过去了,最近看了不 ...

  5. IE6下的png透明图片的背景定位

    在IE6下PNG透明图片做背景,无法使用background-position进行定位.但是可以使用margin和绝对定位来进行. 另外,由于IE6下的 :hover 只对<a>支持,对其 ...

  6. 相克军_Oracle体系_随堂笔记015-网络原理及配置

    oracle网络没有负载, 没有负载的就不容易出问题.相对很简单的.   1.监听的动态注册: PMON 注册监听,或者 alter system register; 强制PMON抓紧注册. 都属于动 ...

  7. JavaWeb路径问题打包总结--小心出门右转404

    话说,培训和自学就不是一个回事,两周讲完java基础,两天讲完jsp,两节课讲完servlet,还真不是一般人能受得了的,这两天学习jsp和servlet频繁被路径问题困扰,倒不是出错,只是各种act ...

  8. 用MVC做支付宝手机网页支付问题

    支付宝支付接口手机网页支付 从官网扒下来的demo阿里做得还是相当不错的,只要参数改正确了基本上都是能跑通,WebForm的没什么大问题,这次要讲的主要是几个要注意的问题,因为是用MVC来做. 1.要 ...

  9. JS打印对象的方法&将Object转换为String的函数

    1.有时候需要把对象中的字段属性打印出来,下面用JS实现输出对象: function writeObj(obj) { var description = ""; for (var ...

  10. 使用、支持、帮助Moon.Orm

    1.关于Moon.Orm的说明 1)任何人和组织都可以免费使用该框架;(赞助者提供长期的技术咨询)  微信微信: 2)5.0之前已经全部开源; 3)5.0标准版本目前对参与者开源(看看下面很简单的), ...