cocos2d-x 4.0 学习之路（十）移动（Action）

MoveTo和MoveBy

关于移动这个两个方法，有很多文字介绍，那么我做出来动图，理解起来会更轻松一点。

下面这张图就是，我们想要实现的目标：

代码如下：

bool HelloWorld::init()
{
    if (!Scene::init()){ return false; }

    auto sprite = Sprite::create("s1.png");
    sprite->setPosition(Vec2(50, 300));
    this->addChild(sprite);

    // MoveBy和MoveTo的一个参数都是Duation，即移动时间，单位秒
    // MoveBy第2个参数的意义是三角距离，即向X方向移动500，向Y方向移动200，是斜着走的
    auto moveBy = MoveBy::create(1.0f, Vec2(500, 200));
    auto delay = DelayTime::create(1);

    // MoveTo第2个参数的意义是坐标，即移动到坐标(800, 100)
    auto moveTo = MoveTo::create(1.0f, Vec2(800, 100));
    sprite->runAction(Sequence::create(moveBy, delay, moveTo, nullptr));
    return true;
}

效果：

ScaleTo和ScaleBy

这两个是缩放功能，那么To和By的用法，也是大同小异。

我们显示2个精灵，在精灵初始化的时候，把它们都扩大4倍。然后用ScaleTo和ScaleBy同样的参数，看看效果有什么不同。

bool HelloWorld::init()
{
    if (!Scene::init()){ return false; }

    auto sprite1 = Sprite::create("s1.png");
    sprite1->setPosition(Vec2(200, 400));
    sprite1->setScale(4.0);
    this->addChild(sprite1);

    auto sprite2 = Sprite::create("s1.png");
    sprite2->setPosition(Vec2(700, 400));
    sprite2->setScale(4.0);
    this->addChild(sprite2);

    // ScaleTo:无论精灵当前的拉伸倍数是多少，它都会把精灵缩放到指定倍数
    auto scaleTo = ScaleTo::create(1.5f, 2.0f, 2.0f);

    // scaleBy:是在当前的倍数基础上，再增加指定的倍数
    auto scaleBy = ScaleBy::create(1.5f, 2.0f, 2.0f);
    sprite1->runAction(scaleTo);
    sprite2->runAction(scaleBy);
    return true;
}

效果：

其实，利用Scale我们就可以实现游戏里面卡牌翻转的效果：

bool HelloWorld::init()
{
    if (!Scene::init()){ return false; }

    auto sprite1 = Sprite::create("s1.png");
    sprite1->setPosition(Vec2(500, 400));
    sprite1->setScale(2.0, 2.0);
    this->addChild(sprite1);

    auto sprite2 = Sprite::create("s2.png");
    sprite2->setPosition(Vec2(500, 400));
    sprite2->setScale(0.0, 2.0);
    this->addChild(sprite2);

    auto scaleTo1 = ScaleTo::create(1.5f, 0.0f, 2.0f);
    auto scaleTo2 = ScaleTo::create(1.5f, 2.0f, 2.0f);
    sprite1->runAction(scaleTo1);
    sprite2->runAction(scaleTo2);
    return true;
}

类似的动作还有很多，比如Blink（闪烁），

auto b= Blink::create(3, 5);  // 3秒内闪烁5次

还有旋转、渐变、变色等，就不一一列举了。

Easing（减缓）

这个其实是一个物理效果，减缓是使用指定的加速度设置动画，以使动画平滑。

bool HelloWorld::init()
{
    if (!Scene::init()){ return false; }

    auto sprite1 = Sprite::create("s1.png");
    sprite1->setPosition(Vec2(500, 400));
    sprite1->setScale(2.0, 2.0);
    this->addChild(sprite1);

    auto move = MoveBy::create(2, Vec2(200, 500));
    auto move_ease_in = EaseBounceIn::create(move->clone());
    auto move_ease_in_back = move_ease_in->reverse();
    auto delay = DelayTime::create(0.25f);
    auto seq1 = Sequence::create(move_ease_in, delay, move_ease_in_back,
        delay->clone(), nullptr);
    sprite1->runAction(RepeatForever::create(seq1));
    return true;
}