Varlet组件实现一个丝滑的点击水波效果详解

<template>
  <div v-ripple>点击</div>
</template>

function mounted(el: RipplehtmlElement, binding: DirectiveBinding<RippleOptions>) {
  // 给元素上添加一个对象记录一些数据
  el._ripple = {
    tasker: null,
    ...(binding.value ?? {}),
    touchmoveForbid: binding.value?.touchmoveForbid ?? context.touchmoveForbid,
    removeRipple: removeRipple.bind(el),
  }
  // 给元素绑定了一些事件
  el.addEventListener('touchstart', createRipple, { passive: true })
  el.addEventListener('touchmove', forbidRippleTask, { passive: true })
  el.addEventListener('dragstart', removeRipple, { passive: true })
  document.addEventListener('touchend', el._ripple.removeRipple, { passive: true })
  document.addEventListener('touchcancel', el._ripple.removeRipple, { passive: true })
}

function createRipple(this: RippleHTMLElement, event: TouchEvent) {
  // 首先获取该元素上存储的数据
  const _ripple = this._ripple as RippleOptions
  // 先移除上一个水波
  _ripple.removeRipple()
  // 如果禁用或者上一个水波任务还未执行则返回
  if (_ripple.disabled || _ripple.tasker) {
    return
  }
  // 水波任务
  const task = () => {
    // ...
  }
  // 保存定时器
  _ripple.tasker = window.setTimeout(task, 60)
}

function forbidRippleTask(this: RippleHTMLElement) {
  const _ripple = this._ripple as RippleOptions
  // 是否需要在触摸移动时禁用水波效果
  if (!_ripple.touchmoveForbid) {
    return
  }
  // 如果在60ms内触摸移动了就会取消定时器，自然水波效果就不会有了
  _ripple.tasker && window.clearTimeout(_ripple.tasker)
  _ripple.tasker = null
}

function createRipple(this: RippleHTMLElement, event: TouchEvent) {
  //...
  const task = () => {
    // 定时器任务执行了则把保存的定时器id清空
    _ripple.tasker = null
    // 计算一些数据
    const { x, y, centerX, centerY, size }: RippleStyles = computeRippleStyles(this, event)
    // 创建一个div
    const ripple: RippleHTMLElement = document.createElement('div')
    // 添加一个var-ripple类名
    ripple.classList.add(n())
    // 设置透明度为0，即全透明
    ripple.style.opacity = `0`
    // 设置位置及缩放
    ripple.style.transfORM = `translate(${x}px, ${y}px) scale3D(.3, .3, .3)`
    // 设置大小
    ripple.style.width = `${size}px`
    ripple.style.height = `${size}px`
    // 设置颜色
    _ripple.color && (ripple.style.backgroundColor = _ripple.color)
    // 记录创建时间
    ripple.dataset.createdAt = String(performance.now())
    // 设置被点击元素的样式
    setStyles(this)
    // 将水波元素添加到被点击元素内
    this.appendChild(ripple)
    // 20ms后修改水波元素的样式，达到水波的扩散动画效果
    window.setTimeout(() => {
      ripple.style.transform = `translate(${centerX}px, ${centerY}px) scale3d(1, 1, 1)`
      ripple.style.opacity = `.25`
    }, 20)
  }
  //...
}

:root {
  --ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);
  --ripple-color: currentColor;
}
.var-ripple {
  position: absolute;// 设置为绝对定位
  transition: transform 0.2s var(--ripple-cubic-bezier), opacity 0.14s linear;// 设置过渡效果
  top: 0;
  left: 0;
  border-radius: 50%;// 设置为圆形
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;// 禁止响应鼠标事件
  z-index: 100;
  background-color: var(--ripple-color);// 背景颜色
}

function computeRippleStyles(element: RippleHTMLElement, event: TouchEvent): RippleStyles {
  // 被点击元素距离屏幕顶部和左侧的距离
  const { top, left }: DOMRect = element.getBoundinGClientRect()
  // 被点击元素的宽高
  const { clientWidth, clientHeight } = element
  // 计算水波圆的半径
  const radius: number = Math.sqrt(clientWidth ** 2 + clientHeight ** 2) / 2
  // 直径
  const size: number = radius * 2
  // ...
}

function computeRippleStyles(element: RippleHTMLElement, event: TouchEvent): RippleStyles {
  // ...
  // 手指点击的位置相对于被点击元素的坐标
  const localX: number = event.touches[0].clientX - left
  const localY: number = event.touches[0].clientY - top
  // 水波元素初始位置
  const x: number = localX - radius
  const y: number = localY - radius
  // 水波元素最终位置
  const centerX: number = (clientWidth - radius * 2) / 2
  const centerY: number = (clientHeight - radius * 2) / 2
  return { x, y, centerX, centerY, size }
}

function setStyles(element: RippleHTMLElement) {
  const { zIndex, position } = window.getComputedStyle(element)
  element.style.overflow = 'hidden'
  element.style.overflowX = 'hidden'
  element.style.overflowY = 'hidden'
  position === 'static' && (element.style.position = 'relative')
  zIndex === 'auto' && (element.style.zIndex = '1')
}

const ANIMATION_DURATION = 250
function removeRipple(this: RippleHTMLElement) {
  const _ripple = this._ripple as RippleOptions
  const task = () => {
    // 获取水波元素
    const ripples: nodeListOf<RippleHTMLElement> = this.querySelectorAll(`.${n()}`)
    if (!ripples.length) {
      return
    }
    // 最后一个水波
    const lastRipple: RippleHTMLElement = ripples[ripples.length - 1]
    // 计算延迟时间
    const delay: number = ANIMATION_DURATION - performance.now() + Number(lastRipple.dataset.createdAt)
    // 延迟后将水波的透明度设置为0
    setTimeout(() => {
      lastRipple.style.opacity = `0`
      // 再次延迟后移除水波元素
      setTimeout(() => lastRipple.parentNode?.removeChild(lastRipple), ANIMATION_DURATION)
    }, delay)
  }
  // 创建任务的定时器id存在则等待60ms
  _ripple.tasker ? setTimeout(task, 60) : task()
}

delay = ANIMATION_DURATION - (performance.now() - Number(lastRipple.dataset.createdAt))

function unmounted(el: RippleHTMLElement) {
  el.removeEventListener('touchstart', createRipple)
  el.removeEventListener('touchmove', forbidRippleTask)
  el.removeEventListener('dragstart', removeRipple)
  document.removeEventListener('touchend', el._ripple!.removeRipple)
  document.removeEventListener('touchcancel', el._ripple!.removeRipple)
}