「React」制作波纹按钮 Ripple Button

简介

模仿 Google Material 点击波纹效果。

预览

准备

使用 react-spring 动画库。

yarn add react-spring@next

原理

按钮结构：

<button>
	<span class="g-ripple" />
    <span>text</span>
</button>

其中 .g-ripple 用来模拟波纹效果。

.g-ripple {
  position: absolute;	/* 通过top和left修改位置 */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

父组件 button 至少包含：

{
  position: relative;	/* 子组件需要通过绝对布局定位 */
  overflow: hidden;	/* 防止波纹显示溢出来 */
}

动画原理：

点击后获取到相对于 button 的坐标，计算波纹的正确坐标，通过 react-spring 进行动画，修改 opacity: 1->0，transform: scale(0)->scale(2) 完成动画。

代码

Ripple.js

import React, { useState, useEffect, useRef } from 'react';
import './index.css';
import { useSpring, animated } from 'react-spring';

function calcEventRelativePos(event) {
  const rect = event.target.getBoundingClientRect();
  return {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top,
  };
}
function Ripple(props) {
  const [data, setData] = useState({ top: 0, left: 0, width: 0, height: 0 });
  const isInit = useRef(true);
  const rippleEl = useRef(null);
  const { spawnData } = props;
  const rippleAnim = useSpring({
    from: {
      ...props.style,
      ...data,
      transform: 'scale(0)',
      opacity: 1
    },
    to: !isInit.current ? { opacity: 0, transform: 'scale(3)' } : {},
    config: {
      duration: props.duration || 800
    },
    reset: true
  });

  useEffect(() => {
    if (isInit.current) {
      isInit.current = false;
    } else {
      const parentEl = rippleEl.current.parentElement;
      const size = Math.max(parentEl.offsetWidth, parentEl.offsetHeight);
      setData({
        width: size,
        height: size,
        top: spawnData.y - size / 2 || 0,
        left: spawnData.x - size / 2 || 0
      });
    }
  }, [spawnData]);
  return (
    <animated.span
      className="g-ripple"
      style={rippleAnim}
      ref={rippleEl}
    ></animated.span>
  );
}

export { Ripple, calcEventRelativePos };

RippleButton.js

import React, { useState } from 'react';
import { Ripple, calcEventRelativePos } from './ripple';

function RippleButton(props) {
  const [spawnData, setSpawnData] = useState({});
  function onClick(event) {
    props.onClick && props.onClick();
    setSpawnData({
      ...calcEventRelativePos(event),
      time: Date.now()
    });
  }

  return (
    <button
      {...props}
      type="button"
      className={`g-btn ${props.className || ' '}`}
      onClick={onClick}
      style={props.style}
    >
      <Ripple spawnData={spawnData} />
      <span>{props.children}</span>
    </button>
  );
}

export { RippleButton };

index.css

.g-btn {
  display: inline-block;
  border: 1px solid #D0D3D4;
  border-radius: 4px;
  padding: 0 16px;
  background: #3498DB;
  margin: 0;
  height: 32px;
  outline: none;
  cursor: pointer;
  /* important↓ */
  position: relative;
  overflow: hidden;
}

.g-btn:hover {
  background: #5DADE2;
}

.g-btn>span {
  display: inline-block;
  color: white;
  pointer-events: none;
}

.g-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

github-react-ripple-button