PR

データ表示にアニメーションを使う

2011年10月14日(金)
PROJECT KySS

ソリューションエクスプローラー内の、MainPage.xamlを選択し、マウスの右クリックで表示されるメニューの、「Expression Blendを開く(X)」を選択し、Blend4を起動します。

Blend4でのStoryboardの作成

「オブジェクトとタイムライン(B)」の下にあるストーリーボードの「新規作成」アイコン(+)をクリックします(図4)。

図4:「新規作成」アイコンをクリックする

FrontBackStoryboard(表から裏に回転するストーリーボード)の作成

「Storyboard リソースの作成」ダイアログボックスが開きますので、「名前(キー)」にFrontBackStoryboardと入力して[OK]ボタンをクリックします(図5)。アートボード上の画面全体が赤の枠線で囲まれ、「●FrontBackStoryboard タイムライン記録オン」に変わります。この状態でタイムラインの記録が可能になります(図6)。

図5:「名前(キー)」にFrontBackStoryboardと入力する

図6: アートボード上の画面全体が赤の枠線で囲まれタイムラインの記録が可能になる(クリックで拡大)

まず、「オブジェクトとタイムライン(B)」内のNameBorderとDetailsBorderを展開して要素を全て表示させておきます(図7)。

図7: 「オブジェクトとタイムライン(B)」内のNameBorderとDetailsBorderを展開して要素を全て表示させておく(クリックで拡大)

「オブジェクトとタイムライン(B)」内のNameBorder(ListBoxの表示されている表(おもて)を選択し、黄色の再生ヘッドが0の位置で、プロパティのVisibilityの値を、既にVisibleになっていますが、一度Collapsedを選択して、再度Visibleを選択します。すると「オブジェクトとタイムライン(B)」のNameBorder内にVisibilityが追加され、再生ヘッドが0の位置に楕円のマークが追加されます。

同様に、プロパティの[変換]パネルにあるProjectionの「Rotation」のYの値に、既に0と入力されていますが、再度、上書きで0と入力します。すると、「オブジェクトとタイムライン(B)」のNameBorder内にProjectionが追加され、再生ヘッドが0の位置に楕円のマークが追加されます。Projectionを展開するとRotationYが追加されているのがわかります。

次に、黄色の再生ヘッドが0の位置でDetailsBorder(詳細データの表示される裏)を選択します。プロパティのVisibilityの値を、既にCollapsedになっていますが、一度Visibleを選択して、再度Collapsedを選択します。すると「オブジェクトとタイムライン(B)」のDetailsBorder内にVisibilityが追加され、再生ヘッドが0の位置に楕円のマークが追加されます。

同様に、プロパティの[変換]パネルにあるProjectionの「Rotation」Yの値に、180と入力します。すると、「オブジェクトとタイムライン(B)」のDetailsBorder内にProjectionが追加され、再生ヘッドが0の位置に楕円のマークが追加されます。Projectionを展開するとRotationYが追加されているのがわかります(図8)。

DetailsBorderは初期状態ではVisibilityがCollapsedに設定されて非表示となっていますので、ProjectionのYに180を設定した時の画像の状態がわかりません。確認するため、一時的にVisibilityをVisibleに変更して画像の状態を見てみましょう。図9のように裏面となる画像が反転しているのがわかります。最初に反転させておいてから再生ヘッドが0.5の位置でProjectionの「Rotation」のYの値を90に設定し、再生ヘッドが1の位置で0に戻すようにします。これで、正常な裏面が表示されるようになります。これらの手順は表にまとめています(表1参照)。

一時的にVisibleにした値をCollapsedに戻しておきましょう。

図8: 「オブジェクトとタイムライン(B)」内のNameBorderとDetailsBorderの再生ヘッドが0の位置でのタイムラインを設定した(クリックで拡大)

図9: BackBorderのVisibilityの値を一時的にVisibleにし、ProjectionのYの値を180に指定した裏面を確認する。ボタンや項目名が反転している(クリックで拡大)

次に再生ヘッドを0.5の位置に移動し、NameBorderを選択します。この0.5秒の位置で、表の画面と、裏の画面が入れ替わります。VisibilityにCollapsedを指定し、[変換]パネルにあるProjectionの「Rotation」のYの値に-90と指定します。

DetailsBorderを選択し、再生ヘッドが0.5の位置で、VisibilityにVisible、[変換]パネルにあるProjectionの「Rotation」のYの値に、90を指定します。

次に再生ヘッドを1の位置に移動し、NameBorderを選択します。VisibilityにCollapsedを指定し、[変換]パネルにあるProjectionの「Rotation」のYの値に-180と指定します。

DetailsBorderを選択し、再生ヘッドを1の位置で、VisibilityにVisible、[変換]パネルにあるProjectionの「Rotation」のYの値に、0を指定します。以上の操作手順をまとめると表1のようになります。

表1 FrontBackStoryboard(表から裏に回転する場合の値)

オブジェクト名 プロパティ名 再生ヘッドの位置(秒)
NameBorder   0 0.5 1
Visibility Visible Collapsed Collapsed
Projection(RotationのY) 0 -90 -180
DetailsBorder Visibility Collapsed Visible Visible
Projection(RotationのY) 180 90 0

「●FrontBackStortboard タイムライン記録オン」の●をクリックして記録オフにします。タイムラインのツールバーから「先頭フレームに移動」アイコンをクリックして、「再生」を実行してみてください。表の画面が反転して裏の画面とボタンが表示されます。

全て設定すると図10のようになります。

図10: FrontBackStoryboardの設定を全て完了した(クリックで拡大)
Think IT会員限定特典
  • 「データ表示にアニメーションを使う」サンプルプログラム

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています