效果圖
LongTouchPreview.gif
ps: 效果圖來(lái)源于項(xiàng)目自帶測(cè)試場(chǎng)景 LongTouchTestScene.fire，可以下載項(xiàng)目下來(lái)直接運(yùn)行預(yù)覽或執(zhí)行快速下載命令 git clone git@github.com:zhitaocai/CocosCreatorExpandComponent.git
支持說(shuō)明
- 支持點(diǎn)擊回調(diào)（效果圖前5秒演示效果）
- 支持長(zhǎng)按回調(diào)（效果圖第5秒之后演示效果）
- 支持長(zhǎng)按期間離開(kāi)節(jié)點(diǎn)，依舊回調(diào)長(zhǎng)按，只有松手時(shí)才結(jié)束長(zhǎng)按回調(diào)（效果圖第8秒之后演示效果）
使用說(shuō)明
- LongTouchComponent.ts 組件文件放入到自己的項(xiàng)目中
- 將其拖入到需要支持長(zhǎng)按操作的節(jié)點(diǎn)上
- 在屬性編輯器中設(shè)置長(zhǎng)按回調(diào)事件
LongTouchSetting.png - 實(shí)現(xiàn)長(zhǎng)按回調(diào)事件
/** * 處理長(zhǎng)按邏輯 * * @param touchCounter 本次長(zhǎng)按觸摸次數(shù) * @param customEventData 在屬性檢查器中傳入進(jìn)來(lái)的 CustomEventData */ handleToucheLogic(touchCounter: number, customEventData?: any) { this.longTouchCallBackLabel.string = `本次長(zhǎng)按，回調(diào)了 ${touchCounter} 次`; console.log(`界面就不演示輸出 CustomEventData了`); console.log(customEventData); }
參數(shù)說(shuō)明
| 參數(shù) | 說(shuō)明 |
|---|---|
| Touch Interval | 觸摸回調(diào)間隔（秒）。假如為0.1，那么1秒內(nèi)會(huì)回調(diào)10次 Long Touch Events 事件數(shù)組 |
| Enable Multi Touching | 是否支持多點(diǎn)觸控（當(dāng)前還不支持） |
| Long Touch Events | 回調(diào)事件數(shù)組，每間隔 Touche Interval 秒回調(diào)一次 |
權(quán)重遞增實(shí)現(xiàn)
實(shí)際開(kāi)發(fā)過(guò)程中，我們可能需要實(shí)現(xiàn) 隨著用戶長(zhǎng)按按鈕時(shí)間越長(zhǎng)，遞增的數(shù)量要越來(lái)越多 ，我們暫且叫這種為 權(quán)重遞增 方式。 文字描述可能比較抽象，實(shí)際效果如下：
LongTouchWithWeightPreview.gif
- 可以看到，點(diǎn)擊1次，累計(jì)遞增1次
- 長(zhǎng)按越久，累計(jì)遞增的次數(shù)會(huì)越來(lái)越快（多）
實(shí)現(xiàn)以上方式，只需要利用回調(diào)函數(shù)中的 長(zhǎng)按觸摸次數(shù)參數(shù) 進(jìn)行處理即可，具體代碼如下：
/**
* 累計(jì)計(jì)數(shù)
*/
private counter = 0;
/**
* 處理長(zhǎng)按邏輯
*
* @param touchCounter 本次長(zhǎng)按觸摸次數(shù)
* @param customEventData 在屬性檢查器中傳入進(jìn)來(lái)的 CustomEventData
*/
handleMiddleBtnTouchLogic(touchCounter: number, customEventData?: any) {
// 這里演示效果為：
// 如果長(zhǎng)按回調(diào)次數(shù)小于等于3次的，那么 累計(jì)次數(shù) = 累計(jì)次數(shù) + 1
// 如果長(zhǎng)按回調(diào)次數(shù)大于3次的，那么 累計(jì)次數(shù) = 累計(jì)次數(shù) + 權(quán)重公式后的結(jié)果
if (touchCounter <= 3) {
this.counter++;
} else {
// PS: 實(shí)際使用，開(kāi)發(fā)者需要根據(jù)自己的期望權(quán)重遞增公司來(lái)編寫，這里僅為演示
this.counter += Math.ceil((touchCounter - 3) * 1.003);
}
this.middleLongTouchCallBackLabel.string = `累計(jì)計(jì)數(shù) ${this.counter} 次`;
}
