3、运动(Movement)
Material的运动借鉴了现实世界中的物理法则,好比重力的参考。html
屏幕上的运动(On-screen movement)
圆弧状向上(Arc upward)
圆弧状向下(Arc downward)ide
进入和离开屏幕的运动(In-and-out screen movement)
独立运动(Independent movement)
关联运动(Relative movement)ui
在屏幕范围内运动
在屏幕范围内两点间运动的对象的运动路径呈凹型圆弧状,而且都使用标准曲线(Standard curve)缓动效果。google
圆弧状向上
模拟现实世界中重力的影响,故在屏幕范围内Material对象作向上移动会受到重力的影响。pwa
对象向斜上方移动,整个运动过程是逐渐加速移动。
可行
对象向斜上方移动忽略了重力对其的影响,显得很是不天然。
不可行
圆弧状向下
一样地,对象向下移动时受到重力影响加速运动。3d
对象向斜下方移动,整个运动过程是逐渐减速移动。
可行
对象向斜下方移动忽略了重力对其的影响,显得很是不天然。
不可行
不是沿圆弧路径运动的状况
若是对象沿单一轴向(横向或纵向)移动,就不须要沿圆弧路径运动。这种状况下,这些简单的对象移动能够稍微加快点速度。cdn
保持对象沿单一轴向直线运动。
可行
对象沿单一轴向移动的状况下不要使用圆弧路径。
不可行
对象进入和离开屏幕的动效也是沿单一轴向运动。htm
对象沿直线进入屏幕有助于在用户脑海中造成对对象入口位置的清晰了解。
可行
在离开屏幕的运动中不要应用圆弧路径,由于这会让用户难以理解入口的位置。
不可行
进入和离开屏幕的运动
独立运动
从屏幕外(内)到屏幕内(外)作运动的对象由于不会影响到其余对象在屏幕上的位置,因此被称之为独立对象。对象
进入屏幕
对象进入屏幕动效应用的是减速曲线(Deceleration curve)效果。从屏幕外加速进入屏幕内,进入后慢慢减速直至中止。运用这种效果的对象运动看起来就像是匆匆赶过来的同样。blog
永久地离开屏幕
若是一个对象离开屏幕后不再会返回屏幕,那它应使用加速曲线(Acceleration curve)的运动效果。在时间上,其离开的时间应比进入屏幕的时间要短,由于该对象不再会返回,也不须要用户太多对其的关注,因此就让它赶快走吧。
减速曲线(Deceleration curve)适用于进入屏幕的对象运动,这类对象运动不会影响到其余对象在屏幕上的位置。在移动端上,进入屏幕的动效持续时间通常是225ms。与之对应的加速曲线Acceleration curve)适用于永久地离开屏幕的对象运动。在移动端上,永久离开屏幕的动效持续时间通常在195ms以上。
可行
不要使用标准曲线(standard curve)在进入或离开屏幕的对象运动上面。如在刚入屏之时,对象运动不该该仍是在逐渐加速的,由于咱们更须要关注的是它停留在屏幕上的位置,因此它应该加速进入屏幕以后朝着屏幕上的停留点逐渐减速;在离屏的时候,对象运动不该该是逐渐减速的,由于它离开屏幕后停留的点咱们根本看不见,因此不必用减速运动凸显它的行进路径。
不可行
暂时地离开屏幕
若是一个对象只是暂时离开屏幕,并有可能随时返回屏幕的话,那它的运动应使用突变曲线(Sharp curve)的运动效果。
突变曲线适用于那些离开屏幕后有可能返回屏幕的对象。当这些对象返回屏幕的时候使用减速曲线(Deceleration curve)。在移动端上,暂时离开屏幕的动效持续时间通常在300ms以上。
可行
加速曲线运动适用于那些离开屏幕后不再会返回屏幕的对象,或者即便返回也是从屏幕上不一样于以前的位置返回屏幕。
不可行
关联运动
若是一个对象在进入(或离开)屏幕的时候跟其余屏幕上已有的对象发生冲突,那么其余对象应该沿着这个对象的运动路径而且应用平滑的曲线运动效果作关联运动。这样作可以最小限度引发对象间关系的混乱,和避免引发用户注意。
被迫移动的这些对象运动应使用标准曲线(standard curve)效果。
屏幕上的浮动按钮(FAB)的位置被进入屏幕的卡片(card)所影响,浮动按钮被迫跟随卡片的运动路径运动。为了不引发对象间关系的混乱和干扰到用户注意力,浮动按钮的运动必须使用标准曲线效果,这样就能够保持浮动按钮在开始和结束运动时候的平稳。在移动端上,这种被关联的运动持续时间通常在195ms以上。
可行
虽然是关联运动,但这并不意味着被迫移动的浮动按钮也会使用减速、加速曲线效果。从图中你能够看出,若是应用了这两个效果,你就会看到浮动按钮很是忽然地开始和结束运动。这确定会引发用户注意,制造没必要要的视觉干扰。
不可行