涟漪触摸效果生成器 - Material点击波纹

Material Design 涟漪（Ripple）是 Google 设计规范中的核心交互反馈机制。当用户点击或触摸界面元素时，从触点位置产生一个向外扩散的圆形波纹，模拟水面涟漪的物理效果。它能提供即时的视觉反馈，让用户感知到操作已被系统接收，同时增强了界面的层次感和生命力。涟漪通常配合透明度渐变动画，从触点扩散至覆盖整个元素后淡出消失。

JS 方案：优点在于可以精确定位点击坐标，波纹从用户实际点击的位置开始扩散，体验更真实自然；支持动态参数调整，灵活度更高。缺点是依赖 JavaScript，略微增加代码量。

纯 CSS 方案：使用 :active 伪类和 ::after 伪元素实现，无需 JS，性能开销极低，代码简洁。但波纹只能从元素中心扩散，无法跟随点击位置，且参数固定不可动态调整。适合对交互精度要求不高的简单场景（如按钮点击反馈）。

1. 使用 transform 和 opacity：仅对 transform: scale() 和 opacity 做过渡动画，这两个属性在合成层上运行，由 GPU 加速，不会触发重排（reflow）。
2. 设置 pointer-events: none：波纹元素不应拦截鼠标事件，避免影响后续交互。
3. 及时清理 DOM：动画结束后通过 transitionend 事件移除波纹元素，防止内存泄漏。
4. 限制同时存在的波纹数量：快速连点时适当限制并行波纹数（如最多 5-8 个），避免大量 DOM 节点堆积。
5. 使用 will-change 提示浏览器：对波纹容器设置 will-change: transform, opacity 可提前创建合成层。

移动端延迟主要源于浏览器对 click 事件的 300ms 等待（用于判断是否为双击缩放）。解决方案：
• 使用 pointerdown 或 touchstart 事件替代 click 来触发涟漪，响应更即时。
• 在 HTML <meta> 标签中设置 user-scalable=no 或使用 touch-action: manipulation 可消除双击缩放延迟。
• 现代移动浏览器（Chrome 32+、iOS Safari 9.3+）已针对此问题优化，但为兼容旧设备，建议使用 pointer 事件。

涟漪效果广泛应用于：
• 按钮点击：提交按钮、图标按钮、浮动操作按钮（FAB）等。
• 列表项：导航菜单、设置列表、聊天列表的点击反馈。
• 卡片交互：可点击的卡片、文章预览块。
• 图片查看器：点击图片时的视觉反馈。
• 自定义控件：开关、复选框、单选按钮的增强反馈。
任何需要向用户确认"操作已接收"的可交互元素都适合添加涟漪效果。