一起学习 Material Design 02

Chapter Two:动效

1. 材料动效

在移动设备上,长一点的动画时间在 300-400ms 之间,短一点的动画时间在 150-200ms 之间。动画时间太长会让用户感觉迟钝,太短会感觉难以跟上。 动效的特性:

  • 反应敏捷
  • 自然(在现实世界中,物体的加速度和减速度会受到物体自身的重量和表面摩擦力的影响,因此在 Material Design 中,物体不会突然开始运动,也不会突然停止。)
  • 有意识的:当元素转换到视图中时,它们和它们周围的元素会以某种方式编排在一起,以此来定义它们之间的关系。
  • 有意图的:运动中的材料会指引用户在正确的时间聚焦于正确的位置。

2. 时长 & 缓动

2.1 常用时长

  • 移动端的过渡时长通常在 300ms 内,根据情况可做如下调整:
    • 幅度大、复杂的、全屏过渡动画可能需要更长的持续时间,可以长达 375ms
    • 元素进入屏幕需要的时长为 225ms
    • 元素离开屏幕需要的时长为 195ms
    • 超过 400ms 的过渡动画可能会感觉太慢。
  • 平板:
    • 平板上的过渡时长会比手机上的长 30%。例如,在手机上需要 300ms 的过渡,在平板上需要增加到 390ms。
  • 可穿戴设备:
    • 可穿戴设备上的过渡时长会比手机上的短 30%。例如,在手机上需要 300ms 的过渡,在可穿戴设备上需要减少到 210ms。
  • 桌面端:
    • 桌面端的动画应该比手机端更快、更简单。动画的持续时间应保持在 150ms 到 200ms 之间。
    • 桌面端的过渡动画可能不太明显,所以应该比手机端的动画更敏捷快速。
    • Web 端复杂的动画通常会掉帧(除非使用了 GPU 加速)。更短的过渡时间可以让动画不那么引人注目。

2.2 自然缓动曲线

  • 标准曲线

标准曲线(也称为 “ease in out” )是最常见的缓动曲线。元素会在屏幕上的位置之间快速加速,缓慢减速。它主要用于材料变大变小,以及其他属性改变的动画。

  • 减速曲线

使用减速曲线(也称为 “ease out” )时,元素会全速进入屏幕,然后缓慢减速到目标位置。
减速期间,元素可能会放大尺寸(到 100%)或不透明度(到 100%)。在一些情况下,当元素以 0% 的不透明度进入屏幕时,可能会从比原始尺寸更大的尺寸略微收缩一点。

  • 加速曲线

使用加速曲线(也称为 “ease in” )时,元素会全速离开屏幕。离开屏幕时不会减速。
在动画开始时会加速,并可能缩小尺寸(到 0%)或不透明度(到 0%)。在一些情况下,当元素以 0% 的不透明度离开屏幕时,同时可能会放大或缩小尺寸。

  • 夏普曲线

使用夏普曲线(也称为 “ease in out” )时,元素会很快的加速和减速。主要用在已有的元素离开屏幕后重新返回时。
元素可以在屏幕的起始点快速加速,然后以对称曲线快速减速到离开屏幕的点。它的减速度比标准曲线快,因为在离开屏幕时并不存在明确的路径。元素可能在任何时候返回。

3. 移动

3.1 屏幕内的移动

  • 向上弧线

在现实世界中,物体需要使用外力克服重力才能上升。屏幕内的元素的向上移动也需要类似的外力,使元素从一个较慢的速度开始加速。

  • 向下弧线

在现实世界中,元素会通过重力加速下落。在屏幕上,元素会以更快的速度向下移动,受较少的外力作用。

  • 何时不用曲线轨迹

3.2 进出屏幕的移动

  • 进出屏幕

    • 元素进入屏幕时使用减速曲线实现快速进入,表明他们已经以峰值速度行进了。
    • 元素永久离开屏幕时,使用加速曲线来实现在较短的时间内加快离开屏幕,因为它们不会再返回,且不太需要获得用户的注意。(Jimmy:总结说来,进入屏幕且对屏幕其他元素的位置没有影响,则使用减速曲线。永远离开屏幕,应使用加速曲线。)
  • 暂时离开屏幕

