非得弄一个差不多的悬浮按钮,脑壳疼,两秒后悬浮

import { _decorator, Component, EventTouch, Node, Vec3, UITransform, tween, view, Vec2, Size } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('BtnPhoto')
export class BtnPhoto extends Component {

    private offset: Vec3 = new Vec3();
    private winSize: Size = new Size();
    private btnSize: Size = new Size();
    private lastPosition: Vec3 = new Vec3();
    private isMoving: boolean = false;
    private lastPos: Vec2 = new Vec2();
    private startTouchPos: Vec2 = new Vec2();

    onLoad() {
        this.winSize = view.getVisibleSize();
        this.btnSize = this.node.getComponent(UITransform).contentSize;
        //按钮初始位置在屏幕右侧
        this.node.setPosition(new Vec3(this.winSize.width / 2 - this.btnSize.width / 2, this.node.position.y, 0));
    }

    start() {
        this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
        this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
    }

    onTouchStart(event: EventTouch) {
        this.unscheduleAllCallbacks();
        tween(this.node).stop();
        var touchLoc = event.getUILocation();
        var worldPos = this.node.getWorldPosition();
        this.offset.x = worldPos.x - touchLoc.x;
        this.offset.y = worldPos.y - touchLoc.y;
        this.isMoving = false;
        this.lastPos = event.touch.getUILocation();
        if (this.node.getComponent(UITransform).getBoundingBoxToWorld().contains(this.lastPos)) {
            this.isMoving = true;
        }
        this.startTouchPos = event.touch.getUILocation();
    }

    onTouchMove(event: EventTouch) {
        var touchLoc = event.touch.getUILocation();
        var targetX = touchLoc.x + this.offset.x;
        var targetY = touchLoc.y + this.offset.y;
        this.node.setWorldPosition(targetX, targetY, 0);
        this.lastPos = new Vec2(targetX, targetY);
    }

    onTouchCancel(event: EventTouch) {
        var touchLoc = event.touch.getUILocation();
        if (Math.abs(touchLoc.x - this.startTouchPos.x) < 10 && Math.abs(touchLoc.y - this.startTouchPos.y) < 10) {
            //TODO按钮点击事件
        }
        if (this.isMoving) {
            this.isMoving = false;
            this.scheduleOnce(() => {
                this.snapToEdge();
            }, 2);
        }
    }

    onTouchEnd(event: EventTouch) {
        var touchLoc = event.touch.getUILocation();
        if (Math.abs(touchLoc.x - this.startTouchPos.x) < 10 && Math.abs(touchLoc.y - this.startTouchPos.y) < 10) {
            //TODO按钮点击事件
        }
        if (this.isMoving) {
            this.isMoving = false;
            this.scheduleOnce(() => {
                this.snapToEdge();
            }, 2);
        }
    }

    onDestroy() {
        this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
        this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
    }

    private snapToEdge() {
        var uiTransform = this.node.getComponent(UITransform);
        if (!uiTransform) return;
        var x = this.node.getPosition().x;
        var y = this.node.getPosition().y;
        var absX = Math.abs(this.winSize.width / 2 - Math.abs(x));
        var absY = Math.abs(this.winSize.height / 2 - Math.abs(y));
        var isIn = absX < absY ? true : false;
        if (x > 0 && y > 0) {
            if (isIn) {
                x = this.winSize.width / 2 - this.btnSize.width / 2;
                y = y;
            } else {
                x = x;
                y = this.winSize.height / 2 - this.btnSize.height / 2;
            }
        } else if (x > 0 && y <= 0) {
            if (isIn) {
                x = this.winSize.width / 2 - this.btnSize.width / 2;
                y = y;
            } else {
                x = x;
                y = -this.winSize.height / 2 + this.btnSize.height / 2;
            }
        } else if (x <= 0 && y > 0) {
            if (isIn) {
                x = -this.winSize.width / 2 + this.btnSize.width / 2;
                y = y;
            } else {
                x = x;
                y = this.winSize.height / 2 - this.btnSize.height / 2;
            }
        } else {
            if (isIn) {
                x = -this.winSize.width / 2 + this.btnSize.width / 2;
                y = y;
            } else {
                x = x;
                y = -this.winSize.height / 2 + this.btnSize.height / 2;
            }
        }

        this.lastPosition = new Vec3(x, y, 0);
        tween(this.node)
            .to(0.1, { position: this.lastPosition }, { easing: 'backOut' })
            .call(() => { })
            .start();
    }
}

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