2013年2月5日火曜日

【WinRT】オブジェクトのアニメーションの設定


WinRTではいたるところにアニメーションを付けるようになっている.
ポップアップや設定パネルの表示時にアニメーションを仕様すべきである.
しかし,コントロールオブジェクトを作っただけでは動いてくれない.
どういったアニメーションがWinRTで定義されているかは
MSDNのページ(http://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/hh452701.aspx)
が詳しい.


少し例を挙げる.
WinRT用の朝日新聞アプリと日経新聞アプリとがある.

まず朝日新聞アプリを見てみる.
設定ペインから「記事の更新間隔」という項目がある.
この「記事の更新間隔」を選択するとノーモーションでコントロールが出てくる.
もしくは,記事一覧ページ(ホーム)でAppBarを開くと「文字サイズ」というボタンがある.
これを押してもポップアップがノーモーションで出てくる.
ともに消えるときもノーモーションである.
このアプリではアニメーションが実装されていない.

一方で,日経新聞アプリを見てみる.
設定ペインから「フォントサイズ設定」を選択すると
画面右端からコントロールがアニメーションして出てきて,
閉じるときも右端へとアニメーションしていく.

WinRTアプリではアニメーションするのが望ましいため,
動作的には日経新聞アプリのほうが良いと考えられる.


このアニメーションをどうやって設定するのか.
実はXAMLの指定だけでできるように作ることができる.

この<親コントロール.Transitions>タグに囲まれた部分がアニメーションを設定している.
とはいっても,アニメーションの種類を予めSDKのほうで持ってくれてるようで
デベロッパーが気にするのはどのアニメーションを適用するか程度である.
どのアニメーションを,というのは上記のXAMLコードで言うところの
<PopupThemeTransition />
の部分であり,ここを違うタグに変更すると違ったアニメーションになる.

どういったアニメーションが用意されているかというと
前述したMSDNのページで探してもらえばいいが,そんなに多くない.
コントロールの表示/非表示時に関するアニメーションに限ると
AddDeleteThemeTransition
ContentThemeTransition
EdgeUIThemeTransition
EntranceThemeTransition
PaneThemeTransition
PopupThemeTransition
ReorderThemeTransition
RepositionThemeTransition
の8パターンである.

例で挙げた設定パネルのようなパネルの表示/非表示であればPaneThemeTransition
ポップアップの表示/非表示であればPopupThemeTransition
AppBarのようなオブジェクトの表示/非表示ならEdgeUIThemeTransition
などといったように用途に応じてこのTransitionを選択することで
簡単に他のアプリと見た目,動作を統一させることができる.

さて,ここで1つだけ注意しないといけないのは
例に挙げたXAMLコードでは<UserControl>にTransitionを設定したが,
実は<Border>にもTransitionを設定することができる.
StackPanelやGrid,挙げ句の果てはTextBlockなどにも
Transitionは指定できる.
しかし,こういった下位コントロールにTransitionを指定した場合
表示時にはアニメーションを行うが,
上位コントロールを閉じた場合に同時に瞬時に消えることになるので
非表示時にはアニメーションが行われないことになる.

つまり,コントロールの最上位階層にTransitionを指定する必要がある.

C#で組めて,WPFと同じような感覚で作れるため自由度が高く感じるWinRTアプリケーションであるが,
UIの制約は覗いてみると結構うるさかったりする.

0 件のコメント:

コメントを投稿