Vue implements click feedback instructions for water ripple effect

Water wave effect

When the user clicks, a ripple effect will be generated with the center of the click as the center. It is suitable for various scenes, beautiful without being exaggerated, and the key is that it can provide very intuitive feedback to the user.

Let's see the implementation

First of all, the encapsulation here is based on Vue3 custom instructions. The custom instructions of Vue3 have not changed much compared with Vue2. Our goal is to complete a basic prototype of the water wave command, and here we proceed step by step.

Customize a water ripple default style

Water ripples are actually a process in which a small circle is generated at the location where the user clicks, and the size gradually expands to the entire clicked element. So here we first formulate a basic style of water waves and set up transition animations. The transition animation should be a process that starts slow and then speeds up. Here we use Bezier curve customization

.my-ripple {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.68, 0.01, 0.62, 0.6), opacity 0.08s linear;
  will-change: transform, opacity;
  pointer-events: none;
}

Calculate the position and diameter of water ripples

If we determine the diameter of the water wave, the (x, y) when it is created, and the (x, y) when the transition animation ends, we can use transition to render the water wave animation. The (x, y) when it is created is the position where the user clicks, but how do we calculate the diameter of the water wave and the (x, y) when the transition animation ends? Our elements are all rectangles. No matter where the user clicks on the element, the circle with the hypotenuse of the rectangle as its diameter can perfectly cover the entire element. To calculate the hypotenuse, we use elementary school math knowledge to find the square root of the sum of the squares of both sides. The following is a water wave deduction diagram at the end of the transition animation.

First arrow: Expected water wave Second arrow: Water wave created at element (0,0) Third arrow: Water wave created at element (0,0) without rounded corners

We can find that by offsetting the water wave created by the element (0,0) point, we can get the water wave we want, from which we can infer that

The size of the water wave at the end of the animation = The (x,y) of the hypotenuse of the circle when it is created = The position where the user clicks The (x,y) at the end of the transition animation = The water wave created at the element (0,0) is offset by x and y

function computeRippleStyles(element, event) {
  const { top, left } = element.getBoundingClientRect()
  const { clientWidth, clientHeight } = element
  
  const radius = Math.sqrt(clientWidth ** 2 + clientHeight ** 2) / 2
  const size = radius * 2
  
  const localX = event.clientX - left
  const localY = event.clientY - top

  const centerX = (clientWidth - radius * 2) / 2
  const centerY = (clientHeight - radius * 2) / 2

  const x = localX - radius
  const y = localY - radius

  return { x, y, centerX, centerY, size }
}

Create water waves when the mouse is pressed

Then we need to create water waves when the mouse is pressed and listen for the mouse press event. Here we take the PC side as an example. When the water waves are just created, use transform to shrink them to 0.3. This is a relatively suitable creation size that the author has tried. Then modify transform to trigger the transition water wave diffusion animation. Transparency transition is also added here to make the water wave ripples more textured.

function createRipple(event) {
  const container = this
  const { x, y, centerX, centerY, size } = computeRippleStyles(container, event)
  const ripple = document.createElement('div')
  ripple.classList.add('my-ripple')
  ripple.style.opacity = `0`
  ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`
  ripple.style.width = `${size}px`
  ripple.style.height = `${size}px`
  // Record the creation time of the water wave ripple.dataset.createdAt = String(performance.now())

  const { position } = window.getComputedStyle(container)
  container.style.overflow = 'hidden'
  position === 'static' && (this.style.position = 'relative')

  container.appendChild(ripple)

  window.setTimeout(() => {
    ripple.style.transform = `translate(${centerX}px, ${centerY}px) scale3d(1, 1, 1)`
    ripple.style.opacity = `.25`
  })
}

const VRipple = {
  mounted(el) {
    el.addEventListener('mousedown', createRipple)
  }
}

Destroy the water wave when the mouse is lifted

When the mouse is lifted, you only need to find the generated water wave node to modify the transparency, and then remove the water ripple node after the transparency modification animation ends.

function removeRipple() {
  const container = this
  const ripples = container.querySelectorAll('.my-ripple')
  if (!ripples.length) {
    return
  }

  const lastRipple = ripples[ripples.length - 1]
  // Calculate how long the diffusion animation will take to execute based on the creation time of the water wave to ensure that each water wave completes the diffusion animation const delay = 300 - performance.now() + Number(lastRipple.dataset.createdAt)

  setTimeout(() => {
    lastRipple.style.opacity = `0`
    
    setTimeout(() => lastRipple.parentNode?.removeChild(lastRipple), 300)
  }, delay)
}

const VRipple = {
  mounted(el) {
    el.addEventListener('mousedown', createRipple)
    document.addEventListener('mouseup', removeRipple)
  },
  unmounted(el) {
    el.removeEventListener('mousedown', createRipple)
    document.removeEventListener('mouseup', removeRipple)
  }
}

Expand your water wave options with command binding

You can also extend your instructions through binding, for example, you can provide options for changing color, disabling status, etc., which I will not go into detail here. Let’s take a look at the results.

Final Thoughts

So far we have implemented a simple ripple instruction. There is also such an instruction in our component library, so you can go to our source code for a more complete version. First of all, I would like to thank the Nuggets community. Some of the friends have already started to PR some codes to our warehouse. We are also very happy to do such a thing with the friends in the community. In addition, our component library team has been recruiting enthusiasts to participate in the contribution. Friends who are interested are welcome to join the discussion. The way to join is to go directly to the warehouse to raise an issue and leave an email. We will deal with it as soon as possible. Whether you are interested or not, I hope you can give us a star and pay attention to us. The support and interest of community partners are our greatest motivation.

Warehouse Address Document Address

The above is the details of the click feedback instruction of Vue to achieve the water ripple effect. For more information about the click feedback instruction of Vue, please pay attention to other related articles on 123WORDPRESS.COM!