Багато з нас бачили  анімацію хвильового ефекту, яка була частиною Material Design. Хвиля являє собою коло, яке з'являється в точці клацання, а потім збільшується і зникає. Як інструмент для користувача інтерфейсу, це знайомий спосіб повідомити користувачеві, що сталося клацання.

В React найпростіший спосіб - використовувати  Material-UI, який є популярною UI бібліотекою. Загалом, це дуже хороша ідея, якщо тобі потрібна солідна UI бібліотека, яка генерує UI з коробки. Однак, для невеликого проекту не має сенсу вчитися працювати з великою бібліотекою тільки для досягнення одного ефекту.

Я переглянув безліч проектів, що реалізують щось подібне в Github, Codepen і Codesandbox, і черпав натхнення в деяких з кращих. Хвильовий можливий на будь-який веб-платформі, так як він досягається за допомогою CSS.

Ось як виглядає моя імплементація CSS.

<button class = "button" > 
  <div class = "ripple-container" > 
    <span class = "ripple" > </ span> 
  </ Div>
</ Button>

.button {
  overflow : hidden ;
  position : relative ;
}
.ripple-container {
  top : 0 ; 
  left : 0 ; 
  right : 0 ; 
  bottom : 0 ; 
  z-index : 0 ; 
  overflow : hidden ;
  position : absolute ;
}
.ripple-container span {
  position : absolute ;
  top : . . . ; 
  left : . . . ; 
  height : . . . ; 
  width : . . . ; 
  transform : scale ( 0 ) ;
  border-radius : 100% ; 
  opacity : 0. 25 ; 
  background-color : #fff ; 
  animation-name : ripple ;
  animation-duration : 850ms ; 
}
@keyframes ripple {
  to {
    opacity : 0 ; 
    transform : scale ( 2 ) ;
  }
}

Властивість  overflow: hidden запобігає виходу хвилі з контейнера. Брижі (хвилі) - це коло ( border-radius: 100% ), яке починається з невеликого розміру і стає більше по мірі зникнення. Зростаюча і зникає анімація досягається шляхом маніпулювання  transform: scale  і  opacity .

Однак, нам потрібно буде динамічно надати кілька стилів з використанням Javascript. Знайти позиційні координати: тобто  top і  left, які засновані на тому, де користувач клацнув, а також  height і  width, які залежать від розміру контейнера.

Почнемо

Для своїх стилів мені зручно використовувати стильові компоненти. Ти ж можеш використовувати те, що вважаєш за краще. Перше, що ми зробимо - додамо вищевказаний CSS в наші компоненти. Стилі будуть знаходитися в окремому файлі.

// file => styles.ts
import styled from "styled-components" ;
export const Button = styled . button ` 
  position : relative ;
  padding : 5px 30px ;
  overflow : hidden ;
  cursor : pointer ;
  background - color : $ { ( props ) = > ( props . color ? props . color : "tomato" ) } ;     
  color : #fff ;
  font - size : 20px ;
  border - radius : 20px ;
  border : 1px solid #fff ;
  text - align : center ;
  box - shadow : 0 0 5px rgba ( 0 , 0 , 0 , 0.4 ) ;     
  box - sizing : border - box ;
` ;
export const RippleContainer = styled . div ` 
  top : 0 ; 
  left : 0 ; 
  right : 0 ; 
  bottom : 0 ; 
  z - index : 0 ; 
  overflow : hidden ;
  position : absolute ;
  border - radius : inherit ;

  span {
    position : absolute ;
    transform : scale ( 0 ) ;
    border - radius : 100 % ; 
    opacity : 0.25 ; 
    background - color : $ { ( props ) = > props . color } ; 
    animation - name : ripple ;
    animation - duration : $ { ( props ) = > props . duration } ms ; 
  }

  @ Keyframes ripple {
    to {
      opacity : 0 ; 
      transform : scale ( 2 ) ;
    }
  }
` ;

Зверни увагу, що для кнопки  background-color залежить від  props color  самого стильового компонента, але якщо він не буде переданий, то за замовчуванням буде фон  tomato. Для контейнера теж саме. Плюс тривалість анімації залежить від  props . Це зроблено для того, щоб ми могли динамічно встановлювати ці значення пізніше. Давай визначимо їх зараз:

import React from 'react'
. . .

