使用JavaScript实现按钮的涟漪效果实例代码

阿晃

前言

不知道你们有没有使用过 Material UI。这是一个 React UI 组件库，它实现了 Google 的 Material Design。
Material Design 设计规范中包含了很多关于点击的涟漪效果，类似于一块石头跌落水中所产生的波浪效果。
以下是效果图

速度放慢之后的效果：

我们把

1. overflow: hidden

复制代码

去掉之后：

本文就以 Material Design 中的涟漪效果作为目标，来使用原生的 JavaScript、CSS、HTML 来实现此效果。

分析

通过观察，我们可以发现点击的涟漪效果是在鼠标点击的点开始以一个正圆往外扩散。当圆形扩散到正好能将 Button 全部包围住的时候停止，在扩散的过程中颜色逐渐变浅直到消失，并且此效果可以叠加。
长按效果也是一个圆往外扩散，只不过是在长按结束之后，圆才会消失。
除了鼠标点击效果外，还有键盘焦点事件的效果。当使用键盘的 Tab 键切换到按钮上的时候，会有一个抖动的效果，类似于呼吸效果。
我们提炼出几个比较关键的点：

• 从鼠标点击的位置开始扩散；
  
• 是一个正圆形；
  
• 圆形扩散到正好能将 Button 全部包围住的时候停止；
  
• 长按效果；
  
• 效果叠加；
  

第一点，我们可以通过 JavaScript 计算当前鼠标的坐标信息；第三点，获取 Button 四个顶点的坐标信息，再选一个距离鼠标最远的点，以它们的距离作为半径来画一个圆；第五点，每一个效果都是一个 dom 元素，每点击一次就追加一个 dom 元素，在动画结束的时候，移除此 dom；

实现

创建一个 index.html 文件，包含以下内容；

1. <!-- index.html -->
   
2. <style>
   
3.   @import 'button.css';
   
4.   @import 'ripple.css';
   
5. </style>
   
6. 
   
7. <button class="button-root" id="ripple-example-button" type="button">
   
8.   Button
   
9.   <!-- 用来装涟漪效果的 DOM 的容器 -->
   
10.   <span class="ripple-root"></span>
    
11. </button>

复制代码

创建 button.css 和 ripple.css，分别是 Button 的基础样式和涟漪效果的样式。

1. /* button.css */
   
2. .button-root {
   
3.   position: relative;
   
4.   display: inline-flex;
   
5.   align-items: center;
   
6.   justify-content: center;
   
7.   padding: 6px 16px;
   
8.   font-size: 0.875rem;
   
9.   font-weight: 500;
   
10.   line-height: 1.75;
    
11.   min-width: 64px;
    
12.   margin: 0;
    
13.   border-radius: 4px;
    
14.   border: 1px solid rgba(25, 118, 210, 0.5);
    
15.   cursor: pointer;
    
16.   box-sizing: border-box;
    
17.   outline: none;
    
18.   appearance: none;
    
19.   user-select: none;
    
20.   color: #1976d2;
    
21.   background-color: transparent;
    
22.   transition-property: background-color, color, box-shadow, border-color;
    
23.   transition-duration: 0.25s;
    
24. }
    
25. 
    
26. .button-root:hover {
    
27.   background-color: rgba(25, 118, 210, 0.04);
    
28.   border: 1px solid #1976d2;
    
29. }

复制代码

1. /* ripple.css */
   
2. @keyframes enterKeyframe {
   
3.   0% {
   
4.     transform: scale(0);
   
5.     opacity: 0.1;
   
6.   }
   
7. 
   
8.   100% {
   
9.     transform: scale(1);
   
10.     opacity: 0.3;
    
11.   }
    
12. }
    
13. 
    
14. @keyframes exitKeyframe {
    
15.   0% {
    
16.     opacity: 1;
    
17.   }
    
18. 
    
19.   100% {
    
20.     opacity: 0;
    
21.   }
    
22. }
    
23. 
    
