ClientFrameWork/assets/script/utils/LongPressButton.ts

import { gameMethod } from "../common/gameMethod";
import { UserEvent } from "../data/const/EventConst";
import EventMng from "../manager/EventMng";


export interface LongPressButtonParam {
	scale?: number;
    aniTime?:number;
	gButton?:fgui.GButton;
    bPalyAni?:boolean;
	callbackFunc?:(bEnd:boolean,bGray:boolean,bLongPress?:boolean)=>void;
    grayClickCallback?:()=>void
}

const {ccclass, property} = cc._decorator;
@ccclass
export default class LongPressButton extends cc.Component {
    @property(cc.Float)
    timerInterval:number = 0.2; //设置长按的间隔，默认0.2秒

    callbackFunc:(bEnd:boolean,bGray:boolean,bLongPress?:boolean)=>void ; // 长按按钮的回调函数
    grayClickCallback:()=>void;

    public keepTime:number = 0; //当次长按时长
    private passTime:number = 0;
    private bLongPress:boolean = false; // 是否长按状态
    private bGray:boolean = false;
    private bInterrupt:boolean = false;
    private bClick:boolean = false;
    private gButton:fgui.GButton;
    private scale:number;
    private targetScale:number;
    private aniTime:number;
    private bPalyAni:boolean;  // 是否播放长按动画
    private bCallback:boolean; // 中断事件是否需要回调相应
    private _IsAllowlongPress:boolean = true; // 是否允许长按

    set IsAllowlongPress(bAllowlongPress:boolean){
        this._IsAllowlongPress = bAllowlongPress;
    }
    get IsAllowlongPress(){
        return this._IsAllowlongPress;
    }
    
    protected onEnable() {
        this.node.on(fgui.Event.TOUCH_BEGIN, this.onTouchStart, this);
        this.node.on(fgui.Event.TOUCH_MOVE, this.onTouchMove, this);
        this.node.on(fgui.Event.TOUCH_END, this.onTouchEnd, this);
    }

    protected onDisable() {
        // 清理事件监听
        this.node.off(fgui.Event.TOUCH_BEGIN, this.onTouchStart, this);
        this.node.off(fgui.Event.TOUCH_MOVE, this.onTouchMove, this);
        this.node.off(fgui.Event.TOUCH_END, this.onTouchEnd, this);
        EventMng.emit(UserEvent.BTNTOUCHDISABLE);
    }

    public onchangeState(bGray:boolean){
        if (bGray && this.bGray != bGray){
            if (this.bClick && this.grayClickCallback){
                this.grayClickCallback();
            }
            this.bGray = true;
            this.unschedule(this.longPressDown);
            this.clearTime();
        }
        this.bGray = bGray;
    }

    // 长按事件
	private longPressDown() {
        this.bLongPress = true;
        if (this.bPalyAni){
            this.ShowAni();
        }
    }
 
    private onTouchStart(event) {
        if (this.bGray){
            if (this.grayClickCallback){
                this.grayClickCallback();
            }
            return;
        }
        this.bClick = true;
        this.passTime = 0;
        this.keepTime = 0
        this.bInterrupt = false;
        this.bCallback = true;

        this.unschedule(this.longPressDown);
        if (this._IsAllowlongPress){
            this.scheduleOnce(this.longPressDown,0.2)
        }
    }
 
    private onTouchMove(event) {
        if (this.bLongPress && !gameMethod.isEmpty(this.gButton)){
            // 使用hitTest方法判断触摸点是否在组件范围内
            if (!this.gButton.hitTest(event.pos)) {
                this.onTouchEnd(null);
                this.bInterrupt = true;
            }
        }
    }
 
    private onTouchEnd(event) {
        if (this.bInterrupt){
            // console.log("中断事件，不在相应");
            return;
        }
        this.unschedule(this.longPressDown);
        this.clearTime();
        EventMng.emit(UserEvent.BTNTOUCHEND);
    }

    update(dt) {
        this.passTime += dt;
        this.keepTime += dt
        // 触摸计时
        if (this.bLongPress) {
            if (this.passTime > this.timerInterval){
                this.handleLongPress(false);
                this.passTime = 0;
            }
        }
    }
    
    public clearTime(){
        if (this.bClick && this.bCallback){
            this.handleLongPress(true);
        }
        this.passTime = 0;
        this.keepTime = 0
        this.bLongPress = false;
        this.bClick = false;
        this.StopAni();
    }

    // 长按事件回调
    private handleLongPress(bEnd:boolean) {
        if (this.callbackFunc && !this.bGray){
            this.callbackFunc(bEnd,this.bGray,this.bLongPress);
        }
    }

    public setCallback(callbackFunc:(bEnd:boolean,bGray:boolean)=>void,gButton?:fgui.GButton,grayClickCallback?:()=>void){
        this.callbackFunc = callbackFunc;
        this.grayClickCallback = grayClickCallback;
        this.gButton = gButton;
    }

    public SetLongData(data:LongPressButtonParam){
        this.callbackFunc = data?.callbackFunc;
        this.grayClickCallback = data?.grayClickCallback;
        this.gButton = data?.gButton;
        this.scale = data?.scale || 1;
        this.targetScale = this.scale * 0.9;
        this.aniTime = data?.aniTime || 0.15;
        this.bPalyAni = data?.bPalyAni || false;
    }

    public interrupt(bCallback:boolean = true){
        this.bCallback = bCallback;
        this.passTime = 0;
        this.keepTime = 0
        this.bLongPress = false;
        this.bClick = false;
        this.StopAni();
    }

    public ShowAni(){
        this.StopAni();
        this.PlayAni();
    }
    private PlayAni(){
        cc.tween(this.gButton.node).to(this.aniTime,{scale:this.targetScale}).to(this.aniTime,{scale:this.scale}).union().repeatForever().start();
    }
    private StopAni(){
        cc.Tween.stopAllByTarget(this.gButton.node)
        this.gButton.node.scale = this.scale;
    }
    // 是否处于点击状态
    public IsClickState(){
        return this.bClick;
    }
    // 是否处于点击状态
    public IsLongClickState(){
        return this.bLongPress;
    }
}