タイトル画面でぱらぱらアニメを実装する

iPhoneに限らずアップル社の製品ではアニメーションが多用されユーザーインターフェースの一部となりユーザーの操作把握の大きな助けとなっています。一般のアプリにおいてすら然るべくあれば況やゲームに於いてをや、開発中のアプリはブロック崩しにて特別に大きなアニメーションは必要ありませんがタイトル画面ではプレイ画面でボール足るキャラクター ウパンダ のボールとして呼び出される前に呑気に居眠りしている様子を表現したく思いました。

而してウパンダのぱらぱらアニメを実装すべく目論んだのでしたが但しタイトル画面ではプレイ画面で利用しているアップル社純正の2Dゲーム用フレームワークの SpriteKit は読み込ませていませんから最も基本的な Cocoa Touch の UIKit フレームワークでぱらぱらアニメを実装しなければなりません。

日付：2014年3月30日
開発機：MacBook Air（11-inch, Mid 2013）
MacOSバージョン：OS X 10.9.2
Xcodeバージョン：5.1
言語：Objective-C
主関連アプリ：uPanda Breaks Out Fruits

実はぱらぱらアニメは其れこそiPhoneアプリ開発の為に Xcode を触り始めた当初から試験的なプロジェクトを作成して其の中で矯めつ眇めつ動かしてみたりしていました。其の際に参考にしたのが以下の両サイトです。

(UIImageView)パラパラアニメを動かそう（初心者から始めるXcode：So-netブログ：2011年7月15日）
~~パラパラアニメーション~~（逆引きObjective-C for iPhoneアプリ：現在リンク切れ）

上記両サイトを参照しながら実装した結果上手くウパンダが転寝（うたたね）アニメーションをしてくれたのが以下コードになります。

// アニメーション用イメージビューの用意
CGRect sleepingUpandaRect = CGRectMake(0, 0, 320, 568);
UIImageView *sleepingUpandaView = [[UIImageView alloc]initWithFrame:sleepingUpandaRect];
sleepingUpandaView.image = [UIImage imageNamed:@"upanda_ttl-0.png"];
[self.view addSubview:sleepingUpandaView];
// アニメーション用画像を配列にセット
NSArray *sleepingUpandaImageList =
  [NSArray arrayWithObjects: // 画像を登録
    [UIImage imageNamed:@"upanda_ttl-0.png"],
    [UIImage imageNamed:@"upanda_ttl-1.png"],
    [UIImage imageNamed:@"upanda_ttl-2.png"],
    [UIImage imageNamed:@"upanda_ttl-2.png"],
    [UIImage imageNamed:@"upanda_ttl-1.png"],
    [UIImage imageNamed:@"upanda_ttl-0.png"],
  nil];
// アニメーション用画像をセット
sleepingUpandaView.animationImages = sleepingUpandaImageList;
// アニメーションの速度
sleepingUpandaView.animationDuration = 2.5;
// アニメーションのリピート回数
sleepingUpandaView.animationRepeatCount = 0;
// アニメーションのスタート
[sleepingUpandaView startAnimating];

此の時取り敢えずは目論見通りの動きをウパンダは示しましたが本当を言えば画像の配列を上記両サイトの後者側に示されていた情報を参考に以下コードの如く配列を利用して書きたくはありました。

// アニメーション用画像を配列にセット
NSMutableArray *imageList = [NSMutableArray array];
for (NSInteger i = 1; i < 4; i++) {
  NSString *imagePath = [NSString stringWithFormat:@"image%02d.png", i];
  UIImage *img = [UIImage imageNamed:imagePath];
  [imageList addObject:img];
}

処が転寝（うたたね）では上手くことが運びませんでアニメーション用各画像ファイル名をベタ書きにした儘済ませましたが、此の際今後の宿題とした後に一週間も経ない2014年4月5日には再びウパンダをアニメーションさせたく目論んだゲームオーバー画面でボールとなって回り過ぎた為目を回している様子を表す際に採用し首尾よく実装がなりました。現在実際のアプリではウパンダは機嫌良く目を回してくれています。

uPanda Breaks Out Fruits

無料：カテゴリ: ゲーム： 4+ 評価
バージョン: 4.12
リリース： 2014年9月15日
更新： 2022年4月20日
サイズ : 10.7 MB
互換性： iOS 14.4 以降のiPhone、iPod touch に対応。および、macOS 11.0以降とApple M1 チップを搭載したMac に対応。

1件のコメント