元素暂时离开屏幕时应该使用夏普曲线,因为元素随时可能返回屏幕,且在屏幕外不会距离屏幕太远。(Jimmy:暂时离开时,使用夏普曲线,返回屏幕时,使用减速曲线)

4. 材料形变

4.1 矩形转换

  • 宽高转换
    • 不对称转换:当需要改变多个元素的的属性或位置时,使用不对称转换。(Jimmy:不对称变化就是宽高不同时发生变化。当材料要变大时,先稍微变宽一点再变高;材料变小时,先调整高度再调整宽度。)
    • 对称转换:当单个元素沿着单个轴进行变换时,最适合使用对称转换。(Jimmy:这个就是宽高同时变化了。)

4.2 径向转化

  • 径向转换是源自用户的触摸点的、对称的、圆形的视觉效果。它们通常应用在圆形的表面,用于转换成其他形状。例如圆形按钮,点击后变成正方形就需要用到径向转换。而且径向转换是对称转换。
  • 径向转换不适用于复杂形状。
  • 转换的起点可以是元素的当前位置、或者是表面最终出现的位置的中心。

4.3 合并 & 切割

  • 合并

材料可以合并到其他元素中,或者分割成多个部分。当两片材料彼此接近时,在完成移动前,它们的边缘会相遇且重叠。

  • 分割

当材料分割成多个部分时,每一部分在刚开始移动时就分离了。

  • 阴影

来自分离的元素的阴影,不会覆盖在同级元素的上面。

5. 编排

5.1 连续性

  • 共享所有内容元素:

当表面扩展时,特定的元素在扩展过程中应始终保持可见。

  • 很少或没有共享元素:
    • 当扩展一个表面时,如果在转换后只存在单个元素,则该元素应该是转换的焦点,由它来控制所有其他元素。
    • 如果视图之间没有共享的元素,则将所有元素固定到表面上一起纵向移动、淡入淡出。表面会修剪其中的内容。
  • 多个共享元素:

当有多个元素在转换过程中可见时,应该仅包含最重要的元素。如果某些元素在转换过程中太过抢眼,则在转换期间可能会消失,一旦转换完成,它们又会重新出现。

  • 布局意识:

如果转换完成时,还有一些元素没有加载,请在元素即将出现的位置留出足够的空间。这避免了元素突然出现时造成的元素跳动;也避免了用户触摸时,触摸目标突然跳开,使用户失望。

5.2 创建

  • 创建新的表面:把新创建的表面与创建它们的元素或操作关联起来。新表面通常以径向或矩形转换的方式从触摸点出现。
  • 编排表面:当同时创建多个表面时,把它们快速交错显示出来。在单个方向上创建清晰、平滑的视觉路径。
  • 自主创建表面:在没有用户输入源或没有起始点的情况下创建的表面,应该使用优雅的转换组合,包含淡入淡出、位移、缩放等效果。

5.3 径向反应

  • 使用触摸涟漪把用户输入和屏幕反应联系起来,同时指示出用户的触摸点,并告知用户已接受到触摸操作。无论是触摸还是鼠标,都应该在触摸点出现涟漪。
  • 在触摸点附近发生的屏幕反应,应该比远离触摸点发生的屏幕反应出现的更早。

6 自定义动画

6.1 图标

  • 系统图标

图标可以提供双重功能。例如,菜单图标可以平滑的转换成后退图标,之后再转换回来。这个效果既告诉了用户按钮的功能,又给交互效果添加了一个极有效的元素。

  • 产品图标

带动画的产品图标应该在应用被打开时呈现优雅且惊艳的动画。

6.2 插画

在图片和插画中使用微妙的动画,可以为用户带来更有趣的体验。

Comments
Write a Comment