[iOS 7] Sprite Kit の画面遷移アニメーションまとめ

[iOS 7] Sprite Kit の画面遷移アニメーションまとめ

Clock Icon2013.09.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

今回はSpriteKitのSKTransitionのアニメーションをいろいろ試してみます。

まず前提として、遷移前の画面はこちら。

sktransition_before


遷移後の画面はこちら。

sktransition_after


サンプルソースです。遷移前画面Aタップ時にアニメーションします。

#import "CMMyScene.h"
#import "CMNextScene.h"

@implementation CMMyScene

-(id)initWithSize:(CGSize)size {    
    if (self = [super initWithSize:size]) {
        self.backgroundColor = [SKColor blueColor];
        SKLabelNode *myLabel = [SKLabelNode labelNodeWithFontNamed:@"Arial Bold"];
        myLabel.text = @"A";
        myLabel.verticalAlignmentMode = SKLabelVerticalAlignmentModeCenter;
        myLabel.fontSize = 300;
        myLabel.position = CGPointMake(CGRectGetMidX(self.frame),
                                       CGRectGetMidY(self.frame));
        [self addChild:myLabel];
    }
    return self;
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    CMNextScene *scene = [[CMNextScene alloc] initWithSize:self.size];
    
    SKTransition *transition = [SKTransition crossFadeWithDuration:2];
    //SKTransition *transition = [SKTransition fadeWithDuration:2];
    //SKTransition *transition = [SKTransition doorsOpenHorizontalWithDuration:2];
    //SKTransition *transition = [SKTransition doorsCloseHorizontalWithDuration:2];
    //SKTransition *transition = [SKTransition doorwayWithDuration:2];
    //SKTransition *transition = [SKTransition flipHorizontalWithDuration:2];
    //SKTransition *transition = [SKTransition moveInWithDirection:SKTransitionDirectionUp duration:2];
    //SKTransition *transition = [SKTransition revealWithDirection:SKTransitionDirectionUp duration:2];
    //SKTransition *transition = [SKTransition pushWithDirection:SKTransitionDirectionLeft duration:2];
    
    [self.view presentScene:scene transition:transition];
}

@end


では、この間をつなぐアニメーションを見ていきます。静止画ですが。。。

crossFade

SKTransition *transition = [SKTransition crossFadeWithDuration:2];

クロスフェードです。

sktransition_crossFade

fade

SKTransition *transition = [SKTransition fadeWithDuration:2];

遷移前画面Aがフェードアウトして、真っ暗な画面になり、遷移後画面Bがフェードインしてきます。
「fadeWithColor:duration:」を使用すると、真っ暗な画面ではなく、指定した背景色になります。

sktransition_fade_01

sktransition_fade_02

sktransition_fade_03

doorsOpen

SKTransition *transition = [SKTransition doorsOpenHorizontalWithDuration:2];

遷移前画面Aがドアになり、ドアが開くアニメーションが実行されます。

sktransition_doorsOpen

doorsClose

SKTransition *transition = [SKTransition doorsCloseHorizontalWithDuration:2];

遷移後画面Bがドアになり、ドアが閉じるアニメーションが実行されます。

sktransition_doorsClose

doorway

SKTransition *transition = [SKTransition doorwayWithDuration:2];

遷移前画面Aがドアになり、ドアが奥に開き、奥から遷移後画面Bが手前に移動してきます。

sktransition_doorway_01

sktransition_doorway_02

flip

SKTransition *transition = [SKTransition flipHorizontalWithDuration:2];

フリップします。

sktransition_flip_01

sktransition_flip_02

sktransition_flip_03

sktransition_flip_04

moveIn

SKTransition *transition = [SKTransition moveInWithDirection:SKTransitionDirectionUp duration:2];

遷移後画面Bが遷移前画面Aの上に被さります。第一引数で、遷移後画面Bがどの方向から被さるかを指定できます。

sktransition_moveIn

reveal

SKTransition *transition = [SKTransition revealWithDirection:SKTransitionDirectionUp duration:2];

遷移前画面Aが移動して、遷移後画面Bが表示されます。第一引数で、遷移前画面Aの移動する方向を指定できます。

sktransition_reveal

push

SKTransition *transition = [SKTransition pushWithDirection:SKTransitionDirectionLeft duration:2];

遷移後画面Bをプッシュします。第一引数で、プッシュする方向を指定できます。

sktransition_push

今回はここまで。
[transitionWithCIFilter:duration:]についてはまた今度やってみようと思います。
ではでは。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.