Cocos2d-x开发教程 第四节 深入Action

上一节我们学习了Sprite具体的特性，这一节让我们来继续讲解Action。Action可以使任何继承于Node的对象在一段时间内改变属。例如，可以使Sprite在一段时间内从一个Postion移动到另一个Position

auto moveTo = MoveTo::create(2,Vec2(50,10));
mySprite1->runAction(moveTo);

auto moveBy = MoveBy::create(2,Vec2(20,0));
mySprite2->runAction(moveBy);

通过上面的代码我们可以得知，如果要用Action改变一个Node的属性需要先通过Action的create函数创建一个指向这个Action的指针，然后再通过Node的runAction函数执行这个Action即可。下面是一个Action的具体应用，代码如下

auto dirs = Director::getInstance()->getRunningScene();

auto newSprite2 = Sprite::create("Blue_Front1.png");
newSprite2->setPosition(100,56);
newSprite2->setName("sprite2");
newSprite2->setAnchorPoint(Vec2(0.5,0.5));
dirs->addChild(newSprite2,1);

auto moveBy = MoveBy::create(2,Point(500,0));
auto moveTo = MoveTo::create(2,Point(300,56));
auto delay = DelayTime::create(2.0f);

auto sequence = Sequence::create(moveBy,delay,NULL);
auto sequence2 = Sequence::create(delay,moveTo,NULL);

newSprite2->runAction(sequence);

auto newSprite3 = Sprite::create("Blue_Front1.png");
newSprite3->setPosition(600,56);
newSprite3->setName("sprite3");
newSprite3->setAnchorPoint(Vec2(0.5,0.5));
dirs->addChild(newSprite3,1);

newSprite3->runAction(sequence2);

运行效果的gif截图为

让我们结合代码与gif截图具体分析一下，3到7行创建一个Sprite并把它放到(100,56)这个位置上。9到11行创建了一个2两秒的MoveTy和一个两秒的MoveTo还有一个两秒的延时。13、14行将上面创建的Action组合放到两个Sequence中。16行执行了一个Sequence，它的效果是让原本在(100,56)位置上的Sprite在两秒内移动到(600,56)，之后再延时2秒。18到24行创建了另一个Sprite，并把它放到(600,56)位置上，最后让他执行第二个Sequence，这次执行的效果是使这个Sprite先延时2秒，之后在2秒内从(600,56)移动到(300,56)。其它的Action如RoatateTo、RotateTy、ScaleTo、ScaleTy、FadeIn、FadeOut、TintTo、TintBy的使用方法都与之类似，这里就不一一讲述了。

现在着重讲解一下Animate，它可以用来创建动画效果，来看一段例子

auto dirs = Director::getInstance()->getRunningScene();

auto newSprite2 = Sprite::create("Blue_Front1.png");
newSprite2->setPosition(300,1);

auto moveBy = MoveBy::create(2.0f,Vec2(500,0));

newSprite2->runAction(moveBy);

Vector<SpriteFrame*> animFrames;
animFrames.reserve(12);
animFrames.pushBack(SpriteFrame::create("Blue_Front1.png",Rect(0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Front2.png",81)));
animFrames.pushBack(SpriteFrame::create("Blue_Front3.png",81)));
animFrames.pushBack(SpriteFrame::create("Blue_Left1.png",81)));
animFrames.pushBack(SpriteFrame::create("Blue_Left2.png",81)));
animFrames.pushBack(SpriteFrame::create("Blue_Left3.png",81)));
animFrames.pushBack(SpriteFrame::create("Blue_Back1.png",81)));
animFrames.pushBack(SpriteFrame::create("Blue_Back2.png",81)));
animFrames.pushBack(SpriteFrame::create("Blue_Back3.png",81)));
animFrames.pushBack(SpriteFrame::create("Blue_Right1.png",81)));
animFrames.pushBack(SpriteFrame::create("Blue_Right2.png",81)));
animFrames.pushBack(SpriteFrame::create("Blue_Right3.png",81)));

Animation* animation = Animation::createWithSpriteFrames(animFrames,0.1f);
Animate* animate = Animate::create(animation);

newSprite2->runAction(RepeatForever::create(animate));

运行效果如下

13到26行先创建了一个SpriteFrame的容器，然后依次将12个SpriteFrame放入其中。28行用上面创建的容器生成Animation，29行生成一个Animate的Action，最后一行重复执行这个Action。这样就产生了动画效果。

Cocos2d-x中有一个Easing可以用来产生特殊的效果，用法如下

auto dirs = Director::getInstance();

auto newSprite2 = Sprite::create("Blue_Front1.png");
newSprite2->setPosition(100,0.5));
dirs->getRunningScene()->addChild(newSprite2,1);

auto move = MoveBy::create(2,Point(200,dirs->getVisibleSize().height - newSprite2->getContentSize().height));
auto move_back = move->reverse();

auto move_ease_in = EaseBounceIn::create(move->clone());
auto move_ease_in_back = move_ease_in->reverse();

auto move_ease_out = EaseBounceOut::create(move->clone());
auto move_ease_out_back = move_ease_out->reverse();

auto delay = DelayTime::create(0.25f);

auto seq1 = Sequence::create(move_ease_in,move_ease_in_back,delay->clone(),nullptr);

newSprite2->runAction(RepeatForever::create(seq1));

这段代码将产生弹跳的效果

这个例子用到了EaseBounceIn效果，还有一些其它效果如下

还有Sequence，这个也是我们需要经常用到的。Sequence可以执行一系列的Action，还有可执行函数和其它的Sequence，具体使用效果如下

auto dirs = Director::getInstance()->getRunningScene();

auto newSprite2 = Sprite::create("Blue_Front1.png");
newSprite2->setPosition(100,1);

auto jump = JumpBy::create(0.5,Point(0,0),100,1);

auto rotate = RotateBy::create(2.0f,10);

auto callbackJump = CallFunc::create([](){
	log("Jumped!");
});

auto callbackRotate = CallFunc::create([](){
	log("Rotated!");
});

auto seq = Sequence::create(jump,callbackJump,rotate,callbackRotate,nullptr);

newSprite2->runAction(RepeatForever::create(seq));

这个例子中的Sprite先执行了JumpBy动作，然后执行一个回调函数，接着执行一个RoateBy动作，然后再执行一个回调函数，然后反复重复这些动作。效果如下

在执行Action的同时，回调函数中也打印出了一些信息

最后我们来说一下Spawn，Spawn可以使多个Action同时执行，产生叠加的效果，用法如下

auto dirs = Director::getInstance()->getRunningScene();

auto newSprite2 = Sprite::create("Blue_Front1.png");
newSprite2->setPosition(100,1);

auto moveBy = MoveBy::create(10,Point(400,100));
auto fadeTo = FadeTo::create(2.0f,120.0f);

auto mySpawn = Spawn::createWithTwoActions(moveBy,fadeTo);
newSprite2->runAction(mySpawn);

这个例子在使Action的移动过程中同时使Action褪色，效果如下

Action的常见用法我们已经讲完了，下一节我们会具体讲解Scene。