今天帶來的是仿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…