UI 动效 013：Touch Ripple，为什么按钮一按会泛起波纹

自制机制示意：波纹从按下点扩散，被按钮圆角裁切，最后淡出；非真实产品截图。

它叫什么

适合放在哪里

为什么看起来像水波

1. 记录按下点。用户按下时，读取 pointer 坐标，再减去按钮自身的位置，得到按钮内部的圆心。Web 里常用 getBoundingClientRect() 拿到元素相对视口的位置和尺寸。3
2. 算最大半径。圆要扩散到能盖住按钮最远的角，所以半径通常取「按下点到四个角的最大距离」。这样无论点在左边、右边还是中间，波纹都能填满按钮。
3. 用遮罩裁切。按钮是圆角矩形，波纹是圆。把 ripple 放进 overflow: hidden 的按钮层里，圆就会被按钮边界裁掉，看起来像在按钮表面流动。
4. 扩散并淡出。圆从 scale(0) 到 scale(1)，同时把 opacity 从可见降到 0。CSS 的 transform 可以对元素做缩放、位移和旋转，适合处理这种不想触发布局重排的动画。4 如果不用额外 DOM，也可以用 radial-gradient() 画出从圆心向外扩散的圆形渐变；MDN 对它的定义就是从一个 origin 向外辐射的颜色过渡。5

Web 里怎么写

<button class="ripple-button">确认支付</button>

.ripple-button {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  padding: 14px 24px;
  color: white;
  background: #2f6fed;
}

.ripple-button .ripple {
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  transform: scale(0);
  pointer-events: none;
  animation: ripple-out 520ms ease-out forwards;
}

@keyframes ripple-out {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

document.querySelectorAll('.ripple-button').forEach((button) => {
  button.addEventListener('pointerdown', (event) => {
    const rect = button.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    const radius = Math.hypot(
      Math.max(x, rect.width - x),
      Math.max(y, rect.height - y)
    );

const ripple = document.createElement('span');
    ripple.className = 'ripple';
    ripple.style.width = ripple.style.height = `${radius * 2}px`;
    ripple.style.left = `${x - radius}px`;
    ripple.style.top = `${y - radius}px`;

button.append(ripple);
    ripple.addEventListener('animationend', () => ripple.remove());
  });
});

Android / Compose 的实现思路

Box(
    modifier = Modifier.clickable(
        interactionSource = remember { MutableInteractionSource() },
        indication = ripple(),
        onClick = { /* handle click */ }
    )
) {
    Text("确认支付")
}

做顺的关键

一句话记住