动效 移动

移动

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

屏幕上的移动

向上弧线
向下弧线

进出屏幕的移动

独立移动
关联移动

屏幕内的移动 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。

错误示例

在向上和向下移动时,使用加速和减速曲线,会让屏幕内的浮动操作按钮突然向上移动,然后突然停止,然后突然向下移动。这种移动是非常粗糙和带破坏性的。