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

先看效果：

原理并沒有想象得那麽簡單，我們拆分來(lái)逐步分析~~

1）實現靜态效果

先看效果：

上(shàng)圖看着很頭疼，就(jiù)算靜态，也(yě)完全沒有思路，我們将填充色去掉，留下曲線，再看看效果（盜用别人(rén)一張圖）：

這(zhè)樣思路就(jiù)清晰很多，其實就(jiù)是(shì)由兩個(gè)圓、兩條直線、兩條曲線構成：

js代碼如下：

// 兩條貝塞爾曲線和(hé / huò)兩條直線
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();

如上(shàng)代碼即畫出(chū)我們想要(yào / yāo)的(de)靜态效果。

再獻上(shàng)一張圖，表示如上(shàng)坐标點（又無恥盜圖了(le／liǎo)）：

坐标點：

• (x1, y1)爲(wéi / wèi)A點

• (x2, y2)爲(wéi / wèi)B點

• (x3, y3)爲(wéi / wèi)C點

• (x4, y4)爲(wéi / wèi)D點

• (anchorX, anchorY)爲(wéi / wèi)X點

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

先看效果（再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;
}

其實就(jiù)是(shì)如上(shàng)一個(gè)touchmove事件，x、y爲(wéi / wèi)手指移動的(de)位置坐标，将x、y與氣泡定位曲線和(hé / huò)圓圈等關聯起來(lái)，那麽手指移動的(de)時(shí)候，氣泡也(yě)會跟着移動了(le／liǎo)，從而(ér)實現動起來(lái)的(de)效果~~

3）如何拉斷氣泡

先看效果（終于(yú)沒有盜圖了(le／liǎo)）：

js代碼：

if(this.radius < 7){
    //寫去除曲線鏈條，隻留下消息
    ...
}

有沒有發現，拉得越長時(shí)候，初始位置小圓半徑越來(lái)越小，當半徑小于(yú)7的(de)時(shí)候，我們就(jiù)可以(yǐ)認定其爲(wéi / wèi)拉斷。(至于(yú)拉斷消失，源碼很簡單，朋友們自己去看)

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

js代碼：

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

很簡單，就(jiù)是(shì)将整個(gè)顔色繪制成透明度爲(wéi / wèi)0，那麽就(jiù)實現消失效果。