涟漪反馈

什么时候用

• 按钮、列表项、开关这类要明确「点到了」的控件
• 触屏上没有 hover，需要让人看出这一下点在哪、有没有生效
• 整套界面想要统一的点击反馈语言（Material 风格的基础件）

适用场景：按钮 / 列表 / 卡片

推荐取值

扩散时长

300–600ms

起始透明度

0.25–0.4

直径

不小于元素对角线，从落点算起

缓动

ease-out

裁剪

overflow: hidden

别搞混

• 和「按压反馈」的区别

  按压反馈让整个控件缩放或变暗，是「整体」的状态；涟漪从落点扩散，能看出点在哪一下，两者经常叠在一起用。

  容易混的去看「按压反馈」

• 和「进度条」的区别

  涟漪只是「按下收到了」，不表示进度；别让它一直扩下去或循环，否则用户会以为在加载。

容易踩的坑

• 波纹用 transform: scale() + opacity 扩散，别去改 width/height，否则每一帧都要重排
• 每个波纹节点动画结束就要移除，手指长按会连着生成，不管就会堆出上百个节点
• 要按落点扩散就得用 pointerdown 的坐标减去元素盒子的位置，写死从中心扩散会丢掉「点在哪」的信息
• 控件要 overflow: hidden 才裁得出边界，否则波纹会溢出到外面
• 键盘 Enter/Space 触发时没有坐标，退化成从中心扩散，别让它什么都不发生
• prefers-reduced-motion 下改成一个短促的底色变化，功能不变

无障碍降级

prefers-reduced-motion 下不放涟漪，改成 80–150ms 的底色或描边变化，按下反馈依然存在。

关键词

• ripple effect
• Material ripple
• pointerdown
• radial-gradient
• transform: scale()
• overflow: hidden
• animation-play-state
• ::after

参考

• MDN · scale()
• MDN · pointerdown 事件

相关展品

• F-02按压反馈Press Feedback
• V-05光晕聚光Spotlight Glow