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

小小小發表於2016-12-27
微信小程式
轉載：請寫明掘金原文連結及作者名 '小小小'
一個潛心研究小程式QQ群：139128168 ← 點選加群

今天帶來的是仿QQ訊息氣泡拖拽消失特效，原始碼中很多地方還是有很多不足，希望大家一起齊心協力，給我提出寶貴意見，我們們一起來繼續完善此效果~~

先看效果：

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

原理並沒有想象得那麼簡單，我們拆分來逐步分析~~

1）實現靜態效果

先看效果：

微信小程式之『仿QQ訊息氣泡拖拽消失』
先實現靜態效果

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

微信小程式之『仿QQ訊息氣泡拖拽消失』
原諒我無恥的盜圖

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

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();複製程式碼

如上程式碼即畫出我們想要的靜態效果。

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

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

座標點：

  • (x1, y1)為A點

  • (x2, y2)為B點

  • (x3, y3)為C點

  • (x4, y4)為D點

  • (anchorX, anchorY)為X點

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

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

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

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）如何拉斷氣泡

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

微信小程式之『仿QQ訊息氣泡拖拽消失』
拉斷氣泡

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，是不是又忘了關注 →_→』

相關文章