24. @keyframes pulsateKeyframe {
    
25.   0% {
    
26.     transform: scale(0.9);
    
27.   }
    
28. 
    
29.   50% {
    
30.     transform: scale(0.8);
    
31.   }
    
32. 
    
33.   100% {
    
34.     transform: scale(0.9);
    
35.   }
    
36. }
    
37. 
    
38. .ripple-root {
    
39.   display: block;
    
40.   position: absolute;
    
41.   overflow: hidden;
    
42.   width: 100%;
    
43.   height: 100%;
    
44.   top: 0;
    
45.   left: 0;
    
46.   right: 0;
    
47.   bottom: 0;
    
48.   pointer-events: none;
    
49.   background-color: transparent;
    
50.   z-index: 0;
    
51.   border-radius: inherit;
    
52. }
    
53. 
    
54. .ripple-root > .ripple-child {
    
55.   position: absolute;
    
56.   display: block;
    
57.   opacity: 0;
    
58. }
    
59. 
    
60. .ripple-root > .ripple-child.enter {
    
61.   opacity: 0.3;
    
62.   transform: scale(1);
    
63.   animation: enterKeyframe 550ms ease-in-out;
    
64. }
    
65. 
    
66. .ripple-root > .ripple-child > .ripple-child-child {
    
67.   opacity: 1;
    
68.   display: block;
    
69.   width: 100%;
    
70.   height: 100%;
    
71.   border-radius: 50%;
    
72.   background-color: currentColor;
    
73. }
    
74. 
    
75. .ripple-root > .ripple-child.exit > .ripple-child-child {
    
76.   opacity: 0;
    
77.   animation: exitKeyframe 550ms ease-in-out;
    
78. }
    
79. 
    
80. .ripple-root > .ripple-child.pulsate > .ripple-child-child {
    
81.   position: absolute;
    
82.   left: 0;
    
83.   top: 0;
    
84.   animation: pulsateKeyframe 2500ms ease-in-out 200ms infinite;
    
85. }

复制代码

开始写 JavaScript。创建一个 ripple.apis.js 文件，编写

1. startRipple

复制代码

函数。该函数首先要获取 Button 的位置信息和宽高。

1. // ripple.apis.js
   
2. export function startRipple(event) {
   
3.   const { currentTarget: container } = event
   
4.   const { left, top, width, height } = container.getBoundingClientRect()
   
5. }

复制代码

接着计算开始扩散的位置。

1. // ripple.apis.js
   
2. export function startRipple(event) {
   
3.   // ...
   
4.   // 效果开始的坐标（相对于 Button）
   
5.   let rippleX, rippleY
   
6.   // 鼠标当前的坐标
   
7.   let clientX = 0, clientY = 0
   
8. 
   
9. /**
   
10.   * 涟漪效果是否从节点的中心扩散，否则从鼠标点击的位置开始扩散
    
11.   * 使用 Tab 键移动焦点的时候，从节点的中心扩散
    
12.   */
    
13.   let center = false
    
14.   let isFocusVisible = false
    
15. 
    
16.   if (container.matches(':focus-visible')) {
    
17.     center = isFocusVisible = true
    
18.   } else {
    
19.     clientX = event.clientX
    
20.     clientY = event.clientY
    
21.   }
    
22. 
    
23.   rippleX = center ? width / 2 : clientX - left
    
24.   rippleY = center ? height / 2 : clientY - top
    
25. }

复制代码

通过勾股定理，构造一个能正好包围当前元素的圆。

1. // ripple.apis.js
   
2. export function startRipple(event) {
   
3.   // ...
   
4.   // 从鼠标点击的中心位置，构造一个能正好包围当前元素的圆
   
5.   const sizeX = Math.max(width - rippleX, rippleX) * 2
   
6.   const sizeY = Math.max(height - rippleY, rippleY) * 2
   
7.   const diagonal = Math.sqrt(sizeX ** 2 + sizeY ** 2)
   
8. }

复制代码

再创建一个

1. createRippleChild

复制代码

