前面提到的是基本的菜单使用,还是很容易的,不过我们在商业产品中,经常看到的按钮都是非常好看,不光光是图片做得精美,而且动画效果也很棒。Candy Crash都玩过吧,看它们那个按钮,真的像果冻一样,效果确实很赞,所以我们也来做个,当然不是它那个效果,而且点击之后有一个抖动的效果。像这样,
好了,开始做个吧,我这个也是搬了一下coinflip中的按钮代码,算是学习一下。
创建一个views文件夹,里面创建一个MyButton.lua文件,这个就是我们的自定义按钮类了。实现的原理比较简单,在ui.newImageMenuItem的table参数中,有图片,回调函数等参数,所以我们的做法就是在传入这些参数之后,我们在内部修改一些东西就可以了。等于quick给图片按钮封装了一次,我们自己再封装一下。
1
2
3
4
5
6
7
8
9
10
11
|
local MyButton = {}
function MyButton.
new
(params)
local button = nil
button = ui.newImageMenuItem(params)
return
button
end
return
MyButton
|
这就封装了一下Quick中的ui.newImageMenuItem,下面做的就是把params的参数捕获,处理我们的效果之后再传给ui.newImageMenuItem中的参数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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参数中处理一些事情,最后记得在里面调用之前传入的回调函数即可。所以现在还没添加效果代码,为了后面大家能看得更清楚些。
接下来,我们就来添加一下之前展示的效果了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
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中测试一下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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管家中。
好了,大家都可以自己做个喜欢的效果了。
来源网址:http://blog.csdn.net/w337198302/article/details/38642059