quick-cocos2d-x游戏开发【6】——制作您自己的自定义效果button菜单

前面提到的主菜单使用，还是很easy的，但我们在商业产品。经常看到button他们人很好，照片不仅就好了，和动画也很不错。Candy Crash都玩过吧，他们看到，button。真的像果冻，效果确实非常值得称赞。因此，我们必须要。这当然不敢大意，后有一个抖动的效果。像这样。

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

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

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还没做完动作又被玩家点上别的button上了，运行一系列的缩放效果之后，再开启menu功能，最后运行之前的回调函数，这样一个动画button就新奇出炉了。

赶紧放到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其他套餐button一起menu管家。

好，每个人都可以将自己喜爱的效果。