《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

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

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

 

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

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

    for(let i=0; i{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的子节点。

 

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