canvas 添加按钮_Cocos | 实现按钮绽放呼出效果

点击上方蓝色字关注我们~

界面上如果有太多按钮的话，可能会影响美观度和游戏体验。我们其实可以将这些按钮先隐藏起来，然后让玩家通过一个按钮将剩余的呼出即可。

运行效果如下：

Cocos Creator版本：2.2.2

后台回复"按钮呼出"，获取该项目完整文件。

创建节点

1. bg就是Sprite类型的背景节点。

2. Center Btn为按钮节点，该按钮用来呼出其他按钮。

3. Other Btns为空节点，默认状态为隐藏，在该节点下一共有六个按钮节点。

编写脚本

主要逻辑就是：当Center Btn按钮被按下后，Other Btns节点变为显示状态，然后六个按钮向指定方向移动到指定位置即可。

新建一个Spread.js脚本，挂到Canvas上。首先添加如下属性：

// Spread.jsproperties: {    centerBtn: cc.Node,             // 中心按钮    otherBtns: cc.Node,             // 其他按钮们},

onLoad方法编写如下：

// Spread.jsonLoad () {    this.isSpread = false;               // 是否已经展开    this.firstBtnPos = cc.v2(-150, 0);   // 第一个按钮展开后的位置},

1. this.isSpread变量用来判断当前按钮是否已经被呼出了，false表示没呼出，true表示已经呼出。

2. this.firstBtnPos用来确定第一个按钮被呼出后的位置，该值可用来求出剩余其他按钮的位置(之后会讲解)。

编写spread方法用于实现呼出按钮效果：

// Spread.jsspread () {    this.otherBtns.active = true;    let len = this.otherBtns.children.length;    for(let i=0; i        if (i==0) {            let move = cc.moveTo(0.5, this.firstBtnPos);             this.otherBtns.children[i].runAction(move);        }        else {            // 将角度转为弧度之后，调用rotate方法旋转向量            let averageAngle = 360 / len;             let averageRadian = Math.PI / 180 * averageAngle * i;            let pos = this.firstBtnPos.rotate(averageRadian);            let move = cc.moveTo(0.5, pos);            this.otherBtns.children[i].runAction(move);        }    }},

1. 既然玩家点击了中心按钮要呼出其他按钮，我们肯定要先将otherBtns节点转为可见状态。

2. 接着循环otherBtns下的所有按钮，第一个按钮的话我们就让它移动到我们指定的位置，而其他按钮则可以根据角度和弧度来计算出相应位置。大家可以去官方文档上查看rotate的用法：

https://docs.cocos.com/creator/api/zh/classes/Vec2.html#rotate

有展开当然也得有折叠，collapse方法用于实现折叠效果：

// Spread.jscollapse () {    let len = this.otherBtns.children.length;    for(let i=0; i        if (i-1) {            let move = cc.moveTo(0.5, cc.v2(0, 0));            this.otherBtns.children[i].runAction(move);        }        else {            let move = cc.moveTo(0.5, cc.v2(0, 0));            let hide = cc.callFunc(()=>{this.otherBtns.active=false});            let sequence = cc.sequence(move, hide);            this.otherBtns.children[i].runAction(sequence);        }    }},

折叠后我们肯定要将otherBtns节点隐藏，但是注意不能一开始就隐藏，否则折叠效果就看不到了。我们应该在最后一个按钮折叠之后再进行隐藏。

最后编写下Center Btn的事件函数，用来调用spread和collapse方法：

// Spread.jscenterBtnEvent () {    if (!this.isSpread) {        let rotate = cc.rotateTo(0.5, 180);        this.centerBtn.runAction(rotate);        this.isSpread = true;         this.spread();    }    else {        let rotate = cc.rotateTo(0.5, 0);        this.centerBtn.runAction(rotate);        this.isSpread = false;         this.collapse();    }}

这里笔者还同时实现了中心按钮的旋转效果，由于Other Btns在Center Btn节点下，所以当Center Btn旋转时，Other Btns也会相应地旋转，这样就实现了旋转绽放的效果。如果单单只想展开的话，我们可以将Other Btns移出，使其成为Canvas的子节点。

那这节教程就到这，希望大家喜欢~