Introduction to the

Mimicking the Google Material click ripple effect.

preview

To prepare

Use the React-Spring animation library.

yarn add react-spring@next
Copy the code

The principle of

Button structure:

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

G -ripple is used to simulate ripple effect.

.g-ripple {
  position: absolute;	/* Change the position with top and left */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}
Copy the code

The parent component button contains at least:

{
  position: relative;	/* Child components need to be positioned with absolute layout */
  overflow: hidden;	/* Prevent the ripple display from spilling out */
}
Copy the code

Principle of animation:

Click to obtain the coordinates relative to the button, calculate the correct coordinates of the ripple, animate it through react-Spring, modify opacity: 1->0, transform: scale(0)->scale(2) to complete the animation.

code

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((a)= > {
    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 };
Copy the code

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-btnThe ${props.className` | | '}}onClick={onClick}
      style={props.style}
    >
      <Ripple spawnData={spawnData} />
      <span>{props.children}</span>
    </button>
  );
}

export { RippleButton };
Copy the code

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 left * /
  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;
}
Copy the code

github-react-ripple-button