Guides
Guides
Start typing to search…

Action Easing

This page will cover every easing animation method that can be used on actions.

Actions are great as they allow a node's properties to be manipulated but they are weightless. They perform the same from start to finish, luckily there are tons of easing methods to help overcome this and make the actions look more dynamic and alive.

Though the easing methods can be used on virtually any action, this page will be using them with a MoveBy action. The MoveBy action will run for 2 seconds and move the node 300 pixels in the x axis and 0 pixels in the y axis.

Ease Example format:

nodeName.runAction( EaseMethod( action ) );

Note: Any action that has a slightly different format to the one above will be clearly shown
Note: The action inside can a variable or an inline action

EaseBackIn

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseBackIn *easeAction = EaseBackIn::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseBackIn( nodeAction );
nodeName.runAction( easeAction );
EaseBackIn Preview

EaseBackInOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseBackInOut *easeAction = EaseBackInOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseBackInOut( nodeAction );
nodeName.runAction( easeAction );
EaseBackInOut Preview

EaseBackOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseBackOut *easeAction = EaseBackOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseBackOut( nodeAction );
nodeName.runAction( easeAction );
EaseBackOut Preview

EaseBounceIn

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseBounceIn *easeAction = EaseBounceIn::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseBounceIn( nodeAction );
nodeName.runAction( easeAction );
EaseBounceIn Preview

EaseBounceInOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseBounceInOut *easeAction = EaseBounceInOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseBounceInOut( nodeAction );
nodeName.runAction( easeAction );
EaseBounceInOut Preview

EaseBounceOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseBounceOut *easeAction = EaseBounceOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseBounceOut( nodeAction );
nodeName.runAction( easeAction );
EaseBounceOut Preview

EaseCircleActionIn

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseCircleActionIn *easeAction = EaseCircleActionIn::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseCircleActionIn( nodeAction );
nodeName.runAction( easeAction );
EaseCircleActionIn Preview

EaseCircleActionInOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseCircleActionInOut *easeAction = EaseCircleActionInOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseCircleActionInOut( nodeAction );
nodeName.runAction( easeAction );
EaseCircleActionInOut Preview

EaseCircleActionOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseCircleActionOut *easeAction = EaseCircleActionOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseCircleActionOut( nodeAction );
nodeName.runAction( easeAction );
EaseCircleActionOut Preview

EaseCubicActionIn

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseCubicActionIn *easeAction = EaseCubicActionIn::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseCubicActionIn( nodeAction );
nodeName.runAction( easeAction );
EaseCubicActionIn Preview

EaseCubicActionInOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseCubicActionInOut *easeAction = EaseCubicActionInOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseCubicActionInOut( nodeAction );
nodeName.runAction( easeAction );
EaseCubicActionInOut Preview

EaseCubicActionOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseCubicActionOut *easeAction = EaseCubicActionOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseCubicActionOut( nodeAction );
nodeName.runAction( easeAction );
EaseCubicActionOut Preview

EaseElasticIn

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseElasticIn *easeAction = EaseElasticIn::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseElasticIn( nodeAction );
nodeName.runAction( easeAction );
EaseElasticIn Preview

EaseElasticInOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseElasticInOut *easeAction = EaseElasticInOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseElasticInOut( nodeAction );
nodeName.runAction( easeAction );
EaseElasticInOut Preview

EaseElasticOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseElasticOut *easeAction = EaseElasticOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseElasticOut( nodeAction );
nodeName.runAction( easeAction );
EaseElasticOut Preview

EaseExponentialIn

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseExponentialIn *easeAction = EaseExponentialIn::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseExponentialIn( nodeAction );
nodeName.runAction( easeAction );
EaseExponentialIn Preview

EaseExponentialInOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseExponentialInOut *easeAction = EaseExponentialInOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseExponentialInOut( nodeAction );
nodeName.runAction( easeAction );
EaseExponentialInOut Preview

EaseExponentialOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseExponentialOut *easeAction = EaseExponentialOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseExponentialOut( nodeAction );
nodeName.runAction( easeAction );
EaseExponentialOut Preview

EaseIn

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseIn *easeAction = EaseIn::create( nodeAction, 5.0 );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseIn( nodeAction, 5.0 );
nodeName.runAction( easeAction );

Note: The EaseIn method requires a secondary parameter which is how much it floats

EaseIn Preview

EaseInOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseInOut *easeAction = EaseInOut::create( nodeAction, 5.0 );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseInOut( nodeAction, 5.0 );
nodeName.runAction( easeAction );

Note: The EaseInOut method requires a secondary parameter which is how much it floats

EaseInOut Preview

EaseOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseOut *easeAction = EaseOut::create( nodeAction, 5.0 );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseOut( nodeAction, 5.0 );
nodeName.runAction( easeAction );

Note: The EaseOut method requires a secondary parameter which is how much it floats

EaseOut Preview

EaseQuadraticActionIn

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseQuadraticActionIn *easeAction = EaseQuadraticActionIn::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseQuadraticActionIn( nodeAction );
nodeName.runAction( easeAction );
EaseQuadraticActionIn Preview

EaseQuadraticActionInOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseQuadraticActionInOut *easeAction = EaseQuadraticActionInOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseQuadraticActionInOut( nodeAction );
nodeName.runAction( easeAction );
EaseQuadraticActionInOut Preview

EaseQuadraticActionOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseQuadraticActionOut *easeAction = EaseQuadraticActionOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseQuadraticActionOut( nodeAction );
nodeName.runAction( easeAction );
EaseQuadraticActionOut Preview

EaseQuarticActionIn

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseQuarticActionIn *easeAction = EaseQuarticActionIn::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseQuarticActionIn( nodeAction );
nodeName.runAction( easeAction );
EaseQuarticActionIn Preview

EaseQuarticActionInOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseQuarticActionInOut *easeAction = EaseQuarticActionInOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseQuarticActionInOut( nodeAction );
nodeName.runAction( easeAction );
EaseQuarticActionInOut Preview

EaseQuarticActionOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseQuarticActionOut *easeAction = EaseQuarticActionOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseQuarticActionOut( nodeAction );
nodeName.runAction( easeAction );
EaseQuarticActionOut Preview

EaseQuinticActionIn

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseQuinticActionIn *easeAction = EaseQuinticActionIn::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseQuinticActionIn( nodeAction );
nodeName.runAction( easeAction );
EaseQuinticActionIn Preview

EaseQuinticActionInOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseQuinticActionInOut *easeAction = EaseQuinticActionInOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseQuinticActionInOut( nodeAction );
nodeName.runAction( easeAction );
EaseQuinticActionInOut Preview

EaseQuinticActionOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseQuinticActionOut *easeAction = EaseQuinticActionOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseQuinticActionOut( nodeAction );
nodeName.runAction( easeAction );
EaseQuinticActionOut Preview

EaseSineIn

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseSineIn *easeAction = EaseSineIn::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseSineIn( nodeAction );
nodeName.runAction( easeAction );
EaseSineIn Preview

EaseSineInOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseSineInOut *easeAction = EaseSineInOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseSineInOut( nodeAction );
nodeName.runAction( easeAction );
EaseSineInOut Preview

EaseSineOut

// action to run
MoveBy *nodeAction = MoveBy::create( 2.0, Vec2( 300, 0 ) );

// easing action
EaseSineOut *easeAction = EaseSineOut::create( nodeAction );
nodeName->runAction( easeAction );
// action to run
var nodeAction = new cc.MoveBy( 2.0, cc.p( 300, 0 ) );

// easing action
var easeAction = new cc.EaseSineOut( nodeAction );
nodeName.runAction( easeAction );
EaseSineOut Preview

Updated about 2 months ago