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

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

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

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

local MyButton = {}

function MyButton.new(params)
	local button = nil

	button = ui.newImageMenuItem(params)
	return button

end

return MyButton

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

function MyButton.new(params)
	local button = nil
	local listener = params.listener

	params.listener = function (tag)
                --do things
       		listener(tag)
    
    	end

	button = ui.newImageMenuItem(params)
	return button

end

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

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

params.listener = function (tag)
        local function zoom1(offset, time, onComplete)
            local x, y = button:getPosition()
            local size = button:getContentSize()

            local scaleX = button:getScaleX() * (size.width + offset) / size.width
            local scaleY = button:getScaleY() * (size.height - offset) / size.height

            transition.moveTo(button, {y = y - offset, time = time})
            transition.scaleTo(button, {
                scaleX     = scaleX,
                scaleY     = scaleY,
                time       = time,
                onComplete = onComplete,
            })
        end

        local function zoom2(offset, time, onComplete)
            local x, y = button:getPosition()
            local size = button:getContentSize()

            transition.moveTo(button, {y = y + offset, time = time / 2})
            transition.scaleTo(button, {
                scaleX     = 1.0,
                scaleY     = 1.0,
                time       = time,
                onComplete = onComplete,
            })
        end

        button:getParent():setEnabled(false)  --先关闭父类menu的功能

        zoom1(40, 0.08, function()
            zoom2(40, 0.09, function()
                zoom1(20, 0.10, function()
                    zoom2(20, 0.11, function()
                        button:getParent():setEnabled(true)
                        listener(tag)
                    end)
                end)
            end)
        end)
end

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

赶紧放到menu中测试一下，

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

local MyScene = class("MyScene", function ()
	return display.newScene("myscene")
end)

function MyScene:ctor()
	local button = Button.new({
		image = "icon.png",
		listener = function ()
			print("click")
		end,
		x = display.cx,
		y = display.cy

	})
	
	local menu = ui.newMenu({button})
	self:addChild(menu)

end

return MyScene

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

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