动效 材质变换

材质变换

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

矩形变换

不对称变换
对称变换

径向变换

对称和圆形

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.

合并

材质可以与其他材质合并,或者分割成多个部分。当两片材质彼此接近时,在运动完成前,它们的边缘会相遇,外边距会先重叠。

分割

当材质分割成多个部分时,各部分在运动开始时就开始分离。

阴影

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

材质合并和分割的示例