CocosCreator之点击移动组件

学而时习之，不亦悦乎。-----《论语》

应用场景：抽屉式菜单栏。

实际效果：

 

层级管理器：

 

 属性检查器：

 

 场景编辑器：

 脚本名：ClickMoveBy.ts

const { ccclass, property } = cc._decorator;
/** 状态类型 */
enum StateType {
    /** 出去 */
    out = 0,
    /** 移动中 */
    moving = 1,
    /** 回来 */
    back = 2,
};
/** 移动类型 */
export enum MOVE_TYPE {
    "向上",
    "向下",
    "向左",
    "向右",
    "手动距离"
}
/**
 * 点击弹出或返回
 * - 节点需要添加按钮组件
 * - 组件会记录移动前的位置，点击后移动配置好的距离，再次点击则返回。
 * - 移动中点击无效
 * @author 神兽白泽
 */
@ccclass
export default class ClickMoveBy extends cc.Component {
    @property({ type: cc.Enum(MOVE_TYPE), tooltip: '移动类型' })
    private move_type: MOVE_TYPE = MOVE_TYPE.手动距离;
    /** 移动的距离 */
    @property({
        tooltip: '要移动的距离',
        visible() {
            return this.move_type == MOVE_TYPE.手动距离;
        },
    })
    private vec_move: cc.Vec2 = cc.Vec2.ZERO;

    @property({ type: cc.Button, tooltip: '触发移动的按钮' })
    private btn_switch: cc.Button = null;
    @property({ tooltip: '移动时考虑按钮尺寸（手动距离除外）', })
    private add_btn_size: boolean = true;

    @property({ tooltip: '收缩时反转按钮方向', })
    private reverse_btn: boolean = true;
    /** 激活时触发 */
    @property({ tooltip: '组件激活时执行一次', })
    private default_run: boolean = false;

    /** 当前状态 */
    private state: number = StateType.out;
    
    onLoad() {
        this.btn_switch.node.on('click', this.StartMoveBy, this)
    }

    start() {
        this.initStyle();
    }

    /**
     * 样式初始化
     */
    private initStyle() {
        if (this.default_run) {
            this.StartMoveBy(undefined, 0);
        }
    }

    /**
     * 开始移动
     * - 移动指定距离 || 返回相反的距离
     * @move_time 移动所需时间
     * @returns 
     */
    StartMoveBy(comp_btn: cc.Button, move_time: number = 0.5) {
        if (this.state === StateType.moving) return;
        if (this.move_type != MOVE_TYPE.手动距离) {
            this.initVecMove();
        }
        let next_state = 0
        let temp_vec_move = cc.Vec2.ZERO
        if (this.state === StateType.out) {
            temp_vec_move = this.vec_move
            next_state = StateType.back
        } else if (this.state === StateType.back) {
            temp_vec_move.x = -this.vec_move.x
            temp_vec_move.y = -this.vec_move.y
            next_state = StateType.out
        }
        this.state = StateType.moving
        let move1 = cc.tween().by(move_time, { position: { value: temp_vec_move, easing: 'quadOut' } })
        let call1 = cc.tween().call(() => {
            // 状态记录
            this.state = next_state;
            // 按钮反转
            if (this.reverse_btn && this.state === StateType.back) {
                this.btn_switch.node.scale = -1;
            } else if (this.reverse_btn && this.state === StateType.out) {
                this.btn_switch.node.scale = 1;
            }
        })
        cc.tween(this.node).then(move1).then(call1).start();
    }

    /**
     * 初始化移动方向
     */
    private initVecMove() {
        this.vec_move = cc.Vec2.ZERO;
        if (this.move_type == MOVE_TYPE.向右) {
            this.vec_move.x = this.node.width - (this.add_btn_size ? this.btn_switch.node.width : 0);
        } else if (this.move_type == MOVE_TYPE.向左) {
            this.vec_move.x = -(this.node.width - (this.add_btn_size ? this.btn_switch.node.width : 0));
        } else if (this.move_type == MOVE_TYPE.向上) {
            this.vec_move.y = this.node.height - (this.add_btn_size ? this.btn_switch.node.height : 0);
        } else if (this.move_type == MOVE_TYPE.向下) {
            this.vec_move.y = -(this.node.height - (this.add_btn_size ? this.btn_switch.node.height : 0));
        }
    }
}

整理不易，关注收藏不迷路。

目录：CocosCreator经典笔记_神兽白泽-CSDN博客

笔者qq、微信：1302109196

qq群：415468592