函数，用来创建涟漪效果的 DOM，并且使用一个全局变量来保存已经创建的 DOM。

1. // ripple.apis.js
   
2. const rippleChildren = []
   
3. 
   
4. /**
   
5. * 创建以下结构并返回：
   
6. * <span class="ripple-child enter">
   
7. *   <span class="ripple-child-child"></span>
   
8. * </span>
   
9. */
   
10. function createRippleChild(rect) {
    
11.   const rippleChild = document.createElement('span')
    
12.   rippleChild.classList.add('ripple-child', 'enter')
    
13.   const rippleChildChild = document.createElement('span')
    
14.   rippleChildChild.classList.add('ripple-child-child')
    
15.   rippleChild.appendChild(rippleChildChild)
    
16. 
    
17.   const { height, left, top, width } = rect
    
18.   rippleChild.style.height = height
    
19.   rippleChild.style.width = width
    
20.   rippleChild.style.top = top
    
21.   rippleChild.style.left = left
    
22. 
    
23.   rippleChildren.push(rippleChild)
    
24. 
    
25.   return rippleChild
    
26. }

复制代码

回到

1. startRipple

复制代码

函数，使用刚才创建的

1. createRippleChild

复制代码

函数。

1. // ripple.apis.js
   
2. export function startRipple(event) {
   
3.   // ...
   
4.   const rippleChild = createRippleChild({
   
5.     width: `${diagonal}px`,
   
6.     height: `${diagonal}px`,
   
7.     left: `${-diagonal / 2 + rippleX}px`,
   
8.     top: `${-diagonal / 2 + rippleY}px`,
   
9.   })
   
10.   if (isFocusVisible) {
    
11.     rippleChild.classList.add('pulsate')
    
12.   }
    
13.   const rippleRoot = container.querySelector(':scope > .ripple-root')
    
14.   rippleRoot.appendChild(rippleChild)
    
15. }

复制代码

完成了

1. startRipple

复制代码

函数之后，我们再创建一个

1. stopRipple

复制代码

函数。该函数中，从

1. rippleChildren

复制代码

取出最早创建的 DOM，添加一个动画结束的监听事件，在动画结束的时候，删除该 DOM。

1. // ripple.apis.js
   
2. export function stopRipple() {
   
3.   const rippleChild = rippleChildren.shift()
   
4. 
   
5.   if (!rippleChild) return
   
6. 
   
7.   rippleChild.addEventListener('animationend', (event) => {
   
8.     if (event.animationName === 'exitKeyframe') {
   
9.       rippleChild.remove()
   
10.     }
    
11.   })
    
12.   rippleChild.classList.add('exit')
    
13. }

复制代码

此时，我们已经完成了大部分的代码，接下来就是给 Button 绑定事件的时候了。在 index.html 文件中添加以下代码：

1. <!-- index.html -->
   
2. <style>
   
3.   @import 'button.css';
   
4.   @import 'ripple.css';
   
5. </style>
   
6. 
   
7. <script type="module">
   
8.   import { startRipple, stopRipple } from 'ripple.apis.js'
   
9. 
   
10.   const button = document.querySelector('#ripple-example-button')
    
11. 
    
12.   button.addEventListener('mousedown', startRipple)
    
13.   button.addEventListener('focus', startRipple)
    
14.   button.addEventListener('mouseup', stopRipple)
    
15.   button.addEventListener('mouseleave', stopRipple)
    
16.   button.addEventListener('blur', stopRipple)
    
17. </script>
    
18. 
    
19. <button class="button-root" id="ripple-example-button" type="button">
    
20.   Button
    
21.   <!-- 用来装涟漪效果的 DOM 的容器 -->
    
22.   <span class="ripple-root"></span>
    
23. </button>

复制代码

我们完成了所有的功能！完整的代码在此仓库中。
也可以直接在 CodeSandbox 中编辑

总结

到此这篇关于使用JavaScript实现按钮的涟漪效果的文章就介绍到这了,更多相关js实现按钮涟漪效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/266739.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！