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

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

[[171739]]

最近在使用 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. </script> 
  31.  
  32. <style lang="less"
  33. @import "../styles/import.less"
  34. .mu-circle-ripple{ 
  35.   position: absolute
  36.   width: 100%; 
  37.   height: 100%; 
  38.   left: 0; 
  39.   top: 0; 
  40.   pointer-events: none; 
  41.   user-select: none; 
  42.   border-radius: 50%; 
  43.   background-color: currentColor; 
  44.   background-clip: padding-box; 
  45.   opacity: 0.1; 
  46.  
  47. .mu-ripple-enter-active, .mu-ripple-leave-active{ 
  48.   transition: transform 1s @easeOutFunction, opacity 2s @easeOutFunction; 
  49.  
  50. .mu-ripple-enter { 
  51.   transform: scale(0); 
  52.  
  53. .mu-ripple-leave-active{ 
  54.   opacity: 0 !important; 
  55. </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. </script> 

 开始和结束波纹效果

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

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

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

监听 mousedown 和 touchstart

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

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

 touchmove控制

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

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

 计算波纹的位置和大小

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

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

 使用

由于 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. </style> 

 ***

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

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2021-10-26 15:22:52

鸿蒙HarmonyOS应用

2015-07-16 15:20:58

DockerDjango

2023-10-30 08:35:50

水波纹效果vue

2010-07-30 13:52:17

Flex组件

2023-12-20 17:28:48

水波纹ArkUI动画开发

2022-02-08 15:55:00

Vue组件库Vue Demi

2021-08-01 07:58:58

Vue 加载组件

2020-02-21 11:08:24

浏览器HTML设计

2016-09-26 15:14:28

Javascript前端vue

2023-12-11 17:15:05

应用开发波纹进度条ArkUI

2022-09-20 12:21:25

Vue2Vue3$attrs

2023-03-29 08:52:58

视觉Vue组件库

2010-08-12 13:39:46

Flex组件

2010-08-03 15:44:08

FlexBuilder

2023-04-27 11:07:24

Setup语法糖Vue3

2010-08-05 09:54:56

Flex特效

2023-04-09 15:08:20

Cypress组件测试

2016-09-29 14:53:15

JavaScriptvueWeb

2022-07-27 08:40:06

父子组件VUE3

2023-05-06 07:32:31

Vue项目Mixin
点赞
收藏

51CTO技术栈公众号