基本动作

基本动作通常都是单一的动作，用来完成一个简单的目标。下面通过简单的示例来介绍常见的基本动作。

移动

使用 MoveTo MoveBy 完成节点对象在一个设置的时间后移动。

  1. auto mySprite = Sprite::create("mysprite.png");
  3. // 2秒内移动到位置（50，0）
  4. auto moveTo = MoveTo::create(2, Vec2(50, 0));
  6. mySprite->runAction(moveTo);
  8. // 2秒内从原位置向x方向增加偏移50
  9. auto moveBy = MoveBy::create(2, Vec2(50, 0));
  11. mySprite->runAction(moveBy);

三. 动作(Action) - 图1

旋转

使用 RotateTo RotateBy 完成节点对象在一个设置的时间后顺时针旋转指定角度。

  1. auto mySprite = Sprite::create("mysprite.png");
  3. // 2秒内不管原角度是多少，统统更改角度为顺时针40度
  4. auto rotateTo = RotateTo::create(2.0f, 40.0f);
  5. mySprite->runAction(rotateTo);
  7. // 在原有基础上增加40度
  8. auto rotateBy = RotateBy::create(2.0f, 40.0f);
  9. mySprite->runAction(rotateBy);

三. 动作(Action) - 图2

缩放

使用 ScaleBy ScaleTo 完成节点对象的比例缩放。

  1. auto mySprite = Sprite::create("mysprite.png");
  3. // 现有基础上增加3倍 ，也就是已经放大2倍后，再执行这段语句，会比原图像大6倍
  4. auto scaleBy = ScaleBy::create(2.0f, 3.0f);
  5. mySprite->runAction(scaleBy);
  7. // 比上面一段多了一个（x，y）参数可供选择，同一个函数的重载
  8. auto scaleBy = ScaleBy::create(2.0f, 3.0f, 3.0f);
  9. mySprite->runAction(scaleBy);
  11. // 放大到原图像的3倍，比如如果原图已经放大2倍，执行后，会变成原图的3倍大
  12. auto scaleTo = ScaleTo::create(2.0f, 3.0f);
  13. mySprite->runAction(scaleTo);
  15. // 比上面一段多了一个（x，y）参数可供选择，同一个函数的重载
  16. auto scaleTo = ScaleTo::create(2.0f, 3.0f, 3.0f);
  17. mySprite->runAction(scaleTo);

三. 动作(Action) - 图3

淡入淡出

使用 FadeIn FadeOut 完成节点对象的淡入，淡出。 FadeIn 修改节点对象的透明度属性，从完全透明到完全不透明，FadeOut 相反。

  1. auto mySprite = Sprite::create("mysprite.png");
  3. // 1秒从无到有（是从当前透明度到有，也就是说，当前透明度为125时，会从125过渡到255）
  4. auto fadeIn = FadeIn::create(1.0f);
  5. mySprite->runAction(fadeIn);
  7. // 2秒从有到无（当前透明度过渡到0）
  8. auto fadeOut = FadeOut::create(2.0f);
  9. mySprite->runAction(fadeOut);
  11. //注意，对子节点精灵的透明度不起作用，目前cocos2dX无法完成递归修改全部子节点透明度，不过可以去修改引擎源码，增加子节点递归，感兴趣的可以百度一下（后期的cocos creator版本则支持一并修改透明度）

三. 动作(Action) - 图4

色彩混合

使用 TintTo TintBy，将一个实现了 NodeRGB 协议的节点对象进行色彩混合。

  1. auto mySprite = Sprite::create("mysprite.png");
  3. // 颜色叠加至
  4. auto tintTo = TintTo::create(2.0f, 120.0f, 232.0f, 254.0f);
  5. mySprite->runAction(tintTo);
  7. // 颜色原有基础上增加（如果超过RGB的最大值255，则会取余计算）
  8. auto tintBy = TintBy::create(2.0f, 120.0f, 232.0f, 254.0f);
  9. mySprite->runAction(tintBy);

三. 动作(Action) - 图5

帧动画

