前回のブログでは、遷移前のステートとの変更点を、設定した秒数をかけて変化させるというシンプルなアニメーションの追加方法をご紹介しました。今回はアニメーションの時間軸を区切り、セグメント毎にエレメントの追加や削除やプロパティ変更を行うという、少し複雑なアニメーションの実装方法をご紹介しながら、以前ご紹介した乗換ナビアプリのプロトタイプのMap画面の起動アニメーションを作成します。
※画像の読み込みに時間がかかる場合があります。
初期ステートの作成
まず、以下の図のように新規スクリーンに画面の枠部分を作成し、その後表示する地図画像を貼り付けます。（画像をドロップすると画像エレメントに変換されます。）使用する地図の画像は、ズームアウトのアニメーションを加えるために大きめの画像を用意します。配置した時点では地図がスクリーンからはみ出して不恰好ですが、実行時にはスクリーンサイズの範囲外の部分は無視されます。最後にスクリーンサイズに合わせて半透明のRectangleを敷き、その上にProgressBarを配置します。
セグメントの追加
ここからアニメーションを付加して行きます。画面左下のアニメーションウィンドウを開き、”Add an Opening Animation”をクリックします。
アニメーションには時間軸を区切り、セグメント毎にエレメントの追加や削除やプロパティ変更を行うことができます。初期状態では以下の図のように第１セグメントでエレメントの追加が行われています。
ここで、第２セグメントが選択した状態でProgressエレメントのValue値を100に設定します。すると、アニメーションウィンドウの第２セグメントにProgressの値変更が追加されます。
今回、プログレスバーは画面起動と同時にスタートさせ１.5秒間表示するという想定で、以下の様に第１セグメントを0秒間、第２セグメントを1.5秒間に設定しなおします。
これで、画面起動時にプログレスバーの進捗が1.5秒間かけて0から100に変化します。
最後に、セグメント追加しProgressエレメントと半透明のRectangleエレメントを追加した第３セグメントで削除します。更に、地図の画像をスクリーンに収まるように位置とサイズを変更し、以下の図のようにRESIZEとMOVEのバーを設定します。
コレでMap画面のアニメーションが完成しました。
実行すると1.5秒間プログレスバーが動作し、新着が100になった時点で地図がズームアウトして画面の読み込みが完了した状態となります。
今回は既にピンが付いている地図画像を使用しましたが、ピンの画像を別で用意し、上からピン落ちてくるアニメーションをつけるということももちろん可能です。また、こちらのアプリの起動アニメーションでは更にセグメントを多用したアニメーションを確認することができます。以下よりプロジェクトをダウンロードできるので、是非参考にしてみて下さい。
サンプルプロジェクトのダウンロード
今回作成したスクリーンを含む乗換ナビアプリ プロトタイプのサンプルプロジェクトはこちらよりダンロード可能です。また、Share機能によりアップロードされたこのプロトタイプはこちらで実際に動かすことができます。※動作にはSilverlight5が必要です。
Indigo Studioのダウンロードはこちらから
