材质可以通过合并和分割、改变形状和尺寸,来使材质表面更富生命力。
矩形变换
不对称变换
对称变换
径向变换
对称和圆形

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

当材质改变形状和尺寸时,它的宽度和高度也会沿着运动曲线异步变化。这些改变是和内部与周围的元素经过动效编排的。
在屏幕上发生的所有表面变换,比如以下这些,都使用标准曲线。
可以通过对称或不对称地改变宽度和高度来展开或折叠元素。
不对称变换需要宽度和高度以不同的速率变化。当涉及多个元素或位置变化时,最适合使用不对称变换。
不对称变换
要扩展元素的尺寸,请在变换高度之前先稍微变换一下元素的宽度。要折叠元素的尺寸,请在变换宽度之前先稍微变换一下元素的高度。
对称变换需要宽度和高度以相同的频率变换。当单个元素沿着单个轴进行变换时,最适合使用对称变换。
对称变换
同时变换宽度和高度是一种较简单的动画方法,最适合基础的形状变更。这类变换可以比不对称变换的持续时间稍短。
当元素异步扩展时,其包含的内容(例如文本或图片)也会保持恒定宽高比进行变换,以防止不自然的拉伸。要了解在材质表面内如何转换内容,详见动效编排。
内容(例如一张通栏图片)会保持恒定宽高比进行变换,即使它的容器(例如一张更大的卡片)正沿着运动曲线异步变换。
含通栏内容(无边距)的容器(例如一张通栏图片)也可以同步展开。
径向变换是一种源自用户触摸点、对称且呈圆形的视觉效果。它们通常应用在圆形的表面,用于变换成其他形状。
推荐做法
径向变换应该用在圆形表面上,用于变换成矩形表面、或者从输入点创建一个新表面。
不推荐做法
在两个矩形之间变换时,请不要使用径向变换。
不推荐做法
不要让椭圆的宽度和高度异步扩展。
不推荐做法
不要变换复杂的形状。
变换的起点可以是元素的当前位置、或者是表面最终形成位置的中心。
在扩展期间,浮动操作按钮沿着一条弧线向目的地移动,并最终扩展成一张卡片。
在变换期间,浮动操作按钮的中心保持在原来的位置,创造出一种更微妙的扩展效果。
材质可以与其他材质合并,或者分割成多个部分。当两片材质彼此接近时,在运动完成前,它们的边缘会相遇,外边距会先重叠。
当材质分割成多个部分时,各部分在运动开始时就开始分离。
来自分离材质的阴影,不会覆盖在同级元素的上面。
材质合并和分割的示例