in cocos2d-iphone

Cocos2D-iPhone Easing Examples

CCActionEaseBounceIn example

When writing a chapter for Cocos2D iPhone 3.0 Beginner’s Guide book I wanted to provide a link to a page with cocos2d-iphone easing examples.

Something similiar to http://easings.net, but for cocos2d.

After googling a bit I didn’t find anything that can be provided to a beginner developers and decided to create a project demonstrating easing actions in cocos2d-iphone-v3.0.

You can find the project source code on Github: https://github.com/kmuzykov/cocos2d_v3_easings_examples

However, sometimes it is more convenient to just take a quick look on easing example without having to download and build any project. This is why I’ve created a set of GIF images demonstrating most of cocos2d easing actions.

All easing actions are applied to a simple CCActionMoveTo action, that moves red dot on the screen.

CCActionMoveTo *move = [CCActionMoveTo actionWithDuration:kMoveTime position:_dotEndPos];

While the target moves, the code draws a graph showing the easing action function.

Here are results of applying different easing actions:

CCActionEaseIn example

CCActionEaseIn

CCActionEaseInOut example

CCActionEaseInOut

CCActionEaseOut example

CCActionEaseOut

CCActionEaseSineIn  example

CCActionEaseSineIn

CCActionEaseSineInOut example

CCActionEaseSineInOut

CCActionEaseSineOut example

CCActionEaseSineOut

CCActionEaseBounceIn example

CCActionEaseBounceIn

CCActionEaseBounceInOut example

CCActionEaseBounceInOut

CCActionEaseBounceOut example

CCActionEaseBounceOut

CCActionEaseBackIn example

CCActionEaseBackIn

CCActionEaseBackInOut example

CCActionEaseBackInOut

CCActionEaseBackOut example

CCActionEaseBackOut

CCActionEaseElasticIn example

CCActionEaseElasticIn

CCActionEaseElasticInOut example

CCActionEaseElasticInOut

CCActionEaseElasticOut example

CCActionEaseElasticOut

Sorry for mouse pointer on some gifs. Also please note that all actions that take rate parameter are created with rate of 2.0f.

I hope this helps to understand which easing action to use, without having to run any demo projects.

This site uses Akismet to reduce spam. Learn how your comment data is processed.