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

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

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

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

[html] view plaincopy

1. local MyButton = {}  
2.   
3. function MyButton.new(params)  
4.     local button = nil  
5.   
6.     button = ui.newImageMenuItem(params)  
7.     return button  
8.   
9. end  
10.   
11. return MyButton  

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

[html] view plaincopy

1. function MyButton.new(params)  
2.     local button = nil  
3.     local listener = params.listener  
4.   
5.     params.listener = function (tag)  
6.                 --do things  
7.             listener(tag)  
8.       
9.         end  
10.   
11.     button = ui.newImageMenuItem(params)  
12.     return button  
13.   
14. end  

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

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

[html] view plaincopy

1. params.listener = function (tag)  
2.         local function zoom1(offset, time, onComplete)  
3.             local x, y = button:getPosition()  
4.             local size = button:getContentSize()  
5.   
6.             local scaleX = button:getScaleX() * (size.width + offset) / size.width  
7.             local scaleY = button:getScaleY() * (size.height - offset) / size.height  
8.   
9.             transition.moveTo(button, {y = y - offset, time = time})  
10.             transition.scaleTo(button, {  
11.                 scaleX     = scaleX,  
12.                 scaleY     = scaleY,  
13.                 time       = time,  
14.                 onComplete = onComplete,  
15.             })  
16.         end  
17.   
18.         local function zoom2(offset, time, onComplete)  
19.             local x, y = button:getPosition()  
20.             local size = button:getContentSize()  
21.   
22.             transition.moveTo(button, {y = y + offset, time = time / 2})  
23.             transition.scaleTo(button, {  
24.                 scaleX     = 1.0,  
25.                 scaleY     = 1.0,  
26.                 time       = time,  
27.                 onComplete = onComplete,  
28.             })  
29.         end  
30.   
31.         button:getParent():setEnabled(false)  --先关闭父类menu的功能  
32.   
33.         zoom1(40, 0.08, function()  
34.             zoom2(40, 0.09, function()  
35.                 zoom1(20, 0.10, function()  
36.                     zoom2(20, 0.11, function()  
37.                         button:getParent():setEnabled(true)  
38.                         listener(tag)  
39.                     end)  
40.                 end)  
41.             end)  
42.         end)  
43. end  

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

赶紧放到menu中测试一下，

[html] view plaincopy

1. local Button = import("..views.MyButton") --导入Button  
2.   
3. local MyScene = class("MyScene", function ()  
4.     return display.newScene("myscene")  
5. end)  
6.   
7. function MyScene:ctor()  
8.     local button = Button.new({  
9.         image = "icon.png",  
10.         listener = function ()  
11.             print("click")  
12.         end,  
13.         x = display.cx,  
14.         y = display.cy  
15.   
16.     })  
17.       
18.     local menu = ui.newMenu({button})  
19.     self:addChild(menu)  
20.   
21. end  
22.   
23. return MyScene  

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

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