Cocos Creator 长按监听组件实现

效果图

LongTouchPreview.gif

ps: 效果图来源于项目自带测试场景 LongTouchTestScene.fire，可以下载项目下来直接运行预览或执行快速下载命令 git clone [email protected]:zhitaocai/CocosCreatorExpandComponent.git

支持说明

1. 支持点击回调（效果图前5秒演示效果）
2. 支持长按回调（效果图第5秒之后演示效果）
3. 支持长按期间离开节点，依旧回调长按，只有松手时才结束长按回调（效果图第8秒之后演示效果）

使用说明

1. LongTouchComponent.ts 组件文件放入到自己的项目中
2. 将其拖入到需要支持长按操作的节点上
3. 在属性编辑器中设置长按回调事件
   
   LongTouchSetting.png
4. 实现长按回调事件

   /**
    * 处理长按逻辑
    *
    * @param touchCounter 本次长按触摸次数
    * @param customEventData 在属性检查器中传入进来的 CustomEventData
    */
   handleToucheLogic(touchCounter: number, customEventData?: any) {
       this.longTouchCallBackLabel.string = 
           `本次长按，回调了 ${touchCounter} 次`;
       console.log(`界面就不演示输出 CustomEventData了`);
       console.log(customEventData);
   }
   

参数说明

参数	说明
Touch Interval	触摸回调间隔（秒）。假如为0.1，那么1秒内会回调10次 Long Touch Events 事件数组
Enable Multi Touching	是否支持多点触控（当前还不支持）
Long Touch Events	回调事件数组，每间隔 Touche Interval 秒回调一次

权重递增实现

实际开发过程中，我们可能需要实现 随着用户长按按钮时间越长，递增的数量要越来越多 ，我们暂且叫这种为 权重递增 方式。 文字描述可能比较抽象，实际效果如下：

LongTouchWithWeightPreview.gif

1. 可以看到，点击1次，累计递增1次
2. 长按越久，累计递增的次数会越来越快（多）

实现以上方式，只需要利用回调函数中的 长按触摸次数参数 进行处理即可，具体代码如下：

/**
 * 累计计数
 */
private counter = 0;

/**
 * 处理长按逻辑
 *
 * @param touchCounter 本次长按触摸次数
 * @param customEventData 在属性检查器中传入进来的 CustomEventData
 */
handleMiddleBtnTouchLogic(touchCounter: number, customEventData?: any) {
    // 这里演示效果为：
    //  如果长按回调次数小于等于3次的，那么 累计次数 = 累计次数 + 1
    //  如果长按回调次数大于3次的，那么 累计次数 = 累计次数 + 权重公式后的结果
    if (touchCounter <= 3) {
        this.counter++;
    } else {
        // PS: 实际使用，开发者需要根据自己的期望权重递增公司来编写，这里仅为演示
        this.counter += Math.ceil((touchCounter - 3) * 1.003);
    }
    this.middleLongTouchCallBackLabel.string = `累计计数 ${this.counter} 次`;
}