如何使用vue开发波纹点击特效组件

最近在使用 vue2 做一个新的 material ui 库，波纹点击效果在 material design 中被多次使用到，于是决定把它封装成一个公共的组件，使用时直接调用就好啦。

开发之前的思考

常见的波纹点击效果的实现方式是监听元素的 mousedown 事件，在元素内部创建一个 波纹元素 ，并调整元素的 transform:
scale(0); 到 transform: scale(1);, 通过计算点击的位置来设置 波纹元素 的大小和位置，以达到波纹扩散的效果。

我将组件分为两个部分， circleRipple.vue 和 TouchRipple.vue 各自实现不同的功能

1. circleRipple.vue 波纹扩散组件，完成波纹扩散的效果
2. TouchRipple.vue 监听 mouse 和 touch 相关事件，控制 circleRipple 的显示，位置。

circleRipple.vue

circleRipple 需要完成波纹扩展的效果，而且可以从外部控制它的大小和位置, 所以利用 vue 的 transition 动画完成效果, 提供mergeStyle 、 color 、opacity 参数来从外部控制它的样式。实现代码如下。

1. <template> 
2.   <transition name="mu-ripple"> 
3.     <div class="mu-circle-ripple" :style="styles"></div> 
4.   </transition> 
5. </template> 
6.  
7. <script> 
8. import {merge} from '../utils' 
9. export default { 
10.   props: { 
11.     mergeStyle: { 
12.       type: Object, 
13.       default () { 
14.         return {} 
15.       } 
16.     }, 
17.     color: { 
18.       type: String, 
19.       default: '' 
20.     }, 
21.     opacity: { 
22.       type: Number 
23.     } 
24.   }, 
25.   computed: { 
26.     styles () { 
27.       return merge({}, {color: this.color, opacity: this.opacity}, this.mergeStyle) 
28.     } 
29.   } 
30. } 
31. </script> 
32.  
33. <style lang="less"> 
34. @import "../styles/import.less"; 
35. .mu-circle-ripple{ 
36.   position: absolute; 
37.   width: 100%; 
38.   height: 100%; 
39.   left: 0; 
40.   top: 0; 
41.   pointer-events: none; 
42.   user-select: none; 
43.   border-radius: 50%; 
44.   background-color: currentColor; 
45.   background-clip: padding-box; 
46.   opacity: 0.1; 
47. } 
48.  
49. .mu-ripple-enter-active, .mu-ripple-leave-active{ 
50.   transition: transform 1s @easeOutFunction, opacity 2s @easeOutFunction; 
51. } 
52.  
53. .mu-ripple-enter { 
54.   transform: scale(0); 
55. } 
56.  
57. .mu-ripple-leave-active{ 
58.   opacity: 0 !important; 
59. } 
60. </style> 

vue2 对于动画方面做了比较大的修改，除了把指令换成组件外，它还可以完成更复杂的动画效果，具体可以看这里 vue2 transition

TouchRipple.vue

TouchRipple 需要控制 circleRipple 的显示。完成以下内容：

1. 监听 mouse 和 touch 相关事件， 控制 circleRipple 的显示。
2. 通过点击事件 event 对象， 计算出 circleRipple 的大小和位置
3. 如果频繁点击可能出现多个 circleRipple

首先，基本模板 + 数据模型

1. <template> 
2.   <!--最外层用div包裹--> 
3.   <div @mousedown="handleMouseDown" @mouseup="end()" @mouseleave="end()" @touchstart="handleTouchStart"  @touchend="end()" @touchcancel="end()"> 
4.     <!--外层包裹防止波纹溢出--> 
5.     <div :style="style" ref="holder"> 
6.       <!--多个波纹用 v-for 控制--> 
7.       <circle-ripple :key="ripple.key" :color="ripple.color" :opacity="ripple.opacity" :merge-style="ripple.style" v-for="ripple in ripples"></circle-ripple> 
8.     </div> 
9.     <!--利用slot分发实际内容--> 
10.     <slot></slot> 
11.   </div> 
12. </template> 
13.  
14. <script> 
15. import circleRipple from './circleRipple' 
16. export default { 
17.   props: { 
18.     // 是否从中间扩散，设为false会从点击处扩散 
19.     centerRipple: { 
20.       type: Boolean, 
21.       default: true 
22.     }, 
23.     // 外层包裹的样式 
24.     style: { 
25.       type: Object, 
26.       default () { 
27.         return { 
28.           height: '100%', 
29.           width: '100%', 
30.           position: 'absolute', 
31.           top: '0', 
32.           left: '0', 
33.           overflow: 'hidden' 
34.         } 
35.       } 
36.     }, 
37.     // 波纹颜色 
38.     color: { 
39.       type: String, 
40.       default: '' 
41.     }, 
42.     // 波纹透明度 
43.     opacity: { 
44.       type: Number 
45.     } 
46.   }, 
47.   data () { 
48.     return { 
49.       nextKey: 0, // 记录下一个波纹元素的key值， 相当于uuid，不设置的话会使动画失效 
50.       ripples: [] // 波纹元素参数数组 
51.     } 
52.   }, 
53.   mounted () { 
54.     this.ignoreNextMouseDown = false // 防止既有 touch 又有 mouse点击的情况 
55.   }, 
56.   methods: { 
57.     start (event, isRippleTouchGenerated) { 
58.       // 开始波纹效果 
59.     }, 
60.     end () { 
61.       // 结束波纹效果 
62.     }, 
63.     handleMouseDown (event) { 
64.       // 监听 鼠标单击 
65.     }, 
66.     handleTouchStart (event) { 
67.       // 监听 touchstart 方法 
68.     } 
69.   }, 
70.   components: { 
71.     'circle-ripple': circleRipple 
72.   } 
73. } 
74. </script> 

