《Cocos Creator游戏实战》按钮绽放呼出效果实现

按钮绽放呼出效果实现

创建节点

编写脚本

---

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

运行效果如下：

Cocos Creator版本：2.2.2

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

创建节点

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

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

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

编写脚本

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

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

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

onLoad方法编写如下：

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

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

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

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

// Spread.js
spread () {
    this.otherBtns.active = true;
    let len = this.otherBtns.children.length;

    for(let i=0; i<len; 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的用法。

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

// Spread.js
collapse () {
    let len = this.otherBtns.children.length;

    for(let i=0; i<len; i++) {
        if (i<len-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.js
centerBtnEvent () {
    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的子节点。

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