今天帶來(lái)的是仿QQ消息氣泡拖拽消失特效，源碼中很多地方還是有很多不足，希望大家一起齊心協(xié)力，給我提出寶貴意見(jiàn)，咱們一起來(lái)繼續(xù)完善此效果~~

先看效果：

 

 

原理并沒(méi)有想象得那么簡(jiǎn)單，我們拆分來(lái)逐步分析~~

1）實(shí)現(xiàn)靜態(tài)效果

先看效果：

 

 

上圖看著很頭疼，就算靜態(tài)，也完全沒(méi)有思路，我們將填充色去掉，留下曲線(xiàn)，再看看效果（盜用別人一張圖）：

 

 

這樣思路就清晰很多，其實(shí)就是由兩個(gè)圓、兩條直線(xiàn)、兩條曲線(xiàn)構(gòu)成：

js代碼如下：

// 兩條貝塞爾曲線(xiàn)和兩條直線(xiàn)
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();

如上代碼即畫(huà)出我們想要的靜態(tài)效果。

再獻(xiàn)上一張圖，表示如上坐標(biāo)點(diǎn)（又無(wú)恥盜圖了）：

 

 

坐標(biāo)點(diǎn)：

• (x1, y1)為A點(diǎn)

• (x2, y2)為B點(diǎn)

• (x3, y3)為C點(diǎn)

• (x4, y4)為D點(diǎn)

• (anchorX, anchorY)為X點(diǎn)

2）如何讓氣泡消息動(dòng)起來(lái)

先看效果（再tm無(wú)恥盜圖→_→）：

 

 

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;
}

其實(shí)就是如上一個(gè)touchmove事件，x、y為手指移動(dòng)的位置坐標(biāo)，將x、y與氣泡定位曲線(xiàn)和圓圈等關(guān)聯(lián)起來(lái)，那么手指移動(dòng)的時(shí)候，氣泡也會(huì)跟著移動(dòng)了，從而實(shí)現(xiàn)動(dòng)起來(lái)的效果~~

3）如何拉斷氣泡

先看效果（終于沒(méi)有盜圖了）：

 

 

js代碼：

if(this.radius < 7){
    //寫(xiě)去除曲線(xiàn)鏈條，只留下消息
    ...
}

有沒(méi)有發(fā)現(xiàn)，拉得越長(zhǎng)時(shí)候，初始位置小圓半徑越來(lái)越小，當(dāng)半徑小于7的時(shí)候，我們就可以認(rèn)定其為拉斷。(至于拉斷消失，源碼很簡(jiǎn)單，朋友們自己去看)

4）松開(kāi)手后，氣泡消息消失

js代碼：

touchend: function(e){
    // 松手后消息消失
    this.ctx.setFillStyle('rgba(1,1,1,0)');
    this.ctx.draw();
}

很簡(jiǎn)單，就是將整個(gè)顏色繪制成透明度為0，那么就實(shí)現(xiàn)消失效果。

參考文獻(xiàn)：
- www.jcodecraeer.com/a/anzhuokai…
- blog.csdn.net/gesanri/art…