材料变形

材料可以通过将表面分割，组合，改变形状，和改变大小让人们觉得他是活的。

Material can make surfaces feel alive by multiplying and dividing them, and changing their shape and size.

矩形变形

Rectangular transformation

不对称

Asymmetric

对称

Symmetric

波纹转变

Radial transformation

对称 和 圆形

Symmetrical and circular

当材料的形状和大小进行变化时，高度和宽度是沿着运动曲线异步变化的。其附近表面内部或它周围的元素的变形的动画是需要经过 编排。

When material changes shape and size, its width and height change asynchronously along a motion curve. These changes are choreographed with nearby surfaces inside or around the changing element.

所有在表面上发生所有的表面变化，如下所示，使用 标准曲线。

All surface transformations that occur on-screen, such as the ones below, use the standard curve.

宽度和高度的变化

Transforming width and height

元素宽度和高度的变化可以使用对称或不对称的方式来进行扩展或折叠。

Elements may be expanded or collapsed using either asymmetric or symmetrical width and height changes.

不对称变化 高度和宽度使用不同速率的变化。通常在多个元素或多个位置变化时使用，效果最佳。

Asymmetric transformations involve the width and height changes at different rates. They work best when multiple elements or position changes are involved.

不对称变化

要扩展元素的大小，在变化元素宽度之前，先将高度进行变化。当折叠元素的大小时，在变化高度之前先变化它的宽度。

Asymmetric transformation

To expand an elements’ size, begin transforming the width of an element slightly before transforming the height. To collapse an element’s size, begin transforming the height slightly before the width.

对称变化 高度和宽度使用相同速率的变化。通常在一个元素或沿单个轴发生的变化时使用效果更好。

Symmetrical transformations involve width and height changes occurring at the same rate. They are better for changes to a single element that occur along a single axis.

对称变化

同时变化高度和宽度是一种没有过多细节的动画，缺非常适合一些简单的形状改变。这些变化的持续时间可能会比不对称变化的持续时间要短。

Symmetric transformation

Transforming width and height at the same time is a less detailed animation approach best suited to simple shape changes. These transformations can have slightly shorter durations than asymmetric ones.

当元素进行非对称扩展时，其元素里面的内容（类似文案和图片）是等比扩大的，这样能防止内容发生非自然的形变。有关表面内容的变化的详细信息，轻查阅 编排。

When an element expands asynchronously, the items it contains (such as text or images) change size at a constant aspect ratio to prevent unnatural stretching. For more information on how to transition content within a surface, see Choreography.

内容（例如最大宽度的图片）的变形要使用等比例的变化。即使它的容器（例如大的卡片）的变化是使用非对称变化的运动曲线

Content (such as a full-width image) transforms at a constant aspect ratio, even as its container (such as a larger card) transforms asynchronously along a motion curve.

具有完全出血内容的容器（例如全屏图像）可能使用对称变化曲线进行扩展。

Containers with full-bleed content (such as a full-bleed image) may expand synchronously.

径向变化

Radial transformation

径向变化是起始于用户触摸点且对称的圆形可视变化。它们通常使用圆形的表面，然后变形为其他形状。

Radial transformations are symmetrical, circular visualizations that originate from a user’s point of touch. They are commonly used on circular surfaces that morph into other shapes.

正确，径向变化应该使用圆形的表面，然后变形为其它的形状，或者以触摸点创建一个新的表面。

Do.Radial transformation should be used on circular surfaces that morph into rectangular surfaces, or for creating new surfaces from the point of input.

错误。不要将径向形变使用在两个矩形之间的形状变化

Don't.Don’t use a radial transformation when transforming between two rectangular shapes.

错误，不要使用非对称方式在扩展高度和宽度的过程中形成椭圆形x

Don't.Don’t expand an oval’s width and height asynchronously.

错误，不要变形复杂的图形

Don't.Don’t transform complex shapes.

变形的起点可以从该元素的当前位置或从形变最终形态表面的中心开始。

Transformations can originate either from the object’s current location or from the center of the final surface being formed.

在扩展期间，浮动动作按钮在圆弧中移动，并朝向最终扩展卡的目的地移动。

During expansion, the floating action button moves in an arc towards its destination as it expands into a card.

浮动操作按钮的中心在转换过程中保持在原位，创建细微的扩展效果

The center of the floating action button stays in place during the transformation, creating a subtler expansion effect.

连接 & 分裂

Joining & Dividing

连接

Joining

材料可以连接其它的材料，也可从一块分裂城多个部分。两块材料相互接近，它们的边缘接触并且在整个动作结束前进行重叠。

Material may join with other material, or it may divide into multiple pieces. As two pieces of material approach one other, their edges meet and margins overlap before the movement completes.

分裂

Dividing

当材料分裂成多块时，分裂的动作是在动作开始的时候进行。

When material divides into multiple pieces, the pieces begin separation at the start of the movement.

阴影

Shadows

来自分离材料的阴影不会出现在兄弟元素的上方。

Shadows from separated material do not appear above sibling elements.

材料连接和分裂的例子

Example of material joining and dividing