CODEWITHSUNDEEP
iphoneioscocos2d-iphone
Ben
Ben

Reputation: 16641

Transition effects for layers

In cocos2d for iPhone, in one scene, how can I fade-out one layer and fade-in another one?

The idea is that I have one screen with:

Now once the user clicks any of the pagination controls, I want to fade out the content layer for the current page (but keep the pagination layer), and fade in the content layer for the next page. These are both the same layers, they pull data in from a plist based on the currentPage variable, so effectively I need to refresh the layer.

I know that for scenes, when calling replaceScene, you can specify a transition effect. And doing it that way it all works. But obviously, it will also fade-out the pagination controls, which just looks stupid. So how does it work for layers?

Upvotes: 0

Views: 884

Answers (3)

Lorenzo Linarducci
Lorenzo Linarducci

Reputation: 541

I wrote a little function which will use blocks to give the same fade-in, fade-out effect as a scene transition, but for an individual layer. Just pass in the layer you want to cover up, the speed of the fade out and fade in, the color to fade to, and the block you wish to execute while the layer is hidden.

-(void)fadeLayer:(CCLayer*)layer withOutDuration:(float)outTime inDuration:(float)inTime color:(ccColor3B)color withBlock: (void(^)())block
{
    CGSize winSize = [[CCDirector sharedDirector] winSize];
    CCLayerColor *toplayer = [CCLayerColor layerWithColor:ccc4(color.r, color.g, color.b, 0) width:winSize.width height:winSize.height];

    [layer addChild:toplayer z:INT_MAX];

    [toplayer runAction:
      [CCSequence actions:
      [CCFadeIn actionWithDuration:outTime],
      [CCCallBlock actionWithBlock:block],
      [CCFadeOut actionWithDuration:inTime],
      [CCCallBlockN actionWithBlock:^(CCNode *node) {
         [node removeFromParentAndCleanup:YES];
      }],
  nil]];
}

Upvotes: 0

YvesLeBorg
YvesLeBorg

Reputation: 9079

hmmm .... use a CCLayerColor (it implements the CCRGBAProtocol protocol) and the fade will propagate to any object within. Then do something like this:

-(void) buttonTouchedCallBack{
    id out = [CCFadeTo actionWithDuration:.35 opacity:0];
    id callFunc = [CCCallFunc actionWithTarget:self selector:@selector(changeContent)];
    id in = [CCFadeTo actionWithDuration:.35 opacity:255];
    id enableMenus = [CCCallFunc actionWithTarget:self selector:@selector(layerInView)];

    _menu.isTouchEnabled=NO;
    [_contentLayer stopAllActions];
    [_contentLayer runAction:[CCSequence actions:out,callFunc,in,enableMenus,nil]];
}

-(void) changeContent{
    // do your stuff here
}

-(void) layerInView{
    _menu.isTouchEnabled=YES;
    // and anything else that is appropriate
}

Upvotes: 1

Hailei
Hailei

Reputation: 42163

I think you can use runAction: to let your CCLayers do CCActions (such as CCFadeIn and CCFadeOut) so that you can achieve what you want.

You gonna need two "content layer"s to hold the current page (page A) and the next page (page B) respectively. After the fading actions are over for both content layers, you can then clean up the page A.

Upvotes: 0

Related Questions