Motion-Material motion

Motion in the world of material design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.
用material design世界中的移动来描述空间关系，功能和完美流畅的动作。

Contents
Why does motion matter?
How does material move?
What makes a good transition?
Implications of motion

**Why does motion matter? **为什么motion很重要
Motion shows how an app is organized and what it can do.
Motion显示了应用程序的组织方式，以及它可以做什么

Motion provides:

• Guided focus between views
  引导view之间的焦点
• Hints at what will happen if a user completes a gesture
  提示如果用户完成一个手势会发生什么
• Hierarchical and spatial relationships between elements
  元素之间的等级和空间关系
• Distraction from what’s happening behind the scenes (like fetching content or loading the next view)
  分心于幕后发生的事情（比如获取内容或者加载下一个界面）
• Character, polish, and delight
  特征，优雅和趣味

Related 相关内容
Making Motion Meaningful

How does material move?
material是如何移动的？
The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.
material环境从现实世界的力量中吸取灵感，比如重力和摩擦。这些力量反映在用户输入影响屏幕上的元素以及元素如何相互响应的方式。

Material in motion has the following characteristics:
material的移动遵循以下特点
****Responsive****
Material is full of energy. It quickly responds to user input precisely where the user triggers it.
material是充满活力的，它能很快地在用户触发的地方响应用户的输入。

Larger animations on mobile devices are 300-400ms long. Smaller animations can be as short as 150-200ms. Animations longer or shorter than these can feel sluggish or difficult to follow.
移动设备上的较大的动画持续300-400ms.较小的动画就像150-200ms一样短。比这些更长或更短的动画可能会让人感到迟钝或难以感触到。
See more in Common Durations.

Ink ripples confirm user input by immediately expanding outward from the point of touch. The card lifts to indicate an active state.
油墨波纹通过立即从触摸点向外扩展的动画来确认用户输入。
See more in Radial reaction.

Show the connection between new surfaces and the element or action that creates them.
显示新界面与创建它们的元素或动作之间的关系。
See more in Creation.

****Natural**** 自然
Material depicts natural movement inspired by forces in the real world.
material描绘了由现实世界中的力量启发的自然运动
In the real world, an element’s ability to speed up or slow down quickly is affected by weight and surface friction. In a similar way, starts and stops do not occur instantaneously in material design.
在显示世界中，元素的快速加速或减速的能力受重量和表面摩擦力的影响。在相似的方法中，开始和结束
不会再material中瞬间发生。
See more in Natural easing curves.

Real-world forces, like gravity, inspire an element’s movement along an arc rather than in a straight line.
现实世界的力量，如重力，激发元素沿弧线而不是直线的运动
See more in Movement.

Material transformations follow an arc of movement.
material变换遵循运动弧。它可以吸引到元素，并适当地响应用户的意图
See more in Transforming material.

Aware
Material is aware of its surroundings, including the user and other material around it. It can be attracted to elements and respond appropriately to user intent.
material知道他的周围环境，包括用户和周围其他的material。
See more in Choreography.

As elements transition into view, they and their surroundings are choreographed in a way that defines their relationships.
一旦元素转换为view，他们和他们的周围环境是以一种定义他们的关系的方式进行编排的。

Material can push other material out of the way.
material能够把其他的material推出去。

Elements may attract other elements and join with them as they approach one another.
元素可以吸引其他元素，并且一个挨着一个地连在一起。

****Intentional****
Material in motion guides focus to the right spot at the right time.
运动指南中的material在正确的时间将焦点集中到正确的位置。
See more in Continuity.

A transition helps guide the user to the next step of an interaction.
过渡动画有助于指导用户进行交互的下一步

Movement can communicate different signals, such as whether an action is unavailable.
运动可以传达不同的信号，例如一个动作是否不可用

Animation can bring focus to elements that need user attention.
动画可以将重点放在需要用户关注的元素上

What makes a good transition?什么是一个很好的过渡
Successful motion design possesses the following characteristics:
成功的运动设计具有以下特点：
****Motion is quick****
An interaction shouldn't keep the user waiting longer than necessary.
互动不应该让用户等待更长的时间。

Do. 官网视频
Animate quickly so that the user never has to wait for the animation to finish.
快速的动画可以让用户不必再去等待动画完成。

Don't. 官网视频
Staggering and slowing the movement of many elements can lengthen the duration.
不稳当的滑动和减速的运动可以延长持续时间。

****Motion is clear****
Transitions should be clear, simple, and coherent. They should avoid doing too much at once.
移动应该是清晰，简单和连贯的。他们应该避免一次做太多事情。

Do. 官网视频
Maintain a clear path into the next view, even while elements are choreographed as a group.
即使元素被编排为一组，也要保持明确的路径进入下一个view。

Don't.
Transitions can get confusing when multiple items need to move in different directions or cross paths.
当多个元素需要移动到不同的方向或者通过不同的路径，过渡动画可能被拒绝。

****Motion is cohesive****
Motion是有凝聚力的
Material elements are unified by their speed, responsiveness, and intention. Any customizations to your app's motion experience should be consistent throughout the app.
material元素由速度，响应性和意图统一起来。对应用motion体验的任何自定义都应在整个应用程序中保持一致

While these apps have different functions, their similar animation experiences make them feel related.
虽然这些应用程序具有不同的功能，但它们类似的动画体验使他们看起来相关联。

Implications of motion
motion的意义
The benefits of these motion patterns are observable in the following two examples, in which an app that follows these patterns is compared with an app that does not.
在以下两个示例中可以看到这些运动模式的好处，其中将遵循这些模式的应用程序与不具有这些模式的应用程序进行比较。

Do. 官网视频
During the transition, the user is guided to the next view. The surface transforms to communicate hierarchy. Loading occurs behind the scenes to reduce perceived latency.
在过渡期间，用户被引导到下一个view。平面转换为通信层次结构。后台加载会降低感知延迟。

Don't. 官网视频
It is unclear how the new view is related to the old because no transition occurs and there isn’t a clear focal point. Any sense of hierarchy isn’t communicated, and loading is more apparent by the display of a circular spinner.
目前还不清楚新观点如何与旧的相关，因为没有过渡发生，没有明确的焦点。任何层次感都不会传达出来，而通过显示圆形微调器，加载更加明显。