CCAction与CCAnimation

最新推荐文章于 2024-01-31 16:48:48 发布

Code蚂蚁

最新推荐文章于 2024-01-31 16:48:48 发布

阅读量2.2k

点赞数

分类专栏： cocos2d-x 文章标签：移动开发游戏动画

cocos2d-x 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、动作与动画

动作（action）作用于游戏元素，可以使游戏元素运动起来。常见的动作有移动、转动、闪烁、消失等。动作分为持续性动作与瞬时动作，持续性动作在一段时间内连续完成，瞬时动作会瞬间完成。为了使游戏画面动起来，我们会在需要的时候创建一系列动作，并把它们应用到游戏元素中。在Cocos2d-x中，动作由CCAction类实现，由CCAction类派生出持续性动作类CCAction Interval和瞬时动作类CCActionInstant。所有的动作都派生自以上两个类之一。

动画（animation）是一种特殊的持续性动作，它只能应用于精灵上，用于实现帧动画效果。如同电影胶片一样，一个帧动画由多张静止的图片不停地切换形成。静止的图片叫做帧（frame），帧的序列代表一个动画效果。如图2-6所示，《捕鱼达人》中鱼的摆动就是由帧动画组成的，摆动的同时，鱼还在鱼层中游动，显得格外真实。

图2-6 帧动画“游动的鱼”

在Cocos2d-x中，我们可以使用多个帧创建帧动画序列（CCAnimation），并用帧动画序列创建可作用于精灵的帧动画（CCAnimate）

二、动画简单实例

pic2476.png

简单的动画代码：

CCSize winSize=CCDirector::sharedDirector()->getWinSize(); //#1：生成动画需要的数据类  CCTexture2D *texture=CCTextureCache::sharedTextureCache()->addImage("pic2476.png"); CCSpriteFrame *frame0=CCSpriteFrame::createWithTexture(texture,CCRectMake(32*0,48*0,32,48)); CCSpriteFrame *frame1=CCSpriteFrame::createWithTexture(texture,CCRectMake(32*1,48*0,32,48)); CCSpriteFrame *frame2=CCSpriteFrame::createWithTexture(texture,CCRectMake(32*2,48*0,32,48)); CCSpriteFrame *frame3=CCSpriteFrame::createWithTexture(texture,CCRectMake(32*3,48*0,32,48)); CCArray *arrayFrames=CCArray::create(); arrayFrames->addObject(frame0); arrayFrames->addObject(frame1); arrayFrames->addObject(frame2); arrayFrames->addObject(frame3); CCAnimation *animation=CCAnimation::createWithSpriteFrames(arrayFrames,0.2f); //#2：初始化并设置Sprite CCSprite *sprite=CCSprite::createWithSpriteFrame(frame0); sprite->setPosition(ccp(winSize.width/2,winSize.height/2)); addChild(sprite); //#3：使用animation生成一个动画动作animate  CCAnimate *animate=CCAnimate::create(animation); sprite->runAction(CCRepeatForever::create(animate));

注意，cocos2dx不支持使用clip的动画，另外，clip动画的开发成本很高，在智能手机这种大内存的平台是否适用（牺牲内存换开发速度么？），值得商量。

#2 相关的类关系图

简单过程是，使用CCTexture2D加载图片，用CCTexture2D生成对应的CCSpriteFrame（对应的就是帧），将CCSpriteFrame添加到CCAnimation生成动画数据，用CCAnimation生成CCAnimate（就是最终的动画动作），最后用CCSprite执行这个动作。

动作1：立即动作

第一部分：动作概述

动作可以说构成了cocos2dx的精华（你看动作类有多少子类就知道了）。

动作是什么？动作可以理解为指令，这些指令由节点执行。

动作由节点（node）执行，该节点执行动作的时候，他的所有子节点跟着执行，这一特性是非常有用的。

执行动作的代码非常简单，先生成，然后让节点执行：

CCAction *action=....
node->runAction(action);

CCAction及其子类的继承树非常庞大，我们需要一个一个介绍。

