Motion 动画的组织

动画的组织

Material Design 的动效设计能够通过元素的过渡动画,让用户的交互操作有所聚焦。

连贯性 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

在动画过程中,要审慎的选择共享元素的数量和类型,来构建清晰的视觉焦点。

所有当前内容都为共享元素

当材质面(Surface)扩张时,一些元素应该全程保持可见,应该将它们做为两种状态的共享元素。

而复杂的动画效果应该保证某一重要元素全程清晰可见(见下)

All elements from this collapsed card form the header of the expanded card.

少数内容或没有内容做为共享元素

材质面(Surface)扩张时,如果仅仅有 单一元素 在转场完成后保留,那么这个元素应该成为动画的视觉焦点,以这个元素为依据,统一控制其它元素。

在单一共享元素的动画中,利用锚点移动,将共享元素打造为视觉焦点。

如果视图之间 没有共享元素,将所有淡入淡出的元素的Y轴运动和材质面的Y轴运动关联。材质面包含并裁剪内容。

将所有非共享元素的 Y 轴运动和材质面(Surface)高度扩展的运动关联。

没有共享材质面(不推荐)

可以接受没有共享元素,然而不推荐没有共享材质面(Surface),如果 没有共享材质面 来完成动画过渡效果,那么新的材质面要从屏幕外入场,以便构建新的视觉焦点。

多个共享元素

当动画前后保留有 多个共享元素 时,要让最重要的共享元素始终可见。如果重要等级较低的共享元素动画较为复杂混乱,可以考虑让它们在动画过程中消失,然后在动画结束后出现。

Do.

用最重要的共享元素引导用户的视觉焦点至下一个视图。

Don't.

要避免毫无焦点的动画,例如动画过程中展示过多的共享元素,或让共享元素的位移路径交叉,这都是错误的动画做法。

布局感知性

当动画完成后,元素没有完全加载时,在元素加载处要保留有足够的空间,以便元素加载完成后出现。这种处理避免了当新元素出现时布局改变。而且,避免了用户在此时操作出现的界面元素突然偏移的现象。

Do.

在动画过程中,为未加载完成的元素腾出空间,然后在读取完成时优雅的展示。

Don't.

当元素读取完成,进入视图时,不要让布局产生大幅偏移,这会让用户改变注意焦点,从而分心。

创建 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

创建新的 Material 材质面(Surface),创建新的内容,或者凭空创建元素。

Creating new surfaces

要在 操作响应处 或 代表创建含义的视觉元素处 创建新的材质面(Surface)。新的材质面(Surface)一般通过径向或矩形拓展从点击处出现。

Do.

菜单从触控点处出现,将元素和触控点联系起来。

Don't.

菜单从触控点的远方出现,破坏了输入与创建元素之间的联系性。

组织有序的材质面(Surface)动画

当多个材质面同时被创建,整体的运动要参差有序。构建清晰、流畅、动画路径焦点明确、线性方向的动画。

Do.

列表项动画的入场感非常富有层次。栅格项从左往右,从上往下依次执行动画。

Don't.

元素不应该全部一起出现。这种动画给人负担过重,无法构建清晰的视觉焦点。

Don't.

元素的出现顺序应该有规律、有层次,否则用户会感到混淆,难以跟上动画。

Don't.

不要等其它元素的动画执行完成后,才开始当前元素的动画。每个元素之间动画执行的延迟不应该超过20ms。

材质面(Surface)的自动创建

有些情况下,无需用户输入,也没有明确的起始点,材质面就自动出现。这时应该利用运动感,合理结合渐入渐出,位移,缩放等变换,构建优雅的出场动画。

Do.

自动触发出现的材质面(Surface)动画,这个动画流畅迅捷。

Don't.

材质(Surface)面出现的动画显得非常繁琐,让用户感到分心。

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

利用径向反馈动画,让用户输入和材质面(Surface)的反馈无缝结合。

用户输入

通过使用触控涟漪效果,来提示用户操作的触控点,可以让用户输入和屏幕反馈无缝结合,也能让用户知晓操作有效。这个效果出现在鼠标点击或手指触控的位置上。

触控点中心位置的反馈要比触控点远处位置的反馈快。

使用触控涟漪效果,明确触控与屏幕反馈间关系。

从顶部触点的位置向外开始动画,涟漪式扩散出新的颜色。

依据触控点的位置径向反馈出网格中图像的淡出动画。