动效 材料形变

材料形变

材料可以通过合并和分割、改变形状和尺寸,来使材料表面更富生命力。

矩形转换

不对称转换
对称转换

径向转换

对称和圆形

Material Design 中的材料形变,合并、分割、改变形状与尺寸

矩形转换 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

当材料改变形状和尺寸时,它的宽度和高度也会沿着运动曲线异步变化。这些改变是和内部与周围的元素经过编排的。

在屏幕上发生的所有表面转换,比如以下这些,都使用标准曲线

宽度和高度的转换

可以通过对称或不对称的宽度和高度变化来展开或折叠元素。

不对称转换需要宽度和高度以不同的速率变化。当需要改变多个元素的的属性或位置时,最适合使用不对称转换。

不对称转换

要扩展元素的尺寸,请在转换高度之前先稍微转换一下元素的宽度。要折叠元素的尺寸,请在转换宽度之前先稍微转换一下元素的高度。

对称转换需要宽度和高度以相同的频率变换。当单个元素沿着单个轴进行变换时,最适合使用对称转换。

对称转换

同时变换宽度和高度是一种不太细致的变换方法,最适合简单的形状变更。这些变换比非对称变换的持续时间稍短。

当元素异步扩展时,其包含的内容(例如文本或图片)也会以恒定的宽高比进行转换,以防止内容被拉伸。了解更多如何转换内容的方法,详见编排

内容(例如全宽的图片)会按恒定的宽高比进行转换,即使它的容器(例如较大的卡片)是沿着运动曲线异步变换的。

含全出血内容的容器(例如全出血图片)也可以同步展开。

径向转换 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

径向转换是源自用户的触摸点的、对称的、圆形的视觉效果。它们通常应用在圆形的表面,用于转换成其他形状。

正确示例

径向转换应该用在圆形表面上,用于转换成矩形表面、或者从输入点创建一个新表面。

错误示例

在两个矩形之间转换时,请不要使用径向转换。

错误示例

不要对圆形的宽度和高度使用异步转换。

错误示例

不要转换复杂的形状。

转换的起点可以是元素的当前位置、或者是表面最终出现的位置的中心。

在扩展期间,浮动操作按钮沿着一条弧线向目的地移动,并最终扩展成一张卡片。

在转换期间,浮动操作按钮的中心保持在原来的位置,创造了一种更微妙的扩展效果。

合并 & 分割 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

合并

材料可以合并到其他元素中,或者分割成多个部分。当两片材料彼此接近时,在完成移动前,它们的边缘会相遇且重叠。

分割

当材料分割成多个部分时,每一部分在刚开始移动时就分离了。

阴影

来自分离的元素的阴影,不会覆盖在同级元素的上面。

材料合并和分离的示例