Cocos Studio制作帧动画

前端之家收集整理的这篇文章主要介绍了Cocos Studio制作帧动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用Cocos Studio(v2.3.2)制作帧动画

已经新建了一个项目,并新建了一个Layer,在Layer上添加了3个Sprite:


Cn03_1初始X坐标 -80
Cn02_2初始X坐标 1040
在第120帧时,这2个Sprite移动到屏幕中央

开启“开始记录动画”,这样在改变节点属性时会自动记录关键帧,而不用手动添加帧。

点开Cn03_1选中坐标,并选中第120帧,将Cn03_1的X坐标改成433,可以看到自动添加了一个关键帧,但此时再选中第0帧,发现X坐标也变成了433,将第0帧的X坐标改为初始的-80,可以看到第0帧也添加了关键帧,而且在0到120帧之间出现了一条直线。

点击播放按钮就可以看到Cn03_1在第0到120帧时,从-80匀速移动到了433位置。选中第0帧,在右边出现了预设选项,可以对这个移动过程进行如EaseIn、EaSEOut等修饰。
将Cn03_1在第120帧改成旋转720度,第0帧0度。

对于Cn02_2,第120帧X坐标527,旋转900度,第0帧X坐标1040,旋转0度。
Cn16_3,第0帧X坐标150,第120帧X坐标850。选中第0帧,选择一个非线性的修饰,可以看到在直线两端出现了箭头。

和线性的修饰有明显区别。

现在可以通过播放动画预览一下效果

选中Cn02_2第120帧,直接在帧事件处添加一个帧事件名称“END”,可以看到在Cn02_2的下拉选项中出现了帧事件一项,并在120帧处自动添加了一个关键帧。

下面将此项目导出,在代码中的使用如下:

local MainScene = class("MainScene",cc.load("mvc").ViewBase)

function MainScene:ctor()
    self:enableNodeEvents()
    self.root = cc.CSLoader:createNode('res/Layer.csb')
end

function MainScene:onEnter()
    local _size = cc.Director:getInstance():getWinSize()
    local sp=cc.Sprite:create('res/HelloWorld.png')
    self:addChild(sp)
    sp:setPosition(_size.width/2,_size.height/2)
    self:createUI()
end

function MainScene:createUI()
    local action = cc.CSLoader:createTimeline('res/Layer.csb')
    self.root:runAction(action)
    action:pause()
    action:clearFrameEventCallFunc()
    action:gotoFrameAndPlay(0,122,false)

    local function onFrameEvent( frame )
        if frame==nil then return end
        local str = frame:getEvent()
        if str == 'END' then
            print("--5555--")
        end
    end 
    action:setFrameEventCallFunc(onFrameEvent)

    self:addChild(self.root)
end

return MainScene

gotoFrameAndPlay( ) 第3个参数改为true则可循环播放。
运行效果

猜你在找的Cocos2d-x相关文章