Material Design 风格点击水波纹实现

2023-11-02 16:03:51

Material Design 点击水波纹概述

Material Design 是 Google 推出的一套设计规范，为开发者提供了一系列 UI 设计准则，旨在创造美观且一致的用户体验。Material Design 中的一个标志性元素就是点击水波纹，它在用户点击按钮或其他交互元素时出现，营造出水波荡漾的效果。

点击水波纹不仅美观，而且还提供重要的用户反馈，让用户知道他们已经成功触发了某个交互。实现点击水波纹有多种方法，本篇博文将探讨两种最常见的技术：canvas 绘制和 css 绘制。

Canvas 绘制点击水波纹

Canvas 是 HTML5 中的一个元素，它允许开发者直接在网页中绘制图形和动画。canvas 绘制点击水波纹的主要优势在于它提供了对水波纹外观和行为的完全控制。

代码实现

// 获取 canvas 元素
const canvas = document.querySelector('canvas');

// 设置 canvas 大小
canvas.width = 500;
canvas.height = 500;

// 获取 canvas 上下文
const ctx = canvas.getContext('2d');

// 水波纹参数
const radius = 50; // 水波纹半径
const speed = 0.1; // 水波纹扩散速度

// 鼠标点击事件处理程序
canvas.addEventListener('click', (event) => {
  // 计算点击位置
  const x = event.clientX - canvas.offsetLeft;
  const y = event.clientY - canvas.offsetTop;

  // 绘制水波纹
  ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; // 水波纹颜色
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI); // 绘制圆形水波纹
  ctx.fill();

  // 启动水波纹扩散动画
  let currentRadius = radius;
  const interval = setInterval(() => {
    // 清除之前的绘制
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 扩散水波纹
    currentRadius += speed;

    // 绘制扩散后的水波纹
    ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
    ctx.beginPath();
    ctx.arc(x, y, currentRadius, 0, 2 * Math.PI);
    ctx.fill();

    // 当水波纹扩散到最大半径时停止动画
    if (currentRadius >= canvas.width / 2) {
      clearInterval(interval);
    }
  }, 10);
});

CSS 绘制点击水波纹

CSS 绘制点击水波纹利用了 CSS 中的伪元素和过渡效果。与 canvas 绘制相比，CSS 绘制更轻量级，并且不需要额外的 JavaScript 代码。

代码实现

.button {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.button:active {
  background-color: #ccc;
}

.button:active:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #000;
  opacity: 0.3;
  transform: scale(0);
  transition: transform 0.3s ease-out;
}

.button:active:after {
  transform: scale(1);
}