export function Ripple ( { duration = 850 , color = "#ffffff" } ) {     
  . . .
}

Далі для нашої брижі ми визначаємо масив і створюємо функцію для додавання мерехтіння в цей масив. Кожен елемент масиву буде об'єктом з властивостями  x,  y і  size, які є інформацією, необхідною для стилізації хвилі. Щоб обчислити ці значення, ми винесемо їх з події  mousedown.

export function Ripple ( { duration = 850 , color = '#ffffff' } ) {     
  const [ rippleArray , setRippleArray ] = React . useState ( [ ] ) ;  
  const addRipple = ( event ) = > {   

    // Координати контейнера
    const rippleContainer = event . currentTarget . getBoundingClientRect ( ) ;

    // Вибираємо найдовшу сторону
    const size =
      rippleContainer . width > rippleContainer . height 
        ? rippleContainer . width
        : RippleContainer . height ;

    // Координати клацання миші
    const x = event . pageX - rippleContainer . left - size / 2 ;   
    const y = event . pageY - rippleContainer . top - size / 2 ;   

    // Нова хвиля
    const newRipple = { 
      x ,
      y ,
      size
    } ;
    setRippleArray ( [ . . . rippleArray , newRipple ] ) ;
  } ;
  return ( 
    . . .
  ) ;
}

Наведений вище код використовує API браузера  getBoundClientRect(), який дозволяє нам отримати найдовший край контейнера і координати  x (left) і  y (top), щодо документа. Разом з  MouseEvent.pageX і  MouseEvent.pageY він дозволяє нам обчислювати координати  x і  y миші (клацання) щодо контейнера. 

Тепер можемо візуалізувати масив хвилі (брижі).

return ( 
  < RippleContainer duration = { duration } color = { color } onMouseDown = { addRipple } >
    { RippleArray . length & & 
      rippleArray . map ( ( ripple , index ) = > {  
        return ( 
          < span
            key = { "span" + index } 
            style = { {
              top : ripple . y ,
              left : ripple . x ,
              width : ripple . size ,
              height : ripple . size ,
            } }
          / >
        ) ;
      } ) }
  < / RippleContainer >
) ;

RippleContainer  - це стилізований компонент, який приймає  duration і  color як  props, разом з  addRipple в якості обробника події  onMouseDown. Усередині нього ми відображаємо всі наші хвилі і додаємо розраховані параметри  top, left, width  і  height .

З цим ми закінчили. Тим не менш, є ще одна маленька річ, яку потрібно зробити, а саме: очистити брижі після того, як вони зробили анімацію. Це зроблено для того, щоб застарілі елементи не захаращували DOM.

Нижче приведена реалізація і використання  useEffect хука. По суті, кожен раз, коли ми створюємо нову хвилю, таймер скидається. Зверни увагу, що тривалість тайм-ауту набагато більше, ніж наша брижа.

React . useEffect ( ( ) = > {  
  let bounce ;
  if ( rippleArray . length > 0 ) {    
    window . clearTimeout ( bounce ) ;
    bounce = window . setTimeout ( ( ) = > {  
      setRippleArray ( [ ] ) ;
      window . clearTimeout ( bounce ) ;
    } , Duration * 4 ) ; 
  }
  return ( ) = > window . clearTimeout ( bounce ) ;  
} , [ RippleArray . length , duration ] ) ; 

Тепер ми закінчили з нашим компонентом Ripple. Давай створимо кнопки.

import React from "react" ;
import "./App.css" ;
import { Ripple } from "./RippleButton" ;
import { Button } from "./RippleButton/styles" ;
function App ( ) { 
  return ( 
    <div className = "App" >
      <header className = "App-header" >
        <Button>
          Learn React
          <Ripple duration = { 850 } color = "#fff" />
        </ Button>
        <Button>
          Learn React
          <Ripple duration = { 1000 } color = "#fff" />
        </ Button>
        <Button>
          Learn React
          <Ripple duration = { 2000 } color = "#fff" />
        </ Button>
      </ Header>
    </ Div>
  ) ;
}
export default App;

Тепер у нас є брижі у всіх відтінках і швидкостях. Більш того, наш компонент  Ripple, якщо він має  overflow: hidden і  position: relative в своїх стилях, може бути повторно використаний практично в будь-якому контейнері.

Джерело перекладу