「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