在 cocos2d 中实现动画按钮答案

【问题标题】：Implement animated Button in cocos2d在 cocos2d 中实现动画按钮
【发布时间】：2013-05-07 12:42:22
【问题描述】：

我希望复制 Candy Crush Saga 中的按钮动画效果。我也想知道如何制作这样流畅而美丽的动画。 Cocos2d-iPhone 可以吗？

这是 Candy Crush Sage 的链接：

http://www.youtube.com/watch?v=KAMUWIqYN24

是使用图像序列完成的吗？

【问题讨论】：

标签： cocos2d-iphone box2d-iphone

【解决方案1】：

这是可能的。只需在按钮正常精灵上运行动画即可。

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 ];

//这里是类文件：GTAnimSprite.h

#import <Foundation/Foundation.h>
#import "cocos2d.h"

@interface GTAnimSprite : CCSprite
{
    bool bouncing;
    float counter;

}
@end

//这里是类文件：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

这里是 XCODE 示例源：https://www.box.com/s/52i4xyznetyyc329evcu

【讨论】：

我已经用 CCActions 实现了类似的行为。最好的性能是什么，自定义 CCSprite（像这样）或实现 CCActions？
@KarlosZafra，很适合使用 CCActions 实施。显示您与 CCActions 一起使用的代码。
@Guru：这工作正常......毫无疑问......但是当我简单地创建一个精灵时，它工作得很好，但是当我在 ccMenuItemSprite 中使用这个精灵时，它将被缩放垂直方向和正 x 轴方向。也就是说，它的精灵左侧是固定的。我该如何解决这个问题？如果您需要进一步的描述而不是让我知道。？
不是在 CCMenuItemSprite 上运行它，而是在其正常和选定的图像上运行它。
是否可以在网站上使用jquery、css3、...实现这种按钮？

【解决方案2】：

这就是我使用 CCActions 的方式

首先，我定义 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];

然后，当 CCMenuItem 初始化时，我在所需的精灵上运行动画

CCMenuItem aMenuItem = [CCMenuItemSprite itemFromNormalSprite:buttonNormalSprite
                         selectedSprite:buttonSelectedSprite
                         block:^(id sender) {
                            //play animation highlighting button
                            [buttonSelectedSprite runAction:buttonAction]];
                                                        }}];

在我的情况下，我只在按下按钮时运行动画。

【讨论】：