CCAction及其子类简图：

第二部分：CCActionInstant家族（立即动作）

立即动作就是不需要时间,马上就完成的动作。立即动作的共同基类是CCActionInstant。CCActionInstant的常用子类有：

CCFlipX：X轴翻转、CCFlipY：Y轴翻转

CCHide：隐藏、CCShow：显示、CCToggleVisibility：切换可视性

CCPlace：放置到一个位置

CCCallFunc家族：回调函数包装器

这些类的使用非常简单，就不说了

第三部分：CCCallFunc家族（回调函数包装器）

CCCallFunc是CCActionInstant的子类，是非常重要的一个类族，就是适配器。用大白话说，就是做了一层包装，把函数包装成动作，这样你在执行动作的时候，就可以执行函数了。听起来很怪异吗？为什么不直接执行函数呢？这是因为执行条件不同。

我们看个例子：玩家死亡动画（也是个动作）播放完成后，结束游戏。(该例子来自于炸弹人，有改动)

CCAction *sequneceAction = CCSequence::actions(
                        getAnimate(),//获得死亡动画，自己实现的函数
                        CCCallFunc::actionWithTarget(this, callfunc_selector(Hero::deadDoneCallback)),//结束游戏用的回调
                        NULL);

this->runAction( );

//回调函数的定义
void Hero::deadDoneCallback()
{
            this->setIsVisible(false);//设置节点隐藏，让cocos2dx自身清理，而不是马上清理。
            CCScene *scene=GameOverScene::scene();
            CCDirector::sharedDirector()->replaceScene(CCTransitionFade::transitionWithDuration(1.2f,scene));
}

其他的代码先不用管它，我们重点是：

