（译）MaterialDesign（八）-Transformi

其他文章

Material可以通过合并和分割，并改变形状和尺寸使表面看起来更有活力。

矩形变换

对称

不对称

径向变换

对称和圆形

矩形变换

当材料改变形状和尺寸时，其宽度和高度沿着运动曲线异步变化。 这些变化由改变元素内部或周围的附近表面进行。

在屏幕上发生的所有表面变换，使用标准曲线。

变换宽度和高度

可以使用不对称或对称的宽度和高度变化来扩展或折叠元素。

不对称变换涉及不同速率的宽度和高度变化。 当涉及多个元素或位置变化时，它们工作最好。

不对称变换

对称变换涉及以相同速率发生的宽度和高度变化。 它们更适合于沿单个轴发生的单个元素的变换。

转换宽度和高度在同一时间是一个简单的动画方法最适的形状变化。这些转换可以比非对称的有稍短的持续时间。

当元素异步扩展时，其包含的项目（例如文本或图像）以固定的宽高比更改大小，以防止非自然拉伸。

内容（如全幅图像）以恒定纵横比变换，即使包裹它的容器（如较大的card）沿运动曲线异步变换。

容器可以同步扩展

径向变换

径向变换是源自用户的触摸点的对称的圆形可视化。 它们通常用在圆形表面上，变形为其他形状。

正确

正确的做法

径向变换应使用圆面，演变成矩形的表面，或从输入的角度创造新的表面。

错误

错误的做法

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

错误

错误的做法

不要无限地扩大椭圆的宽度和高度。

错误

错误的做法

不要转换复杂图形

变换可以源自对象的当前位置或者从正在形成的最终表面的中心。

在扩展过程中，Floating action button在其扩展到card中时沿弧线路径向目标移动。

Floating action button的中心保持不变，在变换过程中，创造一个微妙的扩张效应。

合并和分割

合并

Material可以与其它Material接合，或者它可以分成多个部分。 当两片Material彼此接近时，它们的边缘相遇并且边缘在移动完成之前重叠。

分割

当材料分成多个部分时，这些部分在运动开始时开始分离。

阴影

来自分离材料的阴影不会出现在兄弟元素上方。