今天熟悉了Lua的語(yǔ)法，同時(shí)學(xué)習(xí)了Cocos中ClippingNode的使用，這個(gè)節(jié)點(diǎn)通常是用來(lái)做動(dòng)畫(huà)的，示例如下：

clip.gif

開(kāi)始

下面就讓我們來(lái)利用ClippingNode來(lái)作出一個(gè)類(lèi)似上面的這種效果！
代碼參考如下所示：

function init_element()
    self._layer = cc.LayerColor:create(cc.c3b(0,255,0))
    local scale = uiex.ui_fit:min_scale()
    self._layer:setScale(scale)
    self._layer:setAnchorPoint(cc.p(0,0))
    self:addChild(self._layer)

    local stencil = display.newSprite("image/login/earth_mask.png")
    local clip = cc.ClippingNode:create(stencil)
    clip:move(display.cx, display.cy)
    clip:setAlphaThreshold(0.1)

    local logo = display.newSprite("HelloWorld.png")
    logo:setAnchorPoint(0,0)
    local logoSize = logo:getContentSize()


    logo:runAction( cc.RepeatForever:create(
        cc.Sequence:create(
            cc.MoveBy:create(5, cc.p(-logoSize.width*2,0)),
            cc.CallFunc:create(
                function(  )
                    logo:setPositionX(0)
                end)
            )))

    clip:addChild(logo)
end

接著

其實(shí)這個(gè)動(dòng)畫(huà)的原理如下：

想象有一個(gè)洞，然后有一塊內(nèi)容不斷的移動(dòng)同時(shí)經(jīng)過(guò)這個(gè)洞，這樣也就有了上述的動(dòng)畫(huà)效果。

上述代碼中有兩個(gè)主要的Node，一個(gè)是我們利用stencil創(chuàng)建的ClippingNode,這個(gè)就是一個(gè)洞；然后我們創(chuàng)建了logo,這就是內(nèi)容了；下面對(duì)logo進(jìn)行runAction,也就是相當(dāng)于不斷的移動(dòng)內(nèi)容；最后需要將內(nèi)容作為子節(jié)點(diǎn)加入到洞中，這樣動(dòng)畫(huà)就完成了。

尾巴

Lua寫(xiě)Cocos真心蛋疼，尤其是我這樣的初學(xué)者??