Material Design(5)

Motion

---

注：由于图片大小超过限制，很多图片不能上传，见谅..

Material motion

运动在 material design 的世界中被用于漂亮流畅地描述空间的关系，功能和意向。

https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B14F_FSUCc01VDAtSVF3X0F5VTg/MaterialMotionHero_Spec_0505.webm

内容

Why does motion matter? 为什么运动很重要?
How does material move? 实体怎样移动?
What makes a good transition? 怎样制作好的过渡?
Implications of motion 运动的影响

Why does motion matter？为什么运动很重要？

运动展示了一个app怎样被组织和它能干什么。

运动提供了：
- ​在视图之间指导了关注点
- ​如果一个用户完成了一个手势暗示会发生什么
- ​元素之间的层次与空间关系
- ​分散后台操作的注意力（像获取内容或者加载下一个图片）
- ​特征，优雅和乐趣

相关
https://design.google.com/articles/making-motion-meaningful/

How does material move? 实体如何移动？

实体环境的灵感来源于现实世界的力，就像重力和摩擦力。这些力反映了用户的输入对于屏幕内元素的影响和元素怎样影响其他元素。
运动的元素有以下的特质：
Responsive
实体充满着能量，它能在用户触发的地方迅速响应用户的输入。

在移动设备中，大的动画持续300-400ms，小的动画持续150-200ms。动画长会难以追随，动画短会让人感觉迟缓。

水波纹通过迅速从触摸点拓展出去确认用户的输入。卡片上升来暗示进入了活动状态。

展示了新表面和创造它的元素或者活动之间的联系。

Natural
从现实世界的受力中获得灵感，实体描绘了更自然的运动。

在现实世界中，一个元素因为重量和表面摩擦力，能够迅速的加速或者减速。相似的，开始和停止在material design中不会迅速发生。

现实世界中的力，像重力，启发了一个元素的运动沿着一个弧线而不是一条直线。

实体的过渡沿着一条弧线。

Aware
实体能察觉它的周围环境，包括用户和其它附近的实体。它能被元素吸引，也能对于用户的意图合适地响应。

当元素过渡进视图，它们和它们的周围被按照某种方式编排，来定义它们之间的关系。

实体能推动其他实体

元素可能吸引其他元素，和他们合并当他们靠近时。

Intentional
运动的实体指导注意力在正确的时间到正确的地点。

过渡帮助知道用户互相作用的下一步。

运动能够传递不同的信号，就像一个操作是否是不可行的。

动画能够将用户的注意移到该注意的地方。

What makes a good transition? 什么造就好的过渡？

成功的动画设计拥有以下的特质：

Motion is quick
相互作用不该让用户等待比必要的时间更久的时间。

应该：
动画很快速，所以用户永远不用等待动画结束。

请勿：
多元素的交错、缓慢运动会增长持续时间

Motion is clear
过渡应该很简洁，简单和连贯。他们应该禁止一次性做很多事。

维持一个简洁的路径来到达下一个视图，即使是元素被编排成一个组。

请勿：
过渡将会非常复杂，当多个项目需要在不同的方向或者穿越路劲上移动。

Motion is cohesive
实体元素统一他们的速度，响应和意图。你app中的任何自定义的动画需要在app中相同。

虽然这些app有不同的函数，他们相似的动画让他们感觉有相关性。

Implications of motion 动画的执行

这些动画模式的好处是非常明显的，在下面的两个例子中，一个服从了模式而另一个没有服从。

应该：
在过渡中，用户被指导进下一个view。表面变换来表达出层次。后台的加载感觉也被弱化了。

请勿：
新旧视图之间的关系不明显，因为没有过渡发生，也没有清晰的焦点。任何试图的层次没有交流，后台加载也直接展示在了一个圆形加载器中。