动效 动效编排

动效编排

Material 动效通过在过渡过程中共享元素的运动来引导用户的视觉焦点。

创建表面

将新创建的表面作交错排列。

径向反馈

使用触摸涟漪将用户输入与表面的反馈联系起来。

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.

新的材质表面及其内容可以凭空创建。

创建新表面

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

推荐做法

此菜单从触摸点出现,从而将元素与触摸点绑定。

不推荐做法

此菜单在远离触发它的触摸点处出现,破坏了它与输入方式之间的关联。

编排表面

当同时创建多个新表面时,应以快速交错的方式呈现每个表面。在单一方向上创建一条清晰、平滑的视觉路径。

推荐做法

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

不推荐做法

列表项不应同时全部出现。这会造成视觉过载,并使清晰的焦点消失。

不推荐做法

带有交错入场效果的列表项,其出现顺序不应令人困惑。

不推荐做法

不要等前一个项目的动画完全结束后才开始呈现下一个项目。每个项目的交错入场间隔不应超过 20 毫秒。

自主创建表面

在没有用户输入或没有明确起点的情况下创建的表面,应通过结合淡入淡出、位移和缩放变换来实现优雅的出现。

推荐做法

自动触发的表面应平滑且快速地出现。

不推荐做法

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

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

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

用户输入

使用触摸涟漪将用户输入与屏幕反馈联系起来,既能指示触摸点,又能确认触摸输入已被接收。无论是触摸还是鼠标操作,涟漪效果都应出现在接触点。

靠近触摸点发生的屏幕反馈,应比远处发生的反馈出现得更早。

使用触摸涟漪将屏幕反馈与触摸点关联起来。

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

此网格中的图片根据点击点周围的径向反馈淡出。