Material Design之Motion

---

在Material Design中，运动被用来描述空间的关系，功能，流动美的意图。

运动的作用

1. 引导布局中的焦点轨迹
2. 引导用户的手势操作
3. 展示元素之间的层次结构和空间关系
4. 分散在幕后的事情(比如抓取内容或加载下一个视图)
5. 提升用户体验
6. Related - Making Motion Meaningful

如何运动

物质环境从现实世界的力量中汲取灵感，比如重力和摩擦力。这些力量反映在用户输入影响屏幕上的元素以及元素如何相互作用的方式上。

1. 响应

   
   
   

   快速响应用户输入，准确地响应用户的触发

2. 自然

   
   
   

   自然运动的灵感来自于现实世界中的力学

3. 意识

   
   
   

   材料可以感知周围的环境，包括用户和周围的其他材料。它可以被元素吸引，并对用户的意图作出适当的响应。

4. 意向性

   
   
   

   在正确的时间，运动指南中的有意材料将焦点放在正确的地点。

如何做到更好的连贯
成功的运动设计具有以下特点:

1. 运动是快速
   交互不应该让用户等待的时间超过必要的时间。
2. 运动是清楚的
   过渡应该是清晰、简单和连贯的。他们应该避免做太多的事情。
3. 运动要统一
   物质元素的速度、响应能力和意图是统一的。任何对应用程序的动作体验的定制都应该在整个应用程序中保持一致。

---

合适的时长&自然的过度曲线

运动中的物质是响应性和自然性的。使用这些放松曲线和持续时间模式来创建平滑和一致的运动。

• 速度
  当元素在位置或状态之间移动时，移动速度应该足够快，不会导致等待，但速度足够慢，可以理解转换。在用户经常看到的情况下，保持简短的过渡。

• 动态的持续时间
  与其为所有的动画使用一个单一的持续时间，不如调整每个持续时间来适应运动的距离，元素的速度和表面的变化。
  离开屏幕的对象可能会有更短的持续时间，因为它们需要较少的关注。

• 一般时长设定
  移动端上常见的持续时间移动转换通常发生在300毫秒左右，在这种差异的范围内:大的、复杂的、全屏幕的转换可能有更长的持续时间，超过400ms的过渡可能感觉太慢。
  大屏幕上的大屏幕元素的距离较长，其峰值速度要高于在同一时间段内较短的距离。更大的屏幕应该有更长的时间，这样移动的速度就不会太快。
  平板电脑的持续时间应该比移动设备长约30%。例如，在平板电脑上，300毫秒的移动时间将增加到390ms。
  可穿戴设备上的持续时间应该比移动设备短约30%。例如，在可穿戴设备上，300毫秒的移动续航时间是210ms。由于材料必须在更大的设备上移动更大的距离，所以过渡的时间可能比小的设备要慢一些。
  桌面的动画应该比他们的移动设备更快更简单。这些动画的效果应该是150毫秒到200毫秒。因为桌面转换可能不那么引人注目，所以它们应该立即响应，并且比移动设备更快。
  复杂的web转换通常会导致掉帧(除非它们是为GPU加速而构建的)。较短的持续时间将使这些不太明显，因为动画完成得更快。

• 自然缓和曲线

这些自然的放松曲线会影响一个元素的速度、不透明度和尺度。
在动画的持续时间内，加速和减速的变化应该是平滑的，这样运动才不会显得机械。
当加速度和减速不对称地发生时，运动显得更加自然和令人愉悦。

根据使用的平台或软件，可以根据不同的平台来命名不同的曲线。
这些指导方针将把它们称为标准、减速、加速和锐曲线。

标准曲线

标准曲线

标准曲线是最常见的曲线。
在屏幕上的位置之间，元素会迅速地加速和缓慢地减速。
它适用于不断增长和收缩的材料，以及其他的财产变化。

减速曲线

减速曲线

使用减速曲线，元素以全速进入屏幕，并缓慢减速到一个休息点。
在减速过程中，元素可以在大小(到100%)或不透明度(到100%)中进行扩展。
在某些情况下，当元素以0%的不透明度进入屏幕时，它们可能会在进入时稍微缩小一些。

加速度曲线

加速度曲线

使用加速曲线元素以完全速度离开屏幕。
在屏幕外，它们不会减速。
在动画开始的时候，它们会加速，并且可以缩小到任意大小(到0%)或者不透明度(到0%)。
在某些情况下，当元素以0%的不透明度离开屏幕时，它们可能也会稍微放大或缩小。

锋利的曲线

锋利的曲线

使用锋利的曲线，元素会迅速加速和减速。
它是由退出元素所使用的，这些元素可能在任何时候返回到屏幕上。
元素可以从屏幕上的起始点迅速加速，然后在对称的曲线上迅速减速，然后在屏幕外的休息点迅速减速。
减速比标准曲线要快，因为它没有沿着偏离屏幕的精确路径。
元素可以在任何时候从那个点返回。

亲爱的读者 您好，写到这里思路瞬间断了 本文皆翻译自官网，而官网所展示内容我无法完美演示，所以在此附上官网链接https://material.io/ 想深 入了解学习 请移步官网。
我也是在学习过程之中，后续如果有收获、有能力的情况下， 会考虑重写此文章，深表歉意。

顺便提一句我的个人主页就是Material Design风格的，不信点点看DuYang_ZXM(https://duyangs.github.io/)

每星期至少一篇跟新本系列，感兴趣可以关注。一起学习，一起进步。

声明本文图片多数取自官网https://material.io/，转载请注明

上一篇：Material Design你真的了解吗？