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

四、Material的变化（Transforming material）

Material能够通过改变自己的形状和尺寸来吸引用户关注。

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

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

矩形的变化

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

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

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

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

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

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

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

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

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

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

径向变化

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

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

可行

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

不可行

径向变化一定要等比例进行缩放，否则就会像图中一样奇怪。

不可行

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

不可行

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

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

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

合并与分裂

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

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

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

material对象的合并与分裂