パラパラマンガに挑戦しよう
前回は、タッチした位置に円を表示させるiPhoneアプリを作りました。たった2ページのこの誌面でここまでのアプリが作れるのですから、スウィフトを使えばアイデア次第で強力なアプリが作れることがわかります。
さて、次は「アニメーション」に挑戦してみましょう。アニメーションの基本はパラパラマンガです。皆さんも小学生や中学生のときに、教科書の隅に描いて遊んだ経験があるのではないでしょうか。少しずつ動いている絵を次々とめくっていくことで、自分の描いた絵が動き出すように見えますよね。アニメーションは人の目を引くため、画面のごく一部に付いているだけでアプリの完成度が上がったように感じられるでしょう。
今回は、これまでやってきたお絵描きプログラミングを応用して、少しずつ動いている画像を何枚も用意していきます。そしてその画像をつなぎ合わせることで、iPhoneの上でパラパラマンガのアニメーションを表示してみましょう！
【STEP 1】プレイグラウンドでお絵描き
アプリを作る前に、まずはXcodeのプレイグラウンドを使って、パラパラマンガの一つ一つのコマを書く基本部分を作っておきましょう。XcodeでiOS用のプレイグラウンドを作成して、図のような関数を打ち込みます。このmakeImage()関数は、受け取った引数の大小に応じて、青い長方形を左右に移動させながら描画した画像を作成してリターンします。
図のように、makeImage()関数を0や20を引数に呼び出すと、数値が大きくなるにつれて青い長方形が左から右に移動する画像が作成できます。この関数を繰り返し使うことで、パラパラマンガに使用する画像が出来上がります。
このように、長方形が少しずつ動いた画像が作られます。
【STEP 2】アプリを作ろう
Xcodeで新しいアプリのためのプロジェクトを作ります。メニューから［File］→［New］→［Project］と選択して、［Single View Application］を作成します。［Product Name］には「MyAnime」などと入力して、［Language］に［Swift］を選択します。
ウインドウ左のプロジェクトナビゲータから［Main.storyboard］を選択し、ウインドウ右下にあるライブラリ領域から、右から2番目にある［Object Library］をクリック。［Image View］を選択して、画面にドラッグします。貼り付けた［Image View］を選択して、メニューから［Editor］→［Resolve AutoLayout Issues］→［Reset to Suggested Constraints］を実行しておきましょう。画像ビューが常に全体に表示されるようになります。
【STEP 3】アニメーションを再生する
［ViewController.swift］を編集して、先ほどのmakeImage()メソッドを、プレイグラウンドからコピーして、viewDidLoad()メソッドのすぐ下にペーストします。そしてviewDidLoad()メソッドの実装を図のように書き換えてください。このプログラムでは、37個の画像を作成して配列に格納し、その配列を［Image View］の［animationImages］にセットしています。前回はimageプロパティを使いましたが、アニメーションさせるときにはanimationImagesプロパティを使います。そして［Image View］のstartAnimating()メソッドを実行することで、アニメーションの実行が開始されます。
シミュレータ上では、アニメーションが繰り返し実行されます。最後のコマまで再生されると、最初に戻って再生を繰り返します。
makeImage()メソッドの中のUIRectFill()関数を呼び出す1行を図のように書き換えると、符号が逆転して、逆方向に動き始めます。
今回はX座標だけを変更してアニメーションさせていますが、CGRectMake()の第2引数を変更すればY座標を変更することもできますし、以前にやったUIBezierPathを使って、もっと複雑な図形をアニメーションさせることもできます。
【まとめ】
プレイグラウンドとプロジェクトを同時に使いながら、スウィフトでアニメーションを実行するアプリが完成しました。お絵描きプログラミングのいろいろな技を組み合わせれば、もっといろいろな絵を動かせるようになります。
次回のテーマ
スウィフトでアニメーション・プログラミング（後編）
【冒険記】
つい先日、iOSの最新版9.1が公開されました。それとともに、Xcodeも7.1にバージョンアップして、プレイグラウンドの操作方法が少し変わっています。再生ボタンが付いて、実行の様子がよりわかりやすくなりました。どんどん進化していますね！
【冒険記】
iOSの発展に伴って、アイコン画像のサイズがどんどん大きくなっています。アップルTV用のアプリには、なんと1280×768ピクセルの画像を用意しなければいけません。まるで壁紙のようなサイズですよね。開発者の仕事はどんどん変わっていきます。
Dr.さざめき（aka.沼田哲史）
1978年1月生まれ。某大学でプログラミングを教えつつ、ふらっとヨーロッパ旅行に出かけて美味しいものを食べ歩いたり、時折、iOSプログラミングの本を出したり。Mac歴16年。いつかアメリカ西海岸でお昼から美味しいIPAビールを飲みながらプログラミングするのが夢です。Twitter @sazameki
