一个简单的技能冷却按钮的实现
- var CoolButton = cc.Node.extend({ // 需要做成Node 否则会无法addchild
- callback : null,// 点击后的回调
- coolInterval : null,// 动画时间
- progressCooling : null,// 进度条
- sprNormal : null,sprStencil : null,menuBtn : null,ctor : function(resNormal,resPressed,resStencil,coolInterval,callback) {
- this._super();
- this.callback = callback;
- this.coolInterval = coolInterval;
- // menu item
- var btnItem = new cc.MenuItemImage(
- resNormal,this.onBtnClick,this);
- // menu 默认在画面中间
- this.menuBtn = new cc.Menu(btnItem);
- this.menuBtn.attr({
- x : 0,y : 0
- });
- this.addChild(this.menuBtn,0);
- // 图片覆盖在按钮上 造成无法点击的假象
- this.sprNormal = new cc.Sprite(resNormal);
- this.sprNormal.attr({
- x : 0,y : 0
- });
- this.addChild(this.sprNormal,1);
- this.sprStencil = new cc.Sprite(resStencil);
- this.sprStencil.attr({
- x : 0,y : 0
- });
- this.addChild(this.sprStencil,2);
- this.progressCooling = new cc.ProgressTimer(this.sprNormal);
- this.progressCooling.setType(cc.ProgressTimer.TYPE_RADIAL);
- this.progressCooling.setPercentage(0); // 回复到0
- this.progressCooling.attr({
- x : 0,y : 0
- });
- this.addChild(this.progressCooling,5);
- this.progressCooling.setVisible(false);
- this.sprNormal.setVisible(false);
- this.sprStencil.setVisible(false);
- },onBtnClick : function() {
- // 设置按钮不可按
- this.menuBtn.setVisible(false);
- // 开始倒计时
- this.progressCooling.setVisible(true);
- this.sprNormal.setVisible(true);
- this.sprStencil.setVisible(true);
- this.progressCooling.runAction(cc.sequence(cc.progressTo(this.coolInterval,100),cc.callFunc(this.coolEndCallback,this)));
- // 调用回调
- this.runAction(cc.callFunc(this.callback,this));
- },coolEndCallback : function() {
- this.menuBtn.setVisible(true);
- this.progressCooling.setVisible(false);
- this.progressCooling.setPercentage(0); // 回复到0
- this.sprNormal.setVisible(false);
- this.sprStencil.setVisible(false);
- }
- });
调用示例:
- var btn = new CoolButton(res.SkillNormal_png,res.SkillPressed_png,res.SkillStencil_png,4,this.skill);
参数依次为: