How to apply different easing effects to sprite action?

Question

I use a lot of CCEase* functionalities in Cocos2D described here. iOS 7 Sprite Kit also have SKActionTimingMode. However only simple modes. How can I get CCEaseElasticIn or CCEaseBounceIn like effects using Sprite Kit?

Answer 1

Sprite Kit left easing (or tweening) intentionally limited with the expectation that the developer would take control of the specifics of the motion of the sprites. Basically, what you need to do is make a custom action and apply an easing curve to the parameter before changing the property (rotation, position, scale, etc) of the sprite. Here's an example.

CGFloat initialScale = mySprite.xScale;
SKAction *scaleAction = [SKAction customActionWithDuration:duration actionBlock:^(SKNode *node, CGFloat elapsedTime) {
  CGFloat t = elapsedTime/duration;
  CGFloat p = t*t;
  CGFloat s = initialScale*(1-p) + scale * p;
  [node setScale:s];
}];
[mySprite runAction:scaleAction];

The part of this that determines the easing is p = t*t. So, p is a function of t such that :

• when t is 0, p is 0
• when t is 1, p is 1

That means that you will start at the beginning and end at the end but the shape of the curve in between will determine how you get there. Easing functions can be simple, like the one shown here, which is basically an ease-in, or quite complex such as elastic or bounce. To generate your own, try this : http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm Or take a more detailed look at Robert Penner's equations: http://www.robertpenner.com/easing/