前面提到的是基本的菜单使用,还是很容易的,不过我们在商业产品中,经常看到的按钮都是非常好看,不光光是图片做得精美,而且动画效果也很棒。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管家中。
好了,大家都可以自己做个喜欢的效果了。