Motion 元素的运动

元素的运动

Material Design 的动态效果受到真实世界中作用力的影响,比如说重力。

屏幕范围内的运动 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

屏幕范围内两点的位移变化可以按照自然、凹形的轨迹运动。所有这些屏幕内元素的运动使用 标准曲线

上升弧形运动

真实世界中物体的上升需要抵消重力的影响。屏幕内元素的上升也要模拟这种效果,缓缓上升时,加速曲线要体现这种抵消重力的感觉。

Do.

当对角上升时,开始的上坡轨迹弧线平缓,结束时上坡轨迹曲线陡峭。

Don't.

颠倒了物理作用,上升时忽略了重力的下拉作用,动画看起来不自然。

下降弧形运动

真实世界中物体的下坠受到重力的加速。屏幕内元素的下降也要模拟这种效果。快速下降时,动画曲线要体现重力的加速的感觉。

Do.

当对角下降时,开始的下坡轨迹弧线陡峭,结束时上坡轨迹曲线平缓。

Don't.

颠倒了物理作用,下降时忽略了重力的向下作用。

非弧形运动

当对象的位移是单纬度时(单独垂直运动或者单独水平运动),不要使用弧型运动。运动要简洁,速度稍微快一些。

Do.

让单纬度运动保持直线。

Don't.

不要在单纬度位移运动中使用不自然的弧形轨迹。

元素的入场和退场也要单维运动。

Do.

直线路径的入场动画轨迹清晰,能够看出进入点,用户的视线容易跟随。

Don't.

元素退场时不要使用弧形路径,因为这种动画无法清晰体现进入点。

屏幕范围的入场和退场 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

独立运动动画

这类动画适用于:对象进行入场和退场的动画时,需要独立处理该对象,不影响屏幕内其他内容的位置。

进入屏幕

对象进入屏幕时使用 减速曲线,以便快速入场,屏幕内的减速运动能暗示出(或让用户感受出)对象的最高速率。

永久离开屏幕

对象 永久 离开屏幕时使用 加速曲线,在更短的运动持续时间内,加速元素的退场。这样的运动感让觉得元素已经走出去很远了,不会再回来了,减少了用户的聚焦注意。

Do.

物体使用减速曲线入场,不影响屏幕内周围其它元素的位置。在移动端,这个动画的持续时间至少为 225ms。当该元素永久退场时,使用加速曲线,在移动端,这个动画的持续时间至少为 195ms。

Don't.

入场和退场时不要使用标准曲线。入场时,加速曲线会让用户全程聚焦对象,而我们需要的只是用户在动画结束时用户关注一下最终位移点。退场时,减速曲线毫无必要,因为用户根本观测不到运动的结束点(结束点在屏幕外)。

临时离开屏幕

对象 临时 离开屏幕应该使用 Sharp 曲线, 因为对象很可能在任何时间回到屏幕内,因此需要打造一种对象虽然在屏幕外,但是走的不远,触手可及。

随时可能回归的对象可以使用 Sharp 曲线临时退场。当对象回归入场时,使用减速曲线。在移动端,这个动画时间一般至少为 300ms。

某些情况下,如果对象回归入场时方向和退场方向不同的话,对象临时离场时也可以使用加速曲线,而回归入场使用减速曲线。

关联运动动画

这类动画适用于:入场和退场的对象需要和屏幕内其他元素关联运动,要使用平滑的缓动曲线,这样动画幅度会小一些,显得不乱,不过分引起用户注意。

标准曲线 可以在对象关联运动时(且有一个对象入场或退场)使用。相比上面的独立运动动画,这种动画持续时间稍微长一些。

Do.

屏幕内的 FAB 运动受到入场的卡片影响,两个对象采用了同样的标准曲线,整体运动显得非常流畅。在移动端,这种动画时间一般不少于 300ms。

Don't.

在对象上升和下降时使用减速曲线和加速曲线,这让 FAB 的运动感线的非常突兀。这个动画的运动感非常粗糙、混乱。