Motion Material的变形

Maeterial 的变形

Material Design 的动画设计通过对形状、尺寸的处理,让元素可以扩展收缩,从而使材质面(Surface)富有活力感和鲜活感。

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

当 Material 元素改变形状和尺寸时,它的宽度和高度根据动画曲线异步变化。通过 动画的组织 让其周围的材质面(Surface)和内部的材质面元素有序运动。

所有的材质变换都发生在屏幕内,例如下面这个动画,使用了 标准曲线.

宽度和高度的变化

通过异步或同步改变元素的宽度和高度,可以实现收缩或扩张的效果。

异步变换 让宽度和高度以不同步的运动方式变化。当动画元素较多,或者元素位移不是单纬时,可以考虑异步变换动画。

异步变换

在扩展对象的尺寸时,我们可以观察到宽度的扩张要略微先于高度的扩张。在缩小对象的尺寸时,我们可以观察到高度的缩小要略微先于宽度的缩小。

同步变换 让宽度和高度以同样的运动方式变化。当动画元素单一,或者元素位移是单纬时,可以考虑同步变换动画。

同步变换

高度和宽度以同样的运动方式变化,这种观念动画缺乏细节,最好在处理简单的形状元素时使用。同步变换动画的整体持续时间可以稍微比异步变换动画的整体持续时间短一些。

当对象的扩张动画是异步变换时,对象所包含的物体(例如文本或图像)要以恒定的比例缩放,以免动画伸展生硬不自然。关于材质面(Surface)上信息内容动画的知识,可以参考 动画的组织.

即便容器(比如说这个卡片)是按照异步变换进行缩放动画的,信息内容 (比如全宽图像) 也要按照恒定比例进行变换。

当容器内内容是全出血布局时,容器可以采用同步变换动画。

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

径向变换是同步变换动画,要根据用户输入点的位置,实现圆形动画的变换。径向变换动画一般应用于圆形材质面(Surface),将其变形为其他形状。

Do.

圆形材质面(Surface)变换为矩形材质面(Surface)时,可以使用径向变换动画。也可以在用户输入点处创建新材质面(Surface)。

Don't.

不要在矩形与矩形的变化动画中使用径向变换。

Don't.

不要异步变换圆的宽度和高度。

Don't.

不可应用于复杂形状的变换。

在使用径向变换动画时,要么根据对象当前的位置展开动画效果,要么根据变换后形状的中心点展开动画效果。

在拓展过程中,FAB(Floating Action Button) 通过弧形位移轨迹移动到最终位置,与此同时通过径向变换扩展为卡片。

在材质面形状变化过程中,FAB(Floating Action Button) 的中心点不变化,这样的拓展效果更精致一些。

连接 & 分离 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

连接

Material 元素可以通过连接加入其它 Material 元素中,同理,一个 Material 元素也可以分离成多个 Maeterial 元素。当两块 Material 元素靠近彼此时开始连接,在最终融合完成前,边缘会相接、覆盖。

分离

当 Maeterial 元素开始分离时,多个元素块同时开始分割动画。

阴影

Material 元素块的阴影不会叠加到其它元素块上。

Material 元素连接与分离的案例