动效 编排

编排

运动中的材料通过在转换过程中共享元素的交互来引导用户的视觉焦点。

创建表面

把新创建的表面错开编排。

径向反应

使用触摸涟漪把用户输入和表面反应联系起来。

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.

新的材料表面和它的内容可以凭空创建。

创建新的表面

把新创建的表面与创建它们的元素或操作关联起来。新表面通常以径向或矩形转换的方式从触摸点出现。

正确示例

此菜单从触摸点出现,并将元素绑定到了触摸点。

错误示例

此菜单从距离触摸点很远的地方出现,破坏了菜单和触摸点之间的关联。

编排表面

当同时创建多个表面时,把它们快速交错显示出来。在单个方向上创建清晰、平滑的视觉路径。

正确示例

列表项有一个稍微交错的入场效果。网格项的交错效果为从左到右、从上到下。

错误示例

列表项不应该同时一次性地出现。这样无法创造清晰的视觉焦点。

错误示例

带有交错入场效果的列表项,不应该以混乱的顺序出现。

错误示例

不要等前一个项目的动画结束后才开始出现下一个。使用交错入场时,交错的时间间隔不应超过 20ms。

自主创建的表面

在没有用户输入源或没有起始点的情况下创建的表面,应该使用优雅的转换组合,包含淡入淡出、位移、缩放等效果。

正确示例

自主创建的表面应平滑且快速地出现。

错误示例

表面创建期间过多的动画会分散用户的注意力。

径向反应 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

使用径向反应来阐明用户输入和表面反应之间的联系。

用户输入

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

在触摸点附近发生的屏幕反应,应该比远离触摸点发生的屏幕反应出现的更早。

使用触摸涟漪把触摸点和屏幕反应关联起来。

从触摸点开始,应用栏会随着新颜色向外扩散而改变颜色。

网格中的图片按照从触摸点出现的径向反应淡出。