Objective-C:Sprite Kit の SKAction サンプルコード一覧

Sprite Kit の SKAction を使えば、簡単にスプライトをアニメーションさせることが可能です。

今回は Apple 公式の SKAction クラスリファレンスを参考に SKAction のメソッドと、サンプルコードをリスト化しました。コピペで即使用可能ですので、ご活用下さい。

SKAction 一覧・インデックス

SKAction サンプルコード一覧

※ 各アクションの xxxBy は現在の値を基準に、xxxTo は元の値を基準にアニメーションを実行する。

サンプルコードで使用するスプライト（共通）

XXX.png ファイルでスプライトを生成する

[code]
SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@”XXX.png”];
[/code]

移動

座標 (x:160 y:320) へ移動

[code]
SKAction *moveTo = [SKAction moveTo:CGPointMake(160, 320) duration:1.0];
[sprite runAction:moveTo];
[/code]

左（反時計回り）に180度回転

[code]
SKAction *rotateTo = [SKAction rotateByAngle:M_PI duration:1.0];
[sprite runAction:rotateTo];
[/code]

アニメーションの実行速度

回転の実行速度を3秒かけて5倍に変化させる

[code]
// 3秒かけてspeedの値を現在値から 5.0 へ変化させる
SKAction *speedTo = [SKAction speedTo:5.0 duration:3.0];
SKAction *rotateTo = [SKAction rotateByAngle:M_PI*4 duration:5.0];
SKAction *group = [SKAction group:@[rotateTo,speedTo]];
[sprite runAction:group];

// 3秒かけてspeedの値を現在値から 現在値＋5.0 へ変化させる
SKAction *speedBy = [SKAction speedBy:5.0 duration:3.0];
SKAction *rotateTo = [SKAction rotateByAngle:M_PI*4 duration:5.0];
SKAction *group = [SKAction group:@[rotateTo,speedBy]];
[sprite runAction:group];
[/code]

拡大縮小

2倍に拡大する

[code]
// 現在の倍率を基準に、2倍に拡大
SKAction *scaleTo = [SKAction scaleTo:2.0 duration:1.0];
[sprite runAction:scaleTo];

// 元の倍率を基準に、 2倍に拡大
SKAction *scaleBy = [SKAction scaleBy:2.0 duration:1.0];
[sprite runAction:scaleBy];
[/code]

フェードイン・フェードアウト

フェードアウトする

[code]
// フェードイン
SKAction *fadeIn = [SKAction fadeInWithDuration:1.0];
[sprite runAction:fadeIn];

// フェードアウト
SKAction *fadeOut = [SKAction fadeOutWithDuration:1.0];
[sprite runAction:fadeOut];
[/code]

透明度

[code]
// 現在の値を基準に、透明度を0に
SKAction *fadeAlphaTo = [SKAction fadeAlphaTo:0.0 duration:1.0];
[sprite runAction:fadeAlphaTo];

// 元の値を基準に、透明度を1.0に
SKAction *fadeAlphaBy = [SKAction fadeAlphaBy:1.0 duration:1.0];
[sprite runAction:fadeAlphaBy];
[/code]

リサイズ

元のサイズの width に 100, height に 50 を加算する

[code]
SKAction *resizeBy = [SKAction resizeByWidth:100.0 height:50.0 duration:1.0];
[sprite runAction:resizeBy];
[/code]

テクスチャアニメーション

texture1.png の表示0.5秒後、texture2.png に切り替える

[code]
SKTexture *texture1 = [SKTexture textureWithImageNamed:@”texture1.png”];
SKTexture *texture2 = [SKTexture textureWithImageNamed:@”texture2.png”];
NSArray *textureArray = [NSArray arrayWithObjects:texture1,texture2, nil];
SKAction *textureAnimation = [SKAction animateWithTextures:textureArray timePerFrame:0.5];
[/code]

カラー

青色に変更

[code]
SKAction *toBlue = [SKAction colorizeWithColor:[SKColor blueColor] colorBlendFactor:1 duration:1.0];
[sprite runAction:toBlue];
[/code]

サウンド再生

サウンドファイル sound.aif を再生

[code]
SKActon *playSound = [SKAction playSoundFileNamed:@”sound.aif” waitForCompletion:NO]];
[sprite runAction:playSound];
[/code]

複数アクションを同時に実行

回転しながら透明度を0にする

[code]
SKAction *rotateTo = [SKAction rotateByAngle:M_PI duration:1.0];
SKAction *fadeAlphaTo = [SKAction fadeAlphaTo:0.0 duration:1.0];
SKAction *group = [SKAction group:@[rotateTo,fadeAlphaTo]];
[sprite runAction:group];
[/code]

複数アクションを順番に実行

2倍に拡大後、フェードアウト

[code]
SKAction *scaleTo = [SKAction scaleTo:2.0 duration:1.0];
SKAction *fadeOut = [SKAction fadeOutWithDuration:1.0];
SKAction *sequence = [SKAction sequence:@[scaleTo, fadeOut]];
[sprite runAction:sequence];
[/code]

アクションを指定回数だけ実行

平行移動を3回繰り返す

[code]
SKAction *moveTo1 = [SKAction moveToX:320 duration:1.0];
SKAction *moveTo2 = [SKAction moveToX:0 duration:1.0];
SKAction *sequence = [SKAction sequence:@[moveTo1, moveTo2]];
[sprite runAction:[SKAction repeatAction:sequence count:3]];
[/code]

アクションを無限に実行

無限に回転させる

[code]
SKAction *rotateTo = [SKAction rotateByAngle:M_PI duration:1.0];
SKAction *rotateForever = [SKAction repeatActionForever:rotateTo];
[sprite runAction:rotateForever];
[/code]

待機

3秒待機した後、2倍に拡大

[code]
SKAction *wait = [SKAction waitForDuration:3.0];
SKAction *scaleTo = [SKAction scaleTo:2.0 duration:1.0];
SKAction *sequence = [SKAction sequence:@[wait, scaleTo]];
[sprite runAction:sequence];
[/code]

アクションを逆再生

180度左回転後、180度右回転する

[code]
SKAction *rotateTo = [SKAction rotateByAngle:M_PI duration:1.0];
SKAction *reverse = [rotateTo reversedAction];
SKAction *sequence = [SKAction sequence:@[rotateTo, reverse]];
[sprite runAction:sequence];
[/code]

イージング

任意のアクション (action) の実行速度を設定する

[code]
// アクションを一定速度で実行（デフォルト）
action.timingMode = SKActionTimingLinear;

// アクションを徐々に速く
action.timingMode = SKActionTimingEaseIn;

// アクションを徐々に遅く
action.timingMode = SKActionTimingEaseOut;

// アクション開始から徐々に速くし、終了にかけて徐々に遅く
action.timingMode = SKActionTimingEaseInEaseOut;
[/code]

まとめ

group と sequence を使えばかなり自由度の高いアニメーションが作成できます。SpriteKit を使えば、ガシガシ動きのあるアプリが簡単に作れますね。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。