2017 Material design 第二章第四节《Material的变化》

4、Material的变化（Transforming material）

Material可以经过改变本身的形状和尺寸来吸引用户关注。

矩形的变化（Rectangular transformation）
不一样时
同时

径向变化（Radial transformation）
对称和圆形

矩形的变化

Material对象的形状（尺寸）上的变化并非同时放大（或缩小），而是宽和高错开放大（或缩小），同时分别应用缓动曲线效果。这些Material对象大小的缩放不仅仅只考虑自身的变化，还须要综合考虑它与周边或者内部其余元素的关系，精心编排整一套的对象动效变化。

凡是出如今屏幕上关于material对象自身的变化都须要应用标准曲线的运动效果，好比下面的例子所示。

宽和高的变化
对象的宽、高变化可能同时发生变化，也可能不一样时发生变化。

不一样时发生变化的意思就是说宽和高不在同一时间开始放大（或缩小）。这种宽高变化方式适合涉及到多个对象变化或发生位置变化的状况。

不一样时发生变化。如图，当对象的尺寸放大时，该对象的宽在高以前一点开始发生变化。反之，当对象的尺寸缩小时，该对象的高在宽以前一点开始发生变化。

同时发生变化的意思就是说宽和高在同一时间开始放大（或缩小）。这种宽高变化方式适合单个对象沿单一轴向变化的状况。

同时发生变化。宽和高同时发生变化的方式适合一些简单的大小变化动效。这种方式下的运动持续时间应比宽高不一样时发生变化方式下的要短。

当对象宽、高的变化是不一样时发生的方式，那该对象包含的元素（如文本或图像）的尺寸变化应该按照一个固定的宽高比而不是采起宽、高不一样时发生变化的方式进行变化，不然就会显得极其不天然。更多关于包含元素的对象该如何进行变化，请看 编排。

如图，内容中元素（好比全宽（full-width）图片）尺寸变化按照一个固定的宽高比进行缩放，尽管元素的容器（好比大的卡片）尺寸变化采用的是宽、高不一样时发生变化的方式。

如图，容器中的内容若是是全出血（full-bleed）的（好比全出血的图片），那么这个全出血的内容应该跟随其容器同样采用宽、高同时发生变化的方式。

径向变化

径向变化采用的是等比例（宽、高同时变化）的缩放方式，其变化来自用户触发。径向变化通常用于圆形变化成其余图形。

图中圆形变化成矩形的动效应用的是径向变化。

可行

如图，径向变化不适用于两个矩形之间的变化。

不可行

径向变化必定要等比例进行缩放，不然就会像图中同样奇怪。

不可行

不要使用复杂的图形进行变化。

不可行

以当前被触发对象的中心位置为准开始变化。

如图中案例，浮动按钮（FAB）的中心沿着弧线向上移动逐渐变化成一张卡片（card）；反之，卡片的中心沿着弧线向下移动逐渐变回浮动按钮。

如图中案例，浮动按钮保持中心点不变的状况下进行变化

合并与分裂

合并
Material对象能够与其余对象合并，也能够分裂出多个Material对象。当两个对象合并的时候，它们相互接近，直到边缘相遇、重叠，最后结束移动完成合并。

分裂
当material对象分裂出多个对象的时候，其中每一个被分裂的对象只须要相互移动离开就能完成分裂。

投影
分裂出来的material对象的投影不会投射到其余对象的身上。

material对象的合并与分裂