摘要:最近在使用做一個新的庫,波紋點擊效果在中被多次使用到,于是決定把它封裝成一個公共的組件,使用時直接調用就好啦。
最近在使用 vue2 做一個新的 material ui 庫,波紋點擊效果在 material design 中被多次使用到,于是決定把它封裝成一個公共的組件,使用時直接調用就好啦。
開發之前的思考常見的波紋點擊效果的實現方式是監聽元素的 mousedown 事件,在元素內部創建一個 波紋元素 ,并調整元素的 transform: scale(0); 到 transform: scale(1);, 通過計算點擊的位置來設置 波紋元素 的大小和位置,以達到波紋擴散的效果。
我將組件分為兩個部分, circleRipple.vue 和 TouchRipple.vue 各自實現不同的功能
circleRipple.vue 波紋擴散組件,完成波紋擴散的效果
TouchRipple.vue 監聽 mouse 和 touch 相關事件,控制 circleRipple 的顯示,位置。
circleRipple.vuecircleRipple 需要完成波紋擴展的效果,而且可以從外部控制它的大小和位置, 所以利用 vue 的 transition 動畫完成效果, 提供 mergeStyle 、 color 、opacity 參數來從外部控制它的樣式。實現代碼如下。
TouchRipple.vuevue2 對于動畫方面做了比較大的修改,除了把指令換成組件外,它還可以完成更復雜的動畫效果,具體可以看這里 vue2 transition
TouchRipple 需要控制 circleRipple 的顯示。完成以下內容:
監聽 mouse 和 touch 相關事件, 控制 circleRipple 的顯示。
通過點擊事件 event 對象, 計算出 circleRipple 的大小和位置
如果頻繁點擊可能出現多個 circleRipple
首先,基本模板 + 數據模型開始和結束波紋效果
增加一個波紋元素只需要在 ripple 增加一個 object 即可,不同的是當需要從點擊處擴展時,需要計算一下波紋元素的大小和位置。
{ // isRippleTouchGenerated 是否是touch 事件開始的 start (event, isRippleTouchGenerated) { // 過濾 touchstart 和 mousedown 同時存在的情況 if (this.ignoreNextMouseDown && !isRippleTouchGenerated) { this.ignoreNextMouseDown = false return } // 添加一個 波紋元素組件 this.ripples.push({ key: this.nextKey++, color: this.color, opacity: this.opacity, style: this.centerRipple ? {} : this.getRippleStyle(event) // 不是從中心擴展的需要計算波紋元素的位置 }) this.ignoreNextMouseDown = isRippleTouchGenerated }, end () { if (this.ripples.length === 0) return this.ripples.splice(0, 1) // 刪除一個波紋元素 this.stopListeningForScrollAbort() // 結束 touch 滾動的處理 } }
因為 vue2 基于 Virtual DOM 的, 所以如果沒有 key 在增加一個元素又同時刪除一個元素的時候,dom tree并沒有發生變化,是不會產生動畫效果的。
監聽 mousedown 和 touchstartmousedown 和 touchstart 處理上會有所不同,但都是用來啟動波紋效果的, touch涉及到多點點擊的問題,我們一般取第一個即可。
{ handleMouseDown (event) { // 只監聽鼠標左鍵的點擊 if (event.button === 0) { this.start(event, false) } }, handleTouchStart (event) { event.stopPropagation() // 防止多個波紋點擊組件嵌套 if (event.touches) { this.startListeningForScrollAbort(event) // 啟動 touchmove 觸發滾動處理 this.startTime = Date.now() } this.start(event.touches[0], true) } }touchmove控制
當發生touchMove事件是需要判斷是否,移動的距離和時間,然后結束小波紋點擊小姑
{ // touchmove 結束波紋控制 stopListeningForScrollAbort () { if (!this.handleMove) this.handleMove = this.handleTouchMove.bind(this) document.body.removeEventListener("touchmove", this.handleMove, false) }, startListeningForScrollAbort (event) { this.firstTouchY = event.touches[0].clientY this.firstTouchX = event.touches[0].clientX document.body.addEventListener("touchmove", this.handleMove, false) }, handleTouchMove (event) { const timeSinceStart = Math.abs(Date.now() - this.startTime) if (timeSinceStart > 300) { this.stopListeningForScrollAbort() return } const deltaY = Math.abs(event.touches[0].clientY - this.firstTouchY) const deltaX = Math.abs(event.touches[0].clientX - this.firstTouchX) // 滑動范圍在 > 6px 結束波紋點擊效果 if (deltaY > 6 || deltaX > 6) this.end() } }計算波紋的位置和大小
需要從點擊處擴散的波紋效果,需要計算波紋元素的大小和位置
{ getRippleStyle (event) { let holder = this.$refs.holder // 這個方法返回一個矩形對象,包含四個屬性:left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。 let rect = holder.getBoundingClientRect() // 獲取點擊點的位置 let x = event.offsetX let y if (x !== undefined) { y = event.offsetY } else { x = event.clientX - rect.left y = event.clientY - rect.top } // 獲取最大邊長 let max if (rect.width === rect.height) { max = rect.width * 1.412 } else { max = Math.sqrt( (rect.width * rect.width) + (rect.height * rect.height) ) } const dim = (max * 2) + "px" return { width: dim, height: dim, // 通過margin控制波紋中心點和點擊點一致 "margin-left": -max + x + "px", "margin-top": -max + y + "px" } } }使用
由于 touchRipple 內部都是 position:absolute 布局,使用時,需要在外部加上 position:relative
// listItem.vue最后 // ...
到這點擊波紋組件就開發完了, 這些代碼借鑒了 keen-ui 和 material-ui 的實現方式。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80395.html
摘要:組件的使用場景很多,主要為圖片的展示。一個主要由頂層容器和每一幀的組成。更多關于由于支持多個可用戶自定義的,所以需要在中聲明這些支持的自定義屬性,以便在組件聲明時使用上一幀下一幀導航自動播放播放效果導航位置滑動特效組件支持兩種特效和。 Slider組件的使用場景很多,主要為圖片的展示。一個slider主要由頂層容器和每一幀的slide組成。下面通過一個例子嘗試基于Vue.js去構建一個...
閱讀 704·2021-11-22 13:54
閱讀 3065·2021-09-26 10:16
閱讀 3490·2021-09-08 09:35
閱讀 1576·2019-08-30 15:55
閱讀 3429·2019-08-30 15:54
閱讀 2076·2019-08-30 10:57
閱讀 497·2019-08-29 16:25
閱讀 877·2019-08-29 16:15