Lab

Cocos2d-x v3:イージングの設定

 Tag :  Published : 2014-8-9

Pocket

EaseIn、EaseOut、EaseInOutなどを使用します。
アニメーションにイージングをつけます。
> Ver2.x : 『イージングの設定』はこちら

イージングの基本

イージングを設定すると、アニメーションに緩急をつける事ができます。

EaseIn->最初がゆっくり
EaseOut->最後がゆっくり
EaseInOut->最初と最後がゆっくり

イージングの設定

移動のアニメーションにEaseInをつけてみます。
スプライトが画面の左から右へ加速しながら移動します。

    //画面の左端にスプライトを配置
    Size s = Director::getInstance()->getVisibleSize();
    auto pSprite = Sprite::create("1.png");
    Size size = pSprite->getContentSize();
    pSprite->setPosition(Vec2(size.width/2, s.height/2));
    this->addChild(pSprite);
    
    //画面の右端まで移動
    auto action = MoveTo::create(1, Vec2(s.width-size.width/2, s.height/2));
    //EaseInの設定
    auto easeAction = EaseIn::create(action, 2);
    
    //アニメーション開始!
    pSprite->runAction(easeAction);
    

イージングの種類は沢山あります。
以降、11行目の部分を入れ替えて、いろいろな表現をしてみます。

EaseIn / EaseOut / EaseInOut

第2引数で緩急の具合を設定します。1が緩急なしの状態なので、1以上の値を入れます。サンプルはEaseInです。

    //緩急の具合を2に設定
    auto easeAction = EaseIn::create(action, 2);
    

EaseExponentialIn / EaseExponentialOut / EaseExponentialInOut

指数関数による勢いのあるイージング。サンプルはEaseExponentialInです。

    auto easeAction = EaseExponentialIn::create(action);
    

EaseSineIn / EaseSineOut / EaseSineInOut

サインカーブによるイージング。サンプルはEaseSineInです。

    auto easeAction = EaseSineIn::create(action);
    

EaseElasticIn / EaseElasticOut / EaseElasticInOut

ゴムのような伸縮を表現できるイージング。サンプルはEaseElasticOutです。

    auto easeAction = EaseElasticOut::create(action);
    

引数を足して、伸縮っぷりを調整する事もできます。

    auto easeAction = EaseElasticOut::create(action, .2);
    

EaseBounceIn / EaseBounceOut / EaseBounceInOut

ボールが落下する時のバウンドような表現ができるイージング。サンプルはEaseBounceOutです。

    auto easeAction = EaseBounceOut::create(action);
    

EaseBackIn / EaseBackOut / EaseBackInOut

行き過ぎて少し戻る…みたいな(?)表現ができるイージング。サンプルはEaseBackOutです。

    auto easeAction = EaseBackOut::create(action);
    

pageTop