Implement animated Button in cocos2d - cocos2d-iphone

Question

I wish to clone the effects of the button animations found in Candy Crush Saga.
And also I wish to know how to do such fluid & beautiful animations.
Is it possible with Cocos2d-iPhone?
This is the link of Candy Crush Sage:
http://www.youtube.com/watch?v=KAMUWIqYN24
Is it done using image sequences?

Answer 1

It is possible. Just run animation on buttons normal sprite.
GTAnimSprite *frame_normal = [GTAnimSprite spriteWithFile:#"play_button_normal.png"];
GTAnimSprite *frame_sel = [GTAnimSprite spriteWithFile:#"play_button_selected.png"];
frame_sel.color = ccc3(128,128,128);
CCMenuItemSprite *plyBtn = [CCMenuItemSprite itemWithNormalSprite:frame_normal
selectedSprite:frame_sel
target:self
selector:#selector(playBtnPress:) ];
plyBtn.position = ccp(size.width*0.77f, size.height*0.1f);
CCMenu *menu2 = [CCMenu menuWithItems:plyBtn, nil];
menu2.position = ccp(0.0f,0.0f);
[self addChild:menu2 z:2 ];
//Here is class file:GTAnimSprite.h
#import <Foundation/Foundation.h>
#import "cocos2d.h"
#interface GTAnimSprite : CCSprite
{
bool bouncing;
float counter;
}
#end
//Here is class file:GTAnimSprite.mm
#import "GTAnimSprite.h"
#implementation GTAnimSprite
-(void)onEnter
{
[super onEnter];
counter = 0.0f;
bouncing = true;
[self scheduleUpdate];
}
-(void)update:(ccTime)dt
{
if (bouncing)
{
counter += dt;
self.scaleX = ( (sin(counter*10) + 1)/2.0 * 0.1 + 1);
self.scaleY = ( (cos(counter*10) + 1)/2.0 * 0.1 + 1);
if (counter > M_PI*10){
counter = 0;
}
}
}
-(void)onExit
{
[self unscheduleUpdate];
[super onExit];
}
#end
HERE IS XCODE SAMPLE SOURCE: https://www.box.com/s/52i4xyznetyyc329evcu

Answer 2

This is how I do it using CCActions
First, I define the CCAction:
id scaleHorDown = [CCScaleTo actionWithDuration:duration * 5/30.f scaleX:0.75f scaleY:1.0f];
id scaleHorBouncing = [CCEaseBounceIn actionWithAction:scaleHorDown];
id scaleVerDown = [CCScaleTo actionWithDuration:duration * 5/30.f scaleX:1.0f scaleY:0.65f];
id scaleVerBouncing = [CCEaseBounceInOut actionWithAction:scaleVerDown];
id shrink = [CCSequence actions:scaleHorBouncing,scaleVerBouncing, nil];
id swell = [CCScaleTo actionWithDuration: duration * 15/30.f scale:1.10f];
id swellEase = [CCEaseElasticOut actionWithAction:swell];
id resetScale = [CCScaleTo actionWithDuration:duration * 5/30.f scale:1.0f];
id resetScaleBouncing = [CCEaseInOut actionWithAction:resetScale];
id buttonAction = [CCSequence actions: shrink, swellEase, resetScaleBouncing, nil];
Then I run the animation over the desired sprites when CCMenuItem is initialized
CCMenuItem aMenuItem = [CCMenuItemSprite itemFromNormalSprite:buttonNormalSprite
selectedSprite:buttonSelectedSprite
block:^(id sender) {
//play animation highlighting button
[buttonSelectedSprite runAction:buttonAction]];
}}];
In my case I'm only running the animation when the button is pressed.