AOSP Ripple WebGL Playground

如何使用

• 同时只展示一个： 鼠标 hover 或键盘 focus 任一卡片，该卡片的 WebGL canvas 立即挂载并预览； 移到其他卡片时旧的自动卸载、新的挂载，全局始终只有一个 WebGL context。
• 连续点击： 与 AOSP 一致——每次 pointerdown 新建一个 RippleForeground 对象， 松手时移到 exiting 列表；快速连点会出现多个 ripple 叠加（最多 10 个）。
• Bounded 开关： 仅对 Refactored 7-8 生效。ON=350px 固定半径 + 按下不显示；OFF=对角线 + 立即显示。
• Duration 滑块： 动画时长倍率。0=暂停（虚拟时间冻结），1=原速，10=10倍时长（慢动作便于观察）。
• Width / Height： 调整 demo 按钮的宽高，观察不同尺寸下 ripple 的表现。
• 深色模式： 右上角 ☀️/🌙 按钮切换页面浅色/深色主题，跟随系统偏好初始化。
• 统一背景色： 开启后所有卡片共用同一按钮底色（可用取色器自定义）， ripple 颜色会自动按按钮亮度切换深/浅（亮色按钮→深色 ripple，反之亦然）。
• 自定义 Ripple 颜色： 开启后用取色器指定 ripple 颜色（保留各版本原 alpha），优先级高于自适应。