使用 Animate 对象可以很容易的通过每隔一个短暂时间进行图像替代的方式，实现一个翻页效果。下面是一个例子：

  1. auto mySprite = Sprite::create("mysprite.png");
  3. // 创建帧序列动画
  4. Vector<SpriteFrame*> animFrames;
  5. animFrames.reserve(12);
  6. animFrames.pushBack(SpriteFrame::create("Blue_Front1.png", Rect(0,0,65,81)));
  7. animFrames.pushBack(SpriteFrame::create("Blue_Front2.png", Rect(0,0,65,81)));
  8. animFrames.pushBack(SpriteFrame::create("Blue_Front3.png", Rect(0,0,65,81)));
  9. animFrames.pushBack(SpriteFrame::create("Blue_Left1.png", Rect(0,0,65,81)));
  10. animFrames.pushBack(SpriteFrame::create("Blue_Left2.png", Rect(0,0,65,81)));
  11. animFrames.pushBack(SpriteFrame::create("Blue_Left3.png", Rect(0,0,65,81)));
  12. animFrames.pushBack(SpriteFrame::create("Blue_Back1.png", Rect(0,0,65,81)));
  13. animFrames.pushBack(SpriteFrame::create("Blue_Back2.png", Rect(0,0,65,81)));
  14. animFrames.pushBack(SpriteFrame::create("Blue_Back3.png", Rect(0,0,65,81)));
  15. animFrames.pushBack(SpriteFrame::create("Blue_Right1.png", Rect(0,0,65,81)));
  16. animFrames.pushBack(SpriteFrame::create("Blue_Right2.png", Rect(0,0,65,81)));
  17. animFrames.pushBack(SpriteFrame::create("Blue_Right3.png", Rect(0,0,65,81)));
  19. // 从帧中创建动画
  20. Animation* animation = Animation::createWithSpriteFrames(animFrames, 0.1f);
  21. Animate* animate = Animate::create(animation);
  23. // 永远运行的函数
  24. mySprite->runAction(RepeatForever::create(animate));
  26. //（如果想要运行几次后停止，可使用Repeate类,第二个参数表示运行次数
  27. mySprite->runAction(Repeat::create(animate,3));

帧动画样例

  1. auto mySprite = Sprite::create("animation/Andvari00.jpg"); //默认的第一帧
  2. mySprite->setPosition(Vec2(visibleSize.width / 2 + origin.x-100, visibleSize.height / 2));
  3. this->addChild(mySprite, 0); //挂载位置
  4. Vector<SpriteFrame*> animationFrames;
  5. animationFrames.reserve(19);
  6. for (int i = 0; i < 19; i++) {
  7. char frame[32];
  8. sprintf(frame, "animation/Andvari%02d.jpg", i); //图片的路径+名称，注意补充前导零
  9. animationFrames.pushBack(SpriteFrame::create(frame,Rect(0,0,996,560))); //注意图片分辨率
  10. }
  11. Animation* animation = Animation::createWithSpriteFrames(animationFrames, 1/10.0f); //播放速率，每秒10帧
  12. animation->setLoops(-1); //永远播放
  13. Animate* animate = Animate::create(animation);
  14. mySprite->runAction(animate);

变速运动

变速动作可以让节点对象具有加速度，产生平滑同时相对复杂的动作，所以可以用变速动作来模仿一些物理运动，这样比实际使用物理引擎的性能消耗低，使用起来也简单。当然你也可以将变速动作应用到动画菜单和按钮上，实现你想要的效果。

三. 动作(Action) - 图6

Cocos2d-x 支持上图中的大部分变速动作，实现起来也很简单。我们来看个例子，一个精灵从屏幕顶部落下然后不断跳动：

  1. // 创建精灵
  2. auto mySprite = Sprite::create("mysprite.png");
  4. // 上升距离
  5. auto move = MoveBy::create(2, Vec2(0, 100));
  7. // 创建一个反弹行动的动作曲线
  8. auto move_ease_in = EaseBounceIn::create( move->clone() );
  9. auto move_ease_in_back = move_ease_in->reverse();
  11. // 创建延迟
  12. auto delay = DelayTime::create(0.25f);
  14. // 创建队列(sequence)动画
  15. auto seq1 = Sequence::create(move_ease_in, delay, move_ease_in_back,
  16.     delay->clone(), nullptr);
  18. // 永远运动
  19. mySprite->runAction(RepeatForever::create(seq1));

跳跃

jumpTo(time,vec2(x,y),height,n) ,这个函数可以让精灵蹦蹦跳跳的运行到指定位置，每次跳动的高度由height决定，n为到达目标位置时，一共跳跃几次

  1. //time跳跃时间，vec2(x,y)距离终点的距离
  2. //height起跳的高度，n跳跃次数        
  3. ActionInterval *jumpto=JumpTo::create(2,Vec2(visibleSize.width,0),50,4);
  4. sprite->runAction(jumpto);

jumpBy(time,vec2(x,y),height,n) ,这个函数与jumpTo类似, 参数为当前位置的偏移量

ActionInterval *jumpby=JumpBy::create(2,Vec2(visibleSize.width/2,-visibleSize.height/2),50,4);
sprite->runAction(jumpby);

闪烁

会让精灵闪动数次，常用在玩家角色受伤时的闪动

// Blink(time,n)， time动作持续时间，单位为秒，n为闪烁次数
ActionInterval *blink=Blink::create(0.5,3);
sprite->runAction(blink);

逆运动

所有的by运动均有reverse函数（注意，to变化则没有）

sprite->setColor(Color3B(0, 0, 0));
auto tintby = TintBy::create(2.0f, 255, 0, 0);
sprite->runAction(Sequence::create(tintby, DelayTime::create(3.0f), tintby->reverse(), nullptr));