微信小程序之『仿QQ消息氣泡拖拽消失』

轉載：請寫明掘金原文連接及做者名 '小小小'
一個潛心研究小程序QQ羣：139128168 ← 點擊加羣

今天帶來的是仿QQ消息氣泡拖拽消失特效，源碼中不少地方仍是有不少不足，但願你們一塊兒齊心合力，給我提出寶貴意見，我們一塊兒來繼續完善此效果~~

先看效果：

氣泡拖拽消失

原理並無想象得那麼簡單，咱們拆分來逐步分析~~

1）實現靜態效果

先看效果：

先實現靜態效果

上圖看着很頭疼，就算靜態，也徹底沒有思路，咱們將填充色去掉，留下曲線，再看看效果（盜用別人一張圖）：

原諒我無恥的盜圖

這樣思路就清晰不少，其實就是由兩個圓、兩條直線、兩條曲線構成：

js代碼以下：

// 兩條貝塞爾曲線和兩條直線
this.ctx.beginPath();
this.ctx.moveTo(x1, y1);
this.ctx.quadraticCurveTo(this.anchorX, this.anchorY, x2, y2);
this.ctx.lineTo(x3, y3);
this.ctx.quadraticCurveTo(this.anchorX, this.anchorY, x4, y4);
this.ctx.lineTo(x1, y1);
this.ctx.setFillStyle('red');
this.ctx.fill();

// 兩圓圈
this.ctx.beginPath();
this.ctx.arc(this.startX, this.startY, this.radius, 0, 2 * Math.PI)
this.ctx.arc(this.x, this.y, 20, 0, 2 * Math.PI)
this.ctx.setFillStyle('red');
this.ctx.fill();複製代碼

如上代碼即畫出咱們想要的靜態效果。

再獻上一張圖，表示如上座標點（又無恥盜圖了）：

座標點：

• (x1, y1)爲A點

• (x2, y2)爲B點

• (x3, y3)爲C點

• (x4, y4)爲D點

• (anchorX, anchorY)爲X點

2）如何讓氣泡消息動起來

先看效果（再tm無恥盜圖→_→）：

js代碼：

touchmove: function(e){
    this.x = e.changedTouches[0].x;
    this.y = e.changedTouches[0].y;
    this.anchorX =  (e.changedTouches[0].x + this.startX)/2;
    this.anchorY =  (e.changedTouches[0].y + this.startY)/2;
}複製代碼

其實就是如上一個touchmove事件，x、y爲手指移動的位置座標，將x、y與氣泡定位曲線和圓圈等關聯起來，那麼手指移動的時候，氣泡也會跟着移動了，從而實現動起來的效果~~

3）如何拉斷氣泡

先看效果（終於沒有盜圖了）：

拉斷氣泡

js代碼：

if(this.radius < 7){
    //寫去除曲線鏈條，只留下消息
    ...
}複製代碼

有沒有發現，拉得越長時候，初始位置小圓半徑愈來愈小，當半徑小於7的時候，咱們就能夠認定其爲拉斷。(至於拉斷消失，源碼很簡單，朋友們本身去看)

4）鬆開手後，氣泡消息消失

js代碼：

touchend: function(e){
    // 鬆手後消息消失
    this.ctx.setFillStyle('rgba(1,1,1,0)');
    this.ctx.draw();
}複製代碼

很簡單，就是將整個顏色繪製成透明度爲0，那麼就實現消失效果。

參考文獻：
- www.jcodecraeer.com/a/anzhuokai…
- blog.csdn.net/gesanri/art…

源碼下載

『 咻咻咻咻duang，是否是又忘了關注 →_→』