cocos2dx 垂直翻转动画

2015年03月02日 11:45 0 点赞 0 评论 更新于 2025-11-21 16:32

在Cocos2d-x中,动画是一项非常强大且神奇的功能。本文将介绍如何实现一个物体在运动过程中不断垂直翻转的动画效果,并且使用Lua语言来编写代码。

涉及的Cocos2d-x类

以下是代码中会涉及到的Cocos2d-x类及其功能:

  • CCAnimation:补间动画,用于创建动画帧序列。
  • CCAnimate:动画执行类,将CCAnimation转换为可执行的动画。
  • CCDelayTime:延迟动作,用于在动画序列中添加延迟。
  • CCFadeTo:设置透明度的动作,可使精灵在指定时间内改变透明度。
  • CCSequence:动作序列,用于按顺序执行一系列动作。
  • CCSpawn:让精灵的若干个动画同时执行。
  • CCRepeatForever:无限循环动作,可使动画无限重复播放。
  • CCCallFuncN:瞬时动作中的节点回调函数,用于在动画执行完成后调用指定的函数。
  • CCMoveTo:移动动作,使精灵移动到指定位置。

Lua代码实现

1. 获取窗口大小并创建图层

local winSize = CCDirector:sharedDirector():getWinSize()
local layer = CCLayerColor:create(ccc4(0, 0, 0, 111), winSize.width, winSize.height)

2. 加载动画帧

使用CCSpriteFrameCacheCCAnimation来加载并创建动画帧序列。

-- 加载运动过程中的动画,使用文件加载texturepacker
-- 这种加载方式网上有很多资料,不了解原理的可以自行Google
local cache = CCSpriteFrameCache:sharedSpriteFrameCache():addSpriteFramesWithFile("plist文件")
local array = CCArray:create()

-- 这里n是帧的数量
local n = 10 -- 假设帧数量为10
for i = 1, n do
local path = string.format("%d.png", i)
local name = CCSpriteFrameCache:sharedSpriteFrameCache():spriteFrameByName(path)
array:addObject(name)
end

local animation = CCAnimation:createWithSpriteFrames(array)

3. 创建多个运动动画

-- 这里的x和y需要你自己定义
local x = 100
local y = 200

for j = 1, 10 do
-- 设置帧动画
animation:setDelayPerUnit((math.random(5, 10)) / 70)
animation:setRestoreOriginalFrame(true)
local animate = CCAnimate:create(animation)
animate:setTag(0)

-- 创建精灵
local sprite = CCSprite:create("图片文件,这里是跟plist文件名一样的名字哟")
local offset = j * math.random(-1, 1) -- 这里-1,1就是中间分割,向两侧产生
sprite:setPosition(ccp(x + offset, y))
sprite:setScale(1.2)
layer:addChild(sprite)

-- 运动动画序列
local arraymove = CCArray:create()
arraymove:addObject(CCDelayTime:create(j * 0.1)) -- 根据需要自己设置延时
local moveto = CCMoveTo:create(0.8, ccp(x + offset, y)) -- 跟上面的对比,x,y自己设置

-- 透明度动画序列
local arrayFade = CCArray:create()
local delayFade = CCDelayTime:create(0.8)
local fade = CCFadeTo:create(0.05, 0) -- 0.05秒内,变为不透明
arrayFade:addObject(delayFade)
arrayFade:addObject(fade)
local actionFade = CCSequence:create(arrayFade)

-- 同时执行移动和透明度变化动画
local spawn = CCSpawn:createWithTwoActions(moveto, actionFade)
arraymove:addObject(spawn)

local action = CCSequence:create(arraymove)
sprite:runAction(CCRepeatForever:create(animate))
sprite:runAction(action)
end

4. 延迟销毁图层

-- 延迟销毁动作
local scene = CCDirector:sharedDirector():getRunningScene()
scene:addChild(layer, 100)

local arrayend = CCArray:create()
arrayend:addObject(CCDelayTime:create(2)) -- 延迟时间
arrayend:addObject(CCFadeTo:create(0.1, 0))
arrayend:addObject(CCCallFuncN:create(removeLayer)) -- 这里removeLayer是一个函数
local endAction = CCSequence:create(arrayend)
layer:runAction(endAction)

-- 移除图层的回调函数
function removeLayer(n)
n = tolua.cast(n, "CCNode")
n:removeFromParentAndCleanup(true)
end

通过以上代码,你可以实现一个Cocos2d-x的垂直翻转动画效果。代码中使用了多个动画组合,包括帧动画、移动动画和透明度变化动画,并且让这些动画同时或按顺序执行,最后实现了动画的无限循环和图层的延迟销毁。

作者信息

boke

boke

共发布了 3994 篇文章