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

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

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