（六）制作自定义效果按钮菜单

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