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