quick-cocos2d-x游戏开发【6】——制作自定义效果按钮菜单

发布时间：2020-12-14 21:08:11 所属栏目：百科来源：网络整理

导读：前面提到的是基本的菜单使用，还是很容易的，不过我们在商业产品中，经常看到的按钮都是非常好看，不光光是图片做得精美，而且动画效果也很棒。Candy Crash都玩过吧，看它们那个按钮，真的像果冻一样，效果确实很赞，所以我们也来做个，当然不是它那个效果，

前面提到的是基本的菜单使用，还是很容易的，不过我们在商业产品中，经常看到的按钮都是非常好看，不光光是图片做得精美，而且动画效果也很棒。Candy Crash都玩过吧，看它们那个按钮，真的像果冻一样，效果确实很赞，所以我们也来做个，当然不是它那个效果，而且点击之后有一个抖动的效果。像这样，

好了，开始做个吧，我这个也是搬了一下coinflip中的按钮代码，算是学习一下。

创建一个views文件夹，里面创建一个MyButton.lua文件，这个就是我们的自定义按钮类了。实现的原理比较简单，在ui.newImageMenuItem的table参数中，有图片，回调函数等参数，所以我们的做法就是在传入这些参数之后，我们在内部修改一些东西就可以了。等于quick给图片按钮封装了一次，我们自己再封装一下。

[html] 
   view plain 
   copy 
    
    
    
   
 localMyButton={}
 
 functionMyButton.new(params)
 localbutton=nil
 
 button=ui.newImageMenuItem(params)
 returnbutton
 end
 returnMyButton

这就封装了一下quick中的ui.newImageMenuItem，下面做的就是把params的参数捕获，处理我们的效果之后再传给ui.newImageMenuItem中的参数。

functionMyButton.new(params)

locallistener=params.listener
params.listener=function(tag)
--dothings
listener(tag)
button=ui.newImageMenuItem(params)
returnbutton
end

上面这段代码中，我们将传入的回调函数先用listener变量保存起来，然后在listener参数中处理一些事情，最后记得在里面调用之前传入的回调函数即可。所以现在还没添加效果代码，为了后面大家能看得更清楚些。

接下来，我们就来添加一下之前展示的效果了。

localfunctionzoom1(offset,time,onComplete)

localx,y=button:getPosition()
localsize=button:getContentSize()
localscaleX=button:getScaleX()*(size.width+offset)/size.width
localscaleY=button:getScaleY()*(size.height-offset)/size.height
transition.moveTo(button,{y=y-offset,time=time})
transition.scaleTo(button,{
scaleX=scaleX,
scaleY=scaleY,
time=time,248)"> onComplete=onComplete,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> })
end
localfunctionzoom2(offset,248)"> transition.moveTo(button,{y=y+offset,time=time/2})
transition.scaleTo(button,{
scaleX=1.0,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> scaleY=1.0,248)"> time=time,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> onComplete=onComplete,248)"> })
button:getParent():setEnabled(false)--先关闭父类menu的功能
zoom1(40,0.08,function()
zoom2(40,0.09,function()
zoom1(20,0.10,248)"> zoom2(20,0.11,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> button:getParent():setEnabled(true)
listener(tag)
end)
end)
end

zoom1和zoom2是两个效果函数，主要是move和scale两个动作，在做效果之前，首先关闭父类的menu功能，这样防止在这个menu item还没做完动作又被玩家点上别的按钮上了，执行一系列的缩放效果之后，再开启menu功能，最后执行之前的回调函数，这样一个动画按钮就新鲜出炉了。

赶紧放到menu中测试一下，

localButton=import("..views.MyButton")--导入Button

localMyScene=class("MyScene",function()
returndisplay.newScene("myscene")
functionMyScene:ctor()
localbutton=Button.new({
image="icon.png",248)"> listener=function()
print("click")
end,
x=display.cx,248)"> y=display.cy
localmenu=ui.newMenu({button})
self:addChild(menu)
returnMyScene

这样就可以添加上去了，还可以和quick封装的其他按钮一起放在menu管家中。

好了，大家都可以自己做个喜欢的效果了。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!