3.8.7 Button scale 异常

Creator 3.x
#1

当zoomScale值小于1时，鼠标长按移入移出时，button会忽大忽小。大家有遇到这种情况么？

zoomScale=0.8时的表现
Cocos Creator - DMOE2
zoomScale=1.2时的表现
Cocos Creator - DMOE2 (1)

#2

属性：zoomScale
当用户点击按钮后，按钮会缩放到一个值，这个值等于 Button 原始 scale * zoomScale, zoomScale 可以为负数

按下缩放，松开或者移出范围回到原本尺寸。 你描述的表现是正常的

#3

鼠标如果以较快的速度移出效果正常，如果慢速移出就会跳动几下。

#4

这个算是 Button 组件设计上的问题，每次调用 TOUCH_MOVE 的时候都会检测一次是否在按钮上，但是按钮的缩放又同时在改变，在小于1的时候就会鬼畜了，自己重新实现一个 Button 组件即可，给你一个简单的示例代码作为参考

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

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

    @property(Node)
    spriteNode: Node = null;
    @property
    zoomScale: number = 0.8;

    start() {

    }

    protected onLoad(): void {
        this.node.on(Node.EventType.TOUCH_START, this.onClick, this);
        this.node.on(Node.EventType.TOUCH_END, this.onRelease, this);
        this.node.on(Node.EventType.TOUCH_MOVE, this.onMove, this);
        this.node.on(Node.EventType.TOUCH_CANCEL, this.onCancel, this);
    }

    onClick() {
        console.log("点击了按钮");
        tween(this.spriteNode)
            .to(0.1, { scale: new Vec3(this.zoomScale, this.zoomScale, 1) })
            .start();
    }

    onRelease() {
        console.log("释放了按钮");
        tween(this.spriteNode)
            .to(0.1, { scale: new Vec3(1, 1, 1) })
            .start();
    }

    onMove(event: EventTouch) {
        console.log("移动了按钮");
        let rect = this.node.getComponent(UITransform).getBoundingBoxToWorld();
        let pos = event.getLocation();
        if (rect.contains(pos)) {
            this.onClick();
        }
        else {
            this.onCancel();
        }
    }

    onCancel() {
        console.log("取消了按钮");
        tween(this.spriteNode)
            .to(0.1, { scale: new Vec3(1, 1, 1) })
            .start();
    }

    protected onDestroy(): void {
        this.node.off(Node.EventType.TOUCH_START, this.onClick, this);
        this.node.off(Node.EventType.TOUCH_END, this.onRelease, this);
        this.node.off(Node.EventType.TOUCH_MOVE, this.onMove, this);
        this.node.off(Node.EventType.TOUCH_CANCEL, this.onCancel, this);
    }

    update(deltaTime: number) {

    }
}

image

20260527-0557-35.8212372

代码随手写的，BUG 自行解决

#5

感谢回复，刚才参考了部分游戏中按钮的交互效果，其中过渡动画为按下缩小的这一类按钮，在对move事件的处理上各有差异，有的是直接不对move监听，也有的是移出后立刻恢复未点击状态，像这种移出放大移入缩小的确实少见。所以我还是直接取消对move事件监听吧