CCCallFunc::actionWithTarget(this, callfunc_selector(Hero::deadDoneCallback);

cocos2dx中，一般对象都是采用静态方法生成的，我们看这个函数签名：

static CCCallFunc * actionWithTarget(SelectorProtocol* pSelectorTarget, SEL_CallFunc selector);

pSelectorTarget是指这个函数的执行对象，这点不要和动作的执行节点搞混，两者可以是一个也可以不是一个。比如这里，我用的是this，那么动作的执行节点和函数的执行对象就是同一个。

void CCCallFunc::execute() {
            if (m_pCallFunc) {
                        (m_pSelectorTarget->*m_pCallFunc)();
            }

            if (CCScriptEngineManager::sharedScriptEngineManager()->getScriptEngine()) {
                        CCScriptEngineManager::sharedScriptEngineManager()->getScriptEngine()->executeCallFunc(
                                                m_scriptFuncName.c_str());
            }
}

上面是CCCallFunc::execute()的源码，m_pSelectorTarget就是之前在签名里绑定的pSelectorTarget，而该动作的执行节点则是另外一个变量m_pTarget

第四部分：使用CCCallFunc家族的类

CCCallFunc家族一共有四个类。这是四个类对象的静态生成函数:

CCCallFunc * CCCallFunc::actionWithTarget(SelectorProtocol* pSelectorTarget,SEL_CallFunc selector);
CCCallFuncN * CCCallFuncN::actionWithTarget(SelectorProtocol* pSelectorTarget,SEL_CallFuncN selector);
CCCallFuncND * CCCallFuncND::actionWithTarget(SelectorProtocol* pSelectorTarget,SEL_CallFuncND selector, void* d);
CCCallFuncO * CCCallFuncO::actionWithTarget(SelectorProtocol* pSelectorTarget,SEL_CallFuncO selector, CCObject* pObject)

我们在写的时候，就直接用这四个生成相关的动作对象，然后让节点执行就行。

但是要注意这四个类，分别对应的是四种不同的函数接口，也可以说是他包装了四种不同的回调函数。这四个回调函数的不同主要是参数表的不同。（貌似是废话）我们来看这四个回调函数的类型定义

typedef void (SelectorProtocol::*SEL_CallFunc)();
typedef void (SelectorProtocol::*SEL_CallFuncN)(CCNode*);
typedef void (SelectorProtocol::*SEL_CallFuncND)(CCNode*, void*);
typedef void (SelectorProtocol::*SEL_CallFuncO)(CCObject*);

这四个玩意要解释清楚比较麻烦，这是用typedef定义了类成员函数指针。如果你对C++不熟悉，你不需要搞懂具体什么意思，但你必须保证你的函数签名和这四个其中之一一致。

也就是说，你自己写的回调函数签名，看起来像这样：

void A::f1( );
void A::f2(CCNode *node);//接受一个节点，该节点是动作的执行节点
void A::f3(CCNode *node,void *param);//接受动作的执行节点，还有一个void参数
void A::f4(CCObject* obj);//接受一个CCObject对象指针

你可以在回调函数里操作这些被传进来的参数。

另外，在用静态函数生成动作的时候，你需要使用一个宏，来帮助转换函数指针类型，就是上面那个callfunc_selector，因为有四种类型的回调函数，所以也就有四个类型转换宏

#define callfunc_selector(_SELECTOR) (SEL_CallFunc)(&_SELECTOR)
#define callfuncN_selector(_SELECTOR) (SEL_CallFuncN)(&_SELECTOR)
#define callfuncND_selector(_SELECTOR) (SEL_CallFuncND)(&_SELECTOR)
#define callfuncO_selector(_SELECTOR) (SEL_CallFuncO)(&_SELECTOR)

最终，我们写出来的代码看起来像是这样的：

CCAction *a1=CCCallFunc::actionWithTarget(this, callfunc_selector(A::f1));
this->runAction(a1);

CCAction *a2=CCCallFuncN::actionWithTarget(this, callfuncN_selector(A::f2));
this->runAction(a2);

int i;
CCAction *a3=CCCallFuncND::actionWithTarget(this, callfuncND_selector(A::f3),(void*)&i);
this->runAction(a3);

CCObject *obj;
CCAction *a4=CCCallFuncO::actionWithTarget(this, callfuncO_selector(A::f4),obj);
this->runAction(a4);

使用的时候，只需注意类-回调函数-转换宏，三者之间的对应关系即可，他们都是一一对应的。

动作2：持续动作

第一部分：CCActionInterval家族（持续动作）

持续动作，顾名思义，就是该动作的执行将持续一段时间。因此持续动作的静态生成函数，往往附带一个时间值Duration。例如：

CCActionInterval *moveByAction=CCMoveBy::actionWithDuration(0.5f,ccp(5,5));

持续动作类名后缀：一般有两种后缀，一种是To，一种是By。To表示最终达到的目标值，By表示增量值。如：

CCMoveBy::actionWithDuration(0.5f,ccp(5,5));//表示花0.5秒，按向量(5,5)移动一段距离
CCMoveTo::actionWithDuration(0.5f,ccp(5,5));//表示花0.5秒，移动到坐标(5,5)

持续动作比立即动作的数量要多很多，常用的CCActionInterval子类动作有：

简单的：

CCMoveTo：移动到、CCMoveBy：按……移动

CCJumpTo：跳跃到、CCJumpBy：按……跳跃

CCBezierTo：贝兹移动到、CCBezierBy：按……贝兹移动

CCRotateTo：旋转到、CCRotateBy：按……旋转

CCScaleTo：缩放到、CCScaleBy：按……缩放

CCSkewTo：切变到、CCSkewBy：按……切变

CCTintTo：颜色渐变到、CCTintBy：按……颜色渐变

CCFadeIn：从无到有，也叫淡入、CCFadeOut：从有到无，也叫淡出、CCFadeTo：改变不透明度到某个值

CCBlink：闪耀

CCDelayTime：延时

复杂的：

CCAnimate：帧动画

CCGridAction家族：网格动画

包装器：CCRepeat：重复执行几次、CCRepeatForever：永远执行、CCSequence：按序列执行、CCSpawn：同时执行、CCActionEase家族：补间动画

第二部分：简单的持续动作

这些动作都非常简单，和立即动作的区别只是增加了一个执行时间而已。但还有一些要注意的地方：

1.旋转动作顺时针是正方向

2.关于贝兹曲线

贝兹曲线的描述结构体如下：

/** @typedef bezier configuration structure
*/
typedef struct _ccBezierConfig {
            //! end position of the bezier
            CCPoint endPosition;
            //! Bezier control point 1
            CCPoint controlPoint_1;
            //! Bezier control point 2
            CCPoint controlPoint_2;
} ccBezierConfig;

如果执行节点是this的话，那么对应个点的位置如图。

注意，当使用CCBezierTo时，ccBezierConfig的点都是绝对坐标点。但如果使用CCBezierBy，ccBezierConfig的点都是相对坐标点。这点要谨记。

第三部分：一些包装器

这些动作单独无法起作用，需要包装其他动作类才行。他们的作用是对于动作的执行，增加一些变化。非常类似于装饰者模式。

1.CCRepeat：用于重复执行几次动作，times表示执行次数

static CCRepeat * CCRepeat：：actionWithAction (CCFiniteTimeAction *pAction, unsigned int times)

使用举例：在我的炸弹人例子中，用到如下写法，我播放一个炸弹动画若干次，然后启动爆炸的相关代码。

CCFiniteTimeAction *action=getAnimate();//获得炸弹播放动画，自己实现的函数
CCAction *sequneceAction = CCSequence::actions(
            CCRepeat::actionWithAction(action,5),
            CCCallFunc::actionWithTarget(this, callfunc_selector(Bomb::deadOnCallback)),
            NULL);
sprite->runAction(sequneceAction);

2.CCRepeatForever：永远执行一个动作

static CCRepeatForever * CCRepeatForever ：：actionWithAction (CCActionInterval *pAction)

使用举例：比如，一个精灵我只会改变他的位置，但是不需要改变他的动画，那么我就可以使用这个来保持这个动画一直运行，我在炸弹人的Monster类中使用了类似代码：

CCActionInterval *action=getAnimate();//获得炸弹播放动画，自己实现的函数
spirte->runAction(CCRepeatForever::actionWithAction(action));

3.CCSequence：按序列执行动作，这会让节点连续执行几个动作。

static CCFiniteTimeAction * CCSequence：：actions (CCFiniteTimeAction *pAction1,...)

使用举例：这个例子经常使用的时候，就是执行一个动作，然后回调。比如主角行走一个格子后，切换为站立状态。我在炸弹人的Hero类中使用了这种方法：

CCAction *sequneceAction = CCSequence::actions(moveByAction,CCCallFunc::actionWithTarget(this, callfunc_selector(Hero::moveDoneCallback)),NULL);
this->runAction(sequneceAction);

注意最后要使用NULL结尾。表示传参结束。我不明白为什么非要强制加NULL，按道理说C++不定参数表，可以不用NULL的。看源代码才发现，里面用到了真值判断刷循环。我不知道这是为了和ObjectiveC语法保持一致还是为什么，我并不熟悉Objc。

CCFiniteTimeAction* CCSequence::actions(CCFiniteTimeAction *pAction1, ...)
{
            va_list params;
            va_start(params, pAction1);

            CCFiniteTimeAction *pNow;
            CCFiniteTimeAction *pPrev = pAction1;

            while (pAction1)
            {
                        pNow = va_arg(params, CCFiniteTimeAction*);
                        if (pNow)
                        {
                                    pPrev = actionOneTwo(pPrev, pNow);
                        }
                        else
                        {
                                    break;
                        }
            }

            va_end(params);
            return pPrev;
}

4.CCSpawn：同时执行几个动作，最终动作的持续时间，由时间最长的那个动作确定。

static CCFiniteTimeAction * actions (CCFiniteTimeAction *pAction1,...);

使用举例：可以用CCSpacwn来做翻跟头的动画，只需要组合moveTo和RotateBy。Test中有这个代码：

CCAction* action = CCSpawn::actions(
    CCJumpBy::actionWithDuration(2, CCPointMake(300,0), 50, 4),
    CCRotateBy::actionWithDuration( 2, 720),
    NULL);

m_grossini->runAction(action);

注意，从字面意思你就知道，不要在CCSequence中使用CCRepeatForever，两者是互相冲突的。

第四部分：反动作

反动作是使用一个接口实现的，该接口直接返回一个此动作的反动作。

virtual CCFiniteTimeAction * reverse (void)

注意，并非所有动作都有反动作，xxxTo没有，xxxBy则有。

使用举例：反动作很容易造出一个动作循环来，在Test中有这个代码：

CCActionInterval* jump = CCJumpBy::actionWithDuration(2, CCPointMake(300,0), 50, 4);
CCFiniteTimeAction* action = CCSequence::actions( jump, jump->reverse(), NULL);

m_grossini->runAction(action);

动作3：补间动作

第一部分：CCActionEase家族（补间动作）

补间动作也是一个包装器（之前叫补间动画，从字面上讲，叫动作更合适一些。）。你也可以叫他缓释动作。

1.含义

补间动作改变的是，内部动作的执行速率（注意，并没有改变执行的最终效果，和执行的时间。）关于这个含义，我们用图表表示，横轴表示时间，纵轴表示位移。

假设我们有一个动作，4秒内按（100，100）的增量进行移动

CCMoveBy::actionWithDuration(4.0f, ccp(100,100));

假设我们的机器比较操蛋，一秒一帧（用绿线切割）。假设初始节点在（0，0）点，那么这四秒移动的点位置分别是（25，25）（50，50）（75，75）（100，100）。

他的位移时间关系就是图上的蓝线，从图上可以清晰看出，移动是按照匀速速率进行的。

现在我们使用CCEaseSineInOut做包装器，包装这个动作：

CCEaseSineOut::actionWithAction(CCMoveBy::actionWithDuration(4.0f, ccp(100,100)));

他的位移时间关系变成图上的红线，从图上可以清晰看出，移动是非匀速速率进行的，先慢后快。那么被绿线截取的位移点的位置，也会发生变化。

从这个图可以看出，使用补间动作，并没有改变位移和时间，但是改变了动作的执行速率，从匀速执行变为非匀速执行。

2.原理

通过包装器，每一个补间动画，都改变了内部动作的执行速率，这是通过封装代理update函数完成的，例如前面的CCEaseSineOut。

void CCEaseSineOut::update(ccTime time)
{
m_pOther->update(sinf(time * (float)M_PI_2));
}

3.后缀解释

补间动作有三种后缀：

In：表示动作执行先快后慢

Out：表示动作执行先慢后快

InOut：表示动作执行快-慢-快

第二部分：使用补间动作

不同的补间动画有不同的ST图。可以在这里查看和运行效果

http://www.robertpenner.com/easing/easing_demo.html

你可能觉得这种执行方式很奇怪。但这样可以做出很不错的效果，比你自己手动调整要快的多，因为这些曲线都是来自于数学计算，而这些数学公式，都是从实际的物体运行中总结出来的。

使用举例：比如你要做一个皮球落地的动作，就可以用CCEaseBounceOut。具体效果你可以用上面的地址运行一下。

第三部分：CCSpeed

CCSpeed也是一个包装器，区别于补间动作，他是真正可以改变内部动作执行时间（Duration）的。

CCActionInterval *move = CCMoveBy::actionWithDuration(3,ccp(350,0));
CCSpeed *speed= CCSpeed::actionWithAction(move,2.0f); // 调整为2倍速运行

使用举例：这个动作经常用来做慢镜头和快进。

动作4：其他动作

2012-01-26 14:49:52

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://4137613.blog.51cto.com/4127613/767613

第一部分：CCFollow跟随动作

CCFollow动作，可以让一个节点跟随另一个节点做位移。

他有两个静态工厂方法，后者可以设置一个跟随范围，离开范围就不再跟随。

bool initWithTarget (CCNode *pFollowedNode)
bool initWithTarget (CCNode *pFollowedNode, const CCRect &rect)

CCFollow经常用来设置layer跟随sprite，可以实现类似摄像机跟拍的效果。cocos2d-x中的tests里，有类似的例子，代码如下：

void ActionFollow::onEnter()
{
    ActionsDemo::onEnter();

    centerSprites(1);
    CCSize s = CCDirector::sharedDirector()->getWinSize();

    m_grossini->setPosition(CCPointMake(-200, s.height / 2));
    CCActionInterval* move      = CCMoveBy::actionWithDuration(2, CCPointMake(s.width * 3, 0));
    CCActionInterval* move_back = move->reverse();
    CCFiniteTimeAction* seq       = CCSequence::actions(move, move_back, NULL);
    CCAction* rep               = CCRepeatForever::actionWithAction((CCActionInterval*)seq);

    m_grossini->runAction(rep);

    this->runAction(CCFollow::actionWithTarget(m_grossini, CCRectMake(0, 0, s.width * 2 - 100, s.height)));
}

第二部分：CCDelayTime延时动作

CCDelayTime是一个延时若干秒的动作，最常见的用法就是在一个CCSequence序列动作中，打入若干延时时间，让动作的执行速度慢下来，不至于眼花缭乱，让人反应不过来。

cocos2d-x中的tests里，有类似的例子，代码如下：

void ActionDelayTime::onEnter()
{
    ActionsDemo::onEnter();

    alignSpritesLeft(1);

    CCActionInterval* move = CCMoveBy::actionWithDuration(1, CCPointMake(150,0));
    CCFiniteTimeAction* action = CCSequence::actions( move, CCDelayTime::actionWithDuration(2), move, NULL);

    m_grossini->runAction(action);
}

第三部分：CCProgressFromTo与CCProgressTo 进度动作

进度动作，也是一种从无到有逐渐绘制的动作，和淡入淡出的作用类似。

注意进度动作的执行节点为CCProgressTimer，而非我们常用的CCSprite。我们在使用进度动作时，需要指定绘制类型。

cocos2d-x一种提供了6种类型的枚举值：

typedef enum {
            /// Radial Counter-Clockwise 逆时针
            kCCProgressTimerTypeRadialCCW,
            /// Radial ClockWise 顺时针
            kCCProgressTimerTypeRadialCW,
            /// Horizontal Left-Right 从左往右
            kCCProgressTimerTypeHorizontalBarLR,
            /// Horizontal Right-Left 从右往左
            kCCProgressTimerTypeHorizontalBarRL,
            /// Vertical Bottom-top 从下往上
            kCCProgressTimerTypeVerticalBarBT,
            /// Vertical Top-Bottom 从上往下
            kCCProgressTimerTypeVerticalBarTB,
} CCProgressTimerType;

cocos2d-x中的tests里，有全部的进度动作的例子，其中按时针绘制的例子代码如下：

void SpriteProgressToHorizontal::onEnter()
{
            SpriteDemo::onEnter();

            CCSize s = CCDirector::sharedDirector()->getWinSize();

            CCProgressTo *to1 = CCProgressTo::actionWithDuration(2, 100);
            CCProgressTo *to2 = CCProgressTo::actionWithDuration(2, 100);

            CCProgressTimer *left = CCProgressTimer::progressWithFile(s_pPathSister1);
            left->setType( kCCProgressTimerTypeHorizontalBarLR );//设置动作类型
            addChild(left);
            left->setPosition(CCPointMake(100, s.height/2));
            left->runAction( CCRepeatForever::actionWithAction(to1));

            CCProgressTimer *right = CCProgressTimer::progressWithFile(s_pPathSister2);
            right->setType( kCCProgressTimerTypeHorizontalBarRL );//设置动作类型
            addChild(right);
            right->setPosition(CCPointMake(s.width-100, s.height/2));
            right->runAction( CCRepeatForever::actionWithAction(to2));
}