Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wpf・silverlightのアニメーションからwindowsストアアプリのアニメーションへ

1,276 views

Published on

  • Be the first to comment

Wpf・silverlightのアニメーションからwindowsストアアプリのアニメーションへ

  1. 1. WPF・SilverlightからWindowsストアアプリへXAMLアニメーション森 博之Microsoft MVP for Silverlight極東IT-Engineers
  2. 2. 自己紹介• 森 博之(もり ひろゆき)• MS開発技術を専門としたフリーランスエンジニア• Microsoft MVP for Silverlight• 極東IT-Engineers代表• ブログ:もり ひろゆきの日々是勉強• http://moriblog.kit-eng.com• Twitter• Windows8対応〔基本+実用〕Windowsストアアプリ開発入門• 岩永信之さんとの共著• 好評発売中!
  3. 3. Agenda• アニメーション概要• XAMLによるインタラクティブな表現• Silverlight/WPFのアニメーション• Windowsストアアプリでの進化
  4. 4. アニメーション概要
  5. 5. アニメーション• アニメーション(英語:animation)とは• 動画とも呼ばれ、コマ撮りなどによって複数の静止画像により動きを作る技術• 連続して変化する絵やモノにより発生する仮現運動を利用した映像手法Wikipediaより⇒フレームベースアニメーション
  6. 6. XAML系アニメーションでは• タイムスライスによるアニメーション• UIに紐づくプロパティ値を時系列に値変化を与えることで実現している。• つまり、UI要素のどのプロパティにどのような値を適用するのかということがXAML系アニメーションでは重要となってくる
  7. 7. 今日は…• アニメーションを実現するために…• WPF/Silverlightでは…• Windowsストアアプリでは…
  8. 8. XAMLによるインタラクティブな表現アニメーションを実現するために・・・
  9. 9. XAML基礎• XAMLではUI表現をXMLの要素で表現• 例えば・・・中略
  10. 10. XAMLでは・・・• 先ほどと同じこのクラスは・・・
  11. 11. 属性構文とプロパティ要素構文
  12. 12. Demonstration
  13. 13. 依存関係プロパティとレイアウトシステム
  14. 14. プロパティだけでは…• 単なるプロパティだけでは難しいインタラクティブ表現想像してみましょう・・・TextBoxのフォントサイズをアニメーションにより変化させる!⇒フォントサイズの変化だけではなく、隣接するUI要素へのレイアウト変更が必要になり、レイアウト変更に連動するUI要素のサイズ変更が必要になる・・・つまり、インタラクティブな表現にはプロパティへの設定値の変化を検知し、それに連動できるレイアウト変化を行うような仕組みが必要になる!
  15. 15. アニメーションの実現に必要となる仕組み• プロパティ値の変換を検知する必要がある• 依存関係プロパティ• UI要素のサイズ変化に合わせたレイアウト調整が必要となる• パネルによる動的レイアウト
  16. 16. 依存関係プロパティ• プロパティに対しての変化に対応する処理を記述できる仕組み• もちろん、対応する処理は変化する値を検知することができるため、その値に連動して処理に反映させることができる• ただし、言語として実現されているものではなく、仕組み自体をクラスライブラリとして提供しているもの
  17. 17. 依存関係プロパティテキスト
  18. 18. 値の通知方式• UIデータ変化の通知を必要とするXAML系の機能• アニメーション• データバインディング• これらの通知にはイベントの仕組みが用いられている• INotifyPropertyChanged• INotifyCollectionChanged
  19. 19. プロパティ変化の通知• INotifyPropertyChanged
  20. 20. レイアウトシステム• XAML系のUIではUI要素の配置にPanelコントロールを利用する。• PanelコントロールにはUI要素のコレクションを保持し、内包するUI要素のレイアウトを管理する• 実際のレイアウトの配置には「スロットモデル」と呼ばれる仕組みが用いられている
  21. 21. 実際のレイアウトには・・・• UI要素の階層内で測定・配置の2段階でサイズ調整を行う• UI要素内でレイアウトに連動するプロパティの変化を検知すると変化した値に応じてレイアウト調整が動作する1.Measure2.Arrange1.Measure2.ArrangeResize!GridStackPanelTextBlockTextBoxButtonTextBlock
  22. 22. Demonstration
  23. 23. WPF/Silverlightのアニメーション
  24. 24. XAML系アニメーション• タイムスライスによるアニメーション• プロパティ値を時系列で変化させることで実現している• 具体的には・・・• プロパティ値を変化させる⇒Animationクラス• Animationの開始するきっかけの指定⇒コード、トリガー、VisualStateManager
  25. 25. Animationクラス• Animationクラスではプロパティに設定する設定値を発生させる⇒最終的には対象となるプロパティに設定する値となる訳だから対象プロパティに併せてAnimationオブジェクトを選択するDouble ⇒ DoubleAnimationColor ⇒ ColorAnimationPoint ⇒ PointAnimation(WPFの場合はこの他にも豊富なAnimationクラスが用意されている)
  26. 26. Animationクラスのプロパティ• System.Windows.Media.Animation名前空間プロパティ 意味、役割From 開始値To 終了値By From値またはプロパティの設定値に指定値を加算し終了値にするBeginTime,Duration 開始時間、アニメーション時間RepeatBehavior リピート回数
  27. 27. Animation対象の設定• Storyboardを利用• Storyboard• 直訳すると絵コンテ• XAML系ではAnimationオブジェクトを複数内包するChildrenプロパティを持つ• Animationの値設定はStoryboardへ添付プロパティで行う
  28. 28. Demonstration
  29. 29. 参考)~AnimationUsingKeyFrame• 時系列でアニメーションの値変化を制御したい場合などに利用できる• DurationやBegin/Endの代わりにKeyFrameオブジェクトを指定する
  30. 30. Windowsストアアプリのアニメーション
  31. 31. Winストアアプリ以前のアニメーション• アニメーションが行われるまでのステップ• アニメーションはプロパティ値の時系列に合わせた変化によって行われる• データバインディング• アニメーションオブジェクト• コードによるUI要素のサイズ変更• その他• 正直、手間がかかる!
  32. 32. アニメーションをもっと簡単に!• Windowsストアアプリで利用できるアニメーション• アニメーション実装済コントロール• 切り替え効果• テーマアニメーション• カスタムアニメーション ←従来のアニメーション• これらの多くはWinストアアプリのデザインガイドに沿ったアニメーション・ライブラリで実装されている。
  33. 33. アニメーション実装済コントロール• 多くのコントロールが既にアニメーションを実装済• 代表的に紹介されるものとしては・・・• FlipView• ProgressRing• ToolTip
  34. 34. Demonstration
  35. 35. 切り替え効果アニメーション• コントロールの表示・非表示の際に行われるアニメーション• 適用先プロパティ• Transitions• ContentTransitions、• temContainerTransition• その他• 利用用途としては• コントロール内のコンテンツの表示・非表示の際• ItemsControlのアイテムの追加・削除・表示切替
  36. 36. Demonstration
  37. 37. テーマアニメーション• 切り替え効果に比べてさらに詳細な指定が可能• 一般的に行われることの多いアニメーションが定義されている• 代表的なアニメーション• FadeInThemeAnimation• 透明から不透明へ• FadeOutThemeAnimation• 不透明から透明へ
  38. 38. Demonstration
  39. 39. カスタムアニメーション• テーマアニメーションだけでは表現しきれない細かな制御はやはりAnimationやAnimationUsingKeyFrameを利用する• ただし、従来のように自由に利用できない• アプリのパフォーマンスに影響するようなアニメーションは「依存型アニメーション」と呼ばれる• このようなアニメーションはあらかじめ「EnableDependentAnimation」プロパティを有効(True)にしておく必要がある。
  40. 40. Demonstration
  41. 41. WinストアアプリのUXデザインガイド• アニメーションだけではなく、Winストアアプリではさまざまな挙動が実装として用意されている• 過去に経験したインターフェースは直感的な操作に影響する• アフォーダンス
  42. 42. まとめ• UXガイドに沿ったさまざまなアニメーション• 表現も増えているが、極力アニメーション・ライブラリのものを利用する• それでも無理な場合はカスタムアニメーション!
  43. 43. Thank you!

×