Cocos Creator 长按监听组件实现

效果图

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

支持说明

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

使用说明

1. LongTouchComponent.ts 组件文件放入到自己的项目中

2. 将其拖入到需要支持长按操作的节点上

3. 在属性编辑器中设置长按回调事件

   

4. 实现长按回调事件

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

参数说明

权重递增实现

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

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} 次`;
}

作者：天煞魔猎手
链接：https://www.jianshu.com/p/4604a1edb69f