开始和结束波纹效果

增加一个波纹元素只需要在 ripple 增加一个 object 即可，不同的是当需要从点击处扩展时，需要计算一下波纹元素的大小和位置。

1. { 
2.   // isRippleTouchGenerated 是否是touch 事件开始的 
3.   start (event, isRippleTouchGenerated) { 
4.     // 过滤 touchstart 和 mousedown 同时存在的情况 
5.     if (this.ignoreNextMouseDown && !isRippleTouchGenerated) { 
6.       this.ignoreNextMouseDown = false 
7.       return 
8.     } 
9.      
10.     // 添加一个 波纹元素组件 
11.     this.ripples.push({ 
12.       key: this.nextKey++,  
13.       color: this.color, 
14.       opacity: this.opacity, 
15.       style: this.centerRipple ? {} : this.getRippleStyle(event) // 不是从中心扩展的需要计算波纹元素的位置 
16.     }) 
17.     this.ignoreNextMouseDown = isRippleTouchGenerated 
18.  }, 
19.  end () { 
20.    if (this.ripples.length === 0) return 
21.    this.ripples.splice(0, 1) // 删除一个波纹元素 
22.    this.stopListeningForScrollAbort() // 结束 touch 滚动的处理 
23.   } 
24. } 

因为 vue2 基于 Virtual DOM 的， 所以如果没有 key 在增加一个元素又同时删除一个元素的时候，dom tree并没有发生变化，是不会产生动画效果的。

监听 mousedown 和 touchstart

mousedown 和 touchstart 处理上会有所不同，但都是用来启动波纹效果的， touch涉及到多点点击的问题，我们一般取第一个即可。

1. { 
2.     handleMouseDown (event) { 
3.       // 只监听鼠标左键的点击 
4.       if (event.button === 0) { 
5.         this.start(event, false) 
6.       } 
7.     }, 
8.     handleTouchStart (event) { 
9.       event.stopPropagation() // 防止多个波纹点击组件嵌套 
10.       if (event.touches) { 
11.         this.startListeningForScrollAbort(event) // 启动 touchmove 触发滚动处理 
12.         this.startTime = Date.now() 
13.       } 
14.       this.start(event.touches[0], true) 
15.     } 
16. } 

touchmove控制

当发生touchMove事件是需要判断是否，移动的距离和时间，然后结束小波纹点击小姑

1. { 
2.   // touchmove 结束波纹控制 
3.   stopListeningForScrollAbort () { 
4.     if (!this.handleMove) this.handleMove = this.handleTouchMove.bind(this) 
5.     document.body.removeEventListener('touchmove', this.handleMove, false) 
6.   }, 
7.   startListeningForScrollAbort (event) { 
8.     this.firstTouchY = event.touches[0].clientY 
9.     this.firstTouchX = event.touches[0].clientX 
10.     document.body.addEventListener('touchmove', this.handleMove, false) 
11.   }, 
12.   handleTouchMove (event) { 
13.     const timeSinceStart = Math.abs(Date.now() - this.startTime) 
14.     if (timeSinceStart > 300) { 
15.       this.stopListeningForScrollAbort() 
16.       return 
17.     } 
18.     const deltaY = Math.abs(event.touches[0].clientY - this.firstTouchY) 
19.     const deltaX = Math.abs(event.touches[0].clientX - this.firstTouchX) 
20.     // 滑动范围在 > 6px 结束波纹点击效果 
21.     if (deltaY > 6 || deltaX > 6) this.end() 
22.   } 
23. } 

计算波纹的位置和大小

需要从点击处扩散的波纹效果，需要计算波纹元素的大小和位置

1. { 
2.   getRippleStyle (event) { 
3.     let holder = this.$refs.holder 
4.     //  这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。 
5.     let rect = holder.getBoundingClientRect()  
6.     // 获取点击点的位置 
7.     let x = event.offsetX 
8.     let y 
9.     if (x !== undefined) { 
10.       y = event.offsetY 
11.     } else { 
12.       x = event.clientX - rect.left 
13.       y = event.clientY - rect.top 
14.     } 
15.     // 获取最大边长 
16.     let max 
17.     if (rect.width === rect.height) { 
18.       max = rect.width * 1.412 
19.     } else { 
20.       max = Math.sqrt( 
21.         (rect.width * rect.width) + (rect.height * rect.height) 
22.       ) 
23.     } 
24.     const dim = (max * 2) + 'px' 
25.     return { 
26.       width: dim, 
27.       height: dim, 
28.       // 通过margin控制波纹中心点和点击点一致 
29.       'margin-left': -max + x + 'px', 
30.       'margin-top': -max + y + 'px' 
31.     } 
32.   } 
33. } 

使用

由于 touchRipple 内部都是 position:absolute 布局，使用时，需要在外部加上 position:relative

1. // listItem.vue 
2. <a :href="href" @mouseenter="hover = true" @mouseleave="hover = false" @touchend="hover = false" 
3.     @touchcancel="hover = false" class="mu-item-wrapper" :class="{'hover': hover}"> 
4.     <touch-ripple class="mu-item" :class="{'mu-item-link': link}" :center-ripple="false"> 
5.       <div class="mu-item-media"> 
6.         <slot name="media"></slot> 
7.       </div> 
8.       <div class="mu-item-content"> 
9.         // ... 
10.       </div> 
11.     </touch-ripple> 
12. </a> 
13. <style> 
14.  
15. .mu-item-wrapper { 
16.     display: block; 
17.     color: inherit; 
18.     position: relative; 
19. } 
20. </style> 

最后

到这点击波纹组件就开发完了， 这些代码借鉴了 keen-ui 和 material-ui 的实现方式。

作者：绫宇

来源：51CTO