动效 移动

移动

材质中的运动遵循现实世界的力学,比如重力。

屏幕上的移动

向上弧线
向下弧线

进出屏幕的移动

独立移动
关联移动

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.

独立移动

元素进出屏幕时完全独立移动,不会影响屏幕内其他内容的位置。

进入屏幕

元素进入屏幕时使用减速曲线实现快速进入,表明它们此前一直以峰值速度行进。

永久离开屏幕

元素永久离开屏幕时,使用加速曲线来实现在较短的时间内加快离开屏幕,因为它们不会再返回,且不太需要获得用户的注意。

推荐做法

对进入屏幕且不影响周围其他元素位置的元素,应使用减速曲线。在移动端,这个过渡通常持续 225ms。对同一类元素的永久离开,应使用加速曲线。在移动端,这个过渡通常持续 195ms。

不推荐做法

不要在这些情况下使用标准曲线。对于入场,缓慢的加速是没有必要的,因为用户的焦点会停在元素最终静止的点。对于出场,缓慢的减速是没有必要的,因为终点是不可见的。

暂时离开屏幕

元素暂时离开屏幕时应该使用急促曲线,因为元素随时可能返回屏幕,并且应看起来仍在附近、触手可及。

推荐做法

元素暂时离开屏幕且可能从同一离开点返回时应使用急促曲线;返回时使用减速曲线。在移动端,这个过渡通常持续 300ms。

不推荐做法

元素永久离开屏幕时、或者需要从其他地方返回屏幕时,请使用加速曲线。而当元素返回时,应使用减速曲线。

关联移动

元素进入或离开屏幕,导致屏幕上其他元素发生移动时,需要使用平滑的缓动曲线,这样才能减小混乱,避免视觉干扰和突然的移动。

标准曲线用于在屏幕的边界内或边界外移动的元素。与独立运动的元素相比,标准曲线的持续时间会稍久一点。

推荐做法

当屏幕内的浮动操作按钮被进入屏幕的卡片影响时,标准曲线可以让两个元素保持平滑的开始和结束。在移动端,这个过渡通常持续 300ms。

不推荐做法

在向上和向下移动时使用减速/加速曲线,会让屏幕内的浮动操作按钮向上开始得很突兀、向下停止得也很突兀。这种移动生硬且具有干扰性。