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