Angular Material 波纹

我们可以通过使用波纹来指示触摸点并确认已接收到触摸输入，从而将用户输入与屏幕反应连接起来。对于触摸或鼠标，这发生在接触点。

matRipple 属性指令定义了波纹在用户交互时动画的区域。

默认情况下，当 matRipple 指令的主机元素收到鼠标或触摸事件时，会激活波纹。按下时，波纹将从接触点开始淡入，向外辐射以覆盖主机元素。每个波纹仅在释放鼠标或触摸时才会淡出。

可以通过获取对 MatRipple 指令的引用并调用其 launch 方法以编程方式触发波纹。

波纹触发器

默认情况下，波纹将在与指令的主机元素交互时淡入。在某些情况下，开发人员可能希望在与其他元素交互时显示波纹，但仍希望将波纹放置在其他位置。这可以通过指定 matRippleTrigger 选项来完成，该选项需要对 HTMLElement 的引用。

手动波纹

可以通过获取对 MatRipple 指令的引用以编程方式显示波纹。

在上面的示例中，没有传递特定的坐标，因为已将 centered ripple 选项设置为 true，并且坐标无关紧要。

以编程方式调度的波纹可以使用 persistent 选项启动。这意味着波纹不会淡出，需要使用 RippleRef 淡出（适用于焦点指示器）。

如果开发人员希望在元素内的特定坐标处启动波纹，则 launch() 方法还接受 x 和 y 坐标作为参数。这些坐标是相对于波纹容器元素的。

全局选项

开发人员可以为应用程序中的所有波纹指定选项。

可以调整波纹的速度，并且也可以全局禁用波纹。

可以通过设置 MAT_RIPPLE_GLOBAL_OPTIONS 提供程序来指定全局波纹选项。

所有可用的全局选项都可以在 RippleGlobalOptions 接口中看到。

禁用动画

可以通过使用全局动画选项来禁用波纹的动画。如果将 enterDuration 和 exitDuration 设置为 0，则波纹将没有任何动画地出现。

它特别适用于与 disabled 全局选项结合使用，因为全局禁用波纹不会影响焦点指示器波纹。如果有人仍然出于性能原因希望禁用这些波纹，则可以将 duration 设置为 0 以删除波纹感。

注意：如果使用 NoopAnimationsModule，则波纹也不会有动画。这意味着动画配置中的时长将不被考虑在内。

动画行为

Material Design 规范中显示了两种不同的动画行为，用于波纹的淡出。

默认情况下，如果释放鼠标或触摸且进入动画完成，则所有波纹将开始淡出。规范中也显示的第二种可能的行为是，波纹在鼠标或触摸释放时立即开始淡出。

在某些情况下，开发人员可能更喜欢这种行为而不是默认行为，并且希望对 Angular Material 也能如此。可以通过指定 terminateOnPointerUp 全局波纹选项来激活此行为。

在运行时更新全局选项

要在运行时更改全局波纹选项，请注入 MAT_RIPPLE_GLOBAL_OPTIONS 提供程序并更新所需的选项。

有多种注入全局选项的方法。为了更容易地在运行时注入和更新选项，建议创建一个实现 RippleGlobalOptions 接口的服务。

现在全局波纹选项已设置为我们可以注入的服务，该服务可用于在运行时更新任何全局波纹选项。