quick cocos2dx 播放序列帧动画的实现

本帖基于quick cocos2dx2.2.6版本。

序列帧动画：顾名思义就是在一定的时间内播放多张图片。

基本原理非常简单，在一个固定的位置1秒时间内轮询播放有限数量的不同图片。比如1秒中播放24张图（FPS=24）

在quick引擎中可以通过framwork中的transition.lua文件中得transition.playAnimationForever(target, animation, delay)接口来实现动画的播放，其源码如下：

function transition.playAnimationForever(target, animation, delay)

    local animate = CCAnimate:create(animation)

    local action

    if type(delay) == "number" and delay > 0 then

        target:setVisible(false)

        local sequence = transition.sequence({

            CCDelayTime:create(delay),

            CCShow:create(),

            animate,

        })

        action = CCRepeatForever:create(sequence)

    else

        action = CCRepeatForever:create(animate)

    end

    target:runAction(action)

    return action

end

View Code

在需要显示动画的界面里加入如下代码：

local node = display.newSprite()

        :pos(display.cx,display.cy)

        :addTo(self)

    transition.playAnimationForever(node, GameResouce.createEffect("filename","ui"), 1)

注意这里的node一定要是一个sprite实例。

GameResouce是对动画资源的一个简单封装类型，大概实现写资源缓冲及创建动画的功能。功能代码如下：

GemeResource = GemeResource or {}

local sharedSpriteFrameCache = CCSpriteFrameCache:sharedSpriteFrameCache()
--创建缓存

function GemeResource.createCacha()

    assert(GemeResource.cacha == nil)

    GemeResource.cacha = {}

end

--清理缓存

function GemeResource.releaseCacha()

    assert(GemeResource.cacha)

    for k,v in pairs(GemeResource.cacha) do

        sharedSpriteFrameCache:removeSpriteFramesFromFile(k..".plist")

        CCTextureCache:sharedTextureCache():removeTextureForKey(k..".png")

    end

    GameResource.cacha = nil

end



function GameResource.createEffect(name, dir, zoom)

    zoom = zoom or 1



    -- 加载plist

    local path = "anim/" .. dir .. "/" .. name--默认将动画资源放入res/anim目录下

    sharedSpriteFrameCache:addSpriteFramesWithFile(path..".plist", path..".png")

    if GameResource.cacha then

        GameResource.cacha[path] = true

    end



    local frame_name = string.split(name, "_")[1]--plist中图片的名称命名规则为xxx_001.png，所以此处将图片名称中得xxx字符串取出



    local frames = {}

    local count = 1

    local name = ""

    while true do

        local frame = GameResource.loadFrame(frame_name, count)

        if not frame then

            break

        end

        table.insert(frames, frame)

        count = count + 1

    end



    if #(frames) <= 0 then

        echoError("error ", dir.." name:"..name)

        return nil

    end



    local fps = 1/24 --设置默认fps为24

    local animation = display.newAnimation(frames, fps)--创建动画实例

    animation:setDelayPerUnit(animation:getDelayPerUnit()*zoom)--zoom的作用：可以在不改变fps的情况下加速或放慢动画的播放频率

    

    return animation

end

function GameRes.loadFrame(_name, _id)

    return sharedSpriteFrameCache:spriteFrameByName(string.format("%s_%03d.png",_name,_id))

end

return GemeResource

完整的测试代码如下：

local AnimationTest = class("AnimationTest",function()

    return display.newScene("AnimationTest")

end)



function AnimationTest:ctor()

    GameResource.createCacha()

    local node = display.newSprite()

        :pos(display.cx,display.cy)

        :addTo(self)

    transition.playAnimationForever(node, GameResource.createEffect("ani","ui"), 0)--ui为res下的目录 ani为动画文件的名称(ani.plist,ani.png 两个文件通过TP工具导出)

end



function AnimationTest:onEnter()

    

end



return AnimatiionTest