(57)【要約】本明細書では、レイアウトプロパティが個別であるか、自動的に計算されるかに関わらず、レイアウトプロパティに対するスムーズな遷移を行うレイアウトアニメーションシステムを説明する。遷移が実行される前に、レイアウトアニメーションシステムは、レイアウト階層において関与している要素の位置、サイズおよび可視性を抽出して記憶する。システムは、影響される要素を、現在の状態が要求しているものと同じ位置、サイズおよび可視性で配置し、その要素を次の状態へとアニメーション化する。システムは、要素毎に、要素を、現在の位置、サイズおよび可視性から次の位置、サイズおよび可視性に遷移させるスムーズアニメーションを計算する。システムは、所望の遷移期間に要素をアニメーション表示する。したがって、レイアウトアニメーションシステムは、自動レイアウト管理の存在下において、様々なタイプのプロパティに対してスムーズなレイアウト遷移を作成する能力を提供する。
2012521041.tif 000002
【特許請求の範囲】
【請求項１】
現在の状態から次の状態へのユーザインタフェース（ＵＩ）要素の遷移をスムーズにアニメーション化するために、コンピュータにおいて実行される方法であって、少なくとも１つのプロセッサが、
レイアウトマネージャによって配置された前記現在の状態におけるＵＩ要素の位置および他の可視プロパティの現在のスナップショットをとるステップ（４１０）と、
前記ＵＩ要素が、その位置およびレイアウトプロパティを更新するが、遷移はレンダリングしないように、前記レイアウトが前記次の状態に変化したことを前記ＵＩ要素に通知するステップ（４３０）と、
前記次の状態における前記ＵＩ要素の前記位置および他の可視プロパティの次のスナップショットをとるステップ（４４０）と、
前記現在のスナップショットと前記次のスナップショットとを比較して、前記ＵＩ要素が移動したか、または外観を変化させたかどうかを判断するステップ（４５０）と、
前記ＵＩ要素の外観または位置が変化したと判断したとき、前記現在の状態と前記次の状態との間の変化をシミュレートする外観プロパティの値を徐々に修正することによって、前記ＵＩ要素の外観の変化をユーザに対してスムーズに表現するために、前記ＵＩ要素の遷移をアニメーション化するステップ（４８０）と
を含むことを特徴とする方法。
【請求項２】
前記方法を、複数のＵＩ要素について並行に実行するステップをさらに含むことを特徴とする請求項１に記載の方法。
【請求項３】
前記スナップショットをとるステップは、前記ＵＩ要素の効果的な不透明度を、該効果的な不透明度が可視性の倍の不透明度であるときに記憶するステップをさらに含むことを特徴とする請求項１に記載の方法。
【請求項４】
任意の事前に進行中の遷移を停止するステップをさらに含むことを特徴とする請求項１に記載の方法。
【請求項５】
前記現在の状態の前記スナップショットをとるステップは、事前に進行中の遷移の現在の位置における前記ＵＩ要素のスナップショットをとることと、前記ＵＩ要素の現在のサイズおよび位置から前記次の状態に基づいた前記ＵＩ要素の新しい終了サイズおよび位置への遷移をアニメーション化することとを含むことを特徴とする請求項１に記載の方法。
【請求項６】
前記現在の状態から前記次の状態へのスムーズなアニメーション遷移を提供するために、比較結果を使用して前記ＵＩ要素に対する一連の中間位置および外観を作成するステップをさらに含むことを特徴とする請求項１に記載の方法。
【請求項７】
前記遷移をアニメーション化するステップは、状態間の前記遷移のための特定の期間に基づいて中間外観の数を決定することを含むことを特徴とする請求項１に記載の方法。
【請求項８】
前記遷移をアニメーション化するステップは、変化したプロパティタイプを決定することと、カラープロパティタイプに関して、開始色と終了色との間で、赤、緑および青の値を徐々にアニメーション化することとを含むことを特徴とする請求項１に記載の方法。
【請求項９】
前記遷移をアニメーション化するステップは、変化したプロパティタイプを決定することと、前記ＵＩ要素の位置を修正するレイアウトプロパティ変化に関して、前記ＵＩ要素の座標を徐々に修正してスムーズな移動を生成することとを含むことを特徴とする請求項１に記載の方法。
【請求項１０】
前記遷移をアニメーション化するステップは、変化したプロパティタイプを決定するステップと、可視性プロパティに関して、不透明度プロパティを徐々に修正してスムーズに変化する可視性の外観を作成することとを含むことを特徴とする請求項１に記載の方法。
【請求項１１】
前記遷移をアニメーション化する前に、アニメーションの間に前記ＵＩ要素の移動を他のＵＩ要素から分離する一時的なコンテナで、前記ＵＩ要素を包むステップと、
前記遷移をアニメーション化した後に、前記ＵＩ要素がレイアウト階層においてその通常の位置に配置され、および前記ＵＩ要素に対する修正が周りの要素に再度影響を与えないように、前記ＵＩ要素から前記一時的なコンテナを除去するステップと
を含むことを特徴とする請求項１に記載の方法。
【請求項１２】
状態間のユーザインタフェース（ＵＩ）の遷移をスムーズにアニメーション化するためのコンピュータシステムであって、
ソフトウェア命令を実行するために構成されたプロセットおよびメモリと、
ある状態から別の状態へ遷移すべきことの指示をＵＩが送信および受信することができる、複数の状態を記憶するように構成された状態管理コンポーネント（１１０）と、
現在の状態と次の状態とを比較して、該現在の状態と次の状態との間で変化するレイアウトプロパティ、および変化すべき対応するＵＩ要素を決定するように構成された状態デルタ決定コンポーネント（１２０）と、
レイアウトの対応するＵＩ要素の各々が配置されたエリアのスナップショットをとるように構成された状態スナップショットコンポーネント（１３０）と、
現在の状態のスナップショットと次の状態のスナップショットとを比較して、どのＵＩ要素が変化したかを決定し、および各状態における外観プロパティのプロパティ値を識別するように構成されたスナップショット比較コンポーネント（１４０）と、
各要素に対して１つまたは複数の中間外観を表示することによって、前記現在の状態と前記次の状態との間で各要素をスムーズにアニメーション化するように構成された要素アニメーションコンポーネント（１５０）と
を備えたことを特徴とするシステム。
【請求項１３】
前記状態管理コンポーネントは、プログラミング経験のない設計者によって編集可能な宣言型形式で状態を記憶するようにさらに構成され、前記宣言型形式は、少なくとも遷移を引き起こす条件および前記遷移の期間を含む遷移情報を含むことを特徴とする請求項１２に記載のシステム。
【請求項１４】
前記状態デルタ決定コンポーネントによって比較される前記レイアウトプロパティの少なくとも１つのプロパティは、格子レイアウトの列、格子レイアウトの行、格子レイアウトの行スパン、格子レイアウトの列スパン、キャンバスのト上部プロパティ、キャンバスの左部プロパティ、可視性プロパティ、スタックの向き、ドックレイアウトにおけるドッキング方向、拡張レイアウトの拡張されたプロパティ、ラップパネルレイアウトの向き、ラップパネルレイアウトのアイテム幅、ラップパネルレイアウトのアイテム高、幅プロパティ、高さプロパティ、最小幅プロパティ、最小高さプロパティ、最大幅プロパティ、最大高さプロパティ、マージンプロパティ、パディングプロパティ、水平整列プロパティ、および垂直整列プロパティからなるグループから選択されることを特徴とする請求項１２に記載のシステム。
【請求項１５】
前記スナップショット比較コンポーネントは、前記現在の状態と前記次の状態との間で変化した各プロパティの値を決定し、前記変化したプロパティの前記遷移をシミュレートするために前記要素アニメーションコンポーネントが修正すべき適切なプロパティを決定するようにさらに構成されることを特徴とする請求項１２に記載のシステム。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、連続および不連続プロパティのスムーズなレイアウトアニメーションを提供することに関する。
【背景技術】
【０００２】
最新のユーザインタフェースツールキットは、レイアウトマネージャを使用して、動的にサイズ変更することができるユーザインタフェースを作成する。レイアウトマネージャは、（ウィジェットとも呼ばれる）コンポーネントを、距離単位（distance unit）を使用することなく、これらのコンポーネントの相対位置によって、レイアウトする能力を有するソフトウェアコンポーネントである。コンポーネントレイアウトをこのような手法で定義することは、しばしば、画素または共通の距離単位でコンポーネントの位置を定義することよりも、より自然であり、このため、多くの一般的なウィジェットツールキットは、このような能力をデフォルトで備えている。ウィジェットツールキットは、しばしば、コンテナがレンダリングされるときに、設計者が、特定のレイアウト特性を有するレイアウトコンテナ内にウィジットを配置することを可能にする。ＷＰＦ（Windows Presentation Foundation）およびＭｉｃｒｏｓｏｆｔ  Ｓｉｌｖｅｒｌｉｇｈｔは、レイアウトマネージャを提供するツールキットの２つの例である。設計者は、ユーザインタフェース（ＵＩ）コンポーネントを拡張可能アプリケーションマークアップ言語（ＸＡＭＬ：Extensible Application Markup Language）で記述し、ＵＩ状態および遷移を、マイクロソフト社のＶｉｓｕａｌ  Ｓｔａｔｅ  Ｍａｎａｇｅｒ（ビジュアルステートマネージャ）などのアプリケーションプログラミングインタフェース（ＡＰＩ）を使用して定義することができる。
【０００３】
レイアウトマネージャが使用される１つの理由は、アプリケーションの自動サイズ変更を可能にするため、複数のＵＩが、異なるディスプレイ解像度を有し、かつサイズ変更可能で再構成可能なウィンドウを有する装置において適切に動作することができるからである。レイアウトマネージャを使用して、スクリーンにおけるグラフィカル要素およびコントロールのレイアウトを自動的に決定することができる。レイアウトマネージャは、典型的に、そのレイアウトマネージャの子（グラフィカル要素、ＵＩ要素）を、ある特定のレイアウトルールに準拠させることにより動作する。例えば、スタックパネルでは、その子を水平または垂直スタックにして、オブジェクトの互いに対する相対位置のみを制御する。別の例として、一様格子（uniform grid）では、オブジェクトを、子毎に固定サイズを有する格子に配置させることができる。テーブルスタイルのレイアウトは、子を行および列の定義に準拠させて、位置決めおよびサイズを制御する位置マージンを定義させることができる。
【０００４】
動的なユーザインタフェースにとって、ＵＩコンポーネントの異なるレイアウト間の遷移は、しばしば有益なことである。例えば、設計者は、ユーザが「さらに（More）」ボタンをクリックするときに、１つのコンポーネントのエリアが拡張され、さらなるＵＩコントロールが表示されるように望むことがある。使用性の理由から、設計者は、遷移がスムーズなものとなり、詳細なコントロールが可能になることを好む。一部のシナリオでは、２つの全体的に異なるＵＩスクリーンの間で単にフェイドさせることで十分であるが、この技術は、グラフィカル要素のレイアウトまたはユーザインタフェースコントロールのレイアウトが、あるレイアウトから別のレイアウトにスムーズに変形（morph）するように設計されているときには機能しない。例えば、設計者は、ユーザがアプリケーションにログインした後に、パネルが左側から飛び出すように現れることを望むことがある。マイクロソフトのＶｉｓｕａｌ  Ｓｔａｔｅ  Ｍａｎａｇｅｒなどの現在のアニメーションステムは、ある状態から別の状態へ、自動的にアニメーション遷移を行う。前述の例において、アニメーションシステムでは、パネルは、ディスプレイの左側から最終的な完全に表示される位置に到達するまでに、いくつかの中間位置を通じてアニメーション化される。
【発明の概要】
【発明が解決しようとする課題】
【０００５】
それらの自動遷移は、アニメーションシステムが２つの値の間で容易に変化することができる連続的なプロパティでは機能する。例えば、アニメーションシステムは、０％の第１の状態において開始し、１００％の第２の状態において終了するという不透明性を、中間値（例えば、２０％、４０％、および８０％）を用いて容易に変えることができる。残念ながら、レイアウトマネージャの存在の下でレイアウトを定義するプロパティの多くは、個別的なものであり（例えば、格子の列の数を変更するなど）、あるいは自動的に計算される値を有することさえある（例えば、行幅を「自動」に設定するなど）。そのような個別のプロパティの存在の下で、現在の技術を用いてレイアウト間のスムーズなレイアウト遷移（すなわち、変形）を達成することは困難である。そのようなプロパティのアニメーション化は不可能であるか、またはスムーズな遷移ではなく突然にレイアウトが切り替わることとなる。現在のアニメーションシステムでは、そのような種類のプロパティに対してスムーズにアニメーション遷移を行うことができない。
【課題を解決するための手段】
【０００６】
本明細書では、レイアウトプロパティが個別であるか、自動的に計算されるかに関わらず、レイアウトのプロパティに対してスムーズな遷移を実行するレイアウトアニメーションシステムを説明する。レイアウトアニメーションシステムは、不連続的なプロパティに対する変更を含む２つの所与のレイアウト状態の間の変形の問題を、関与しているレイアウト状態の各々における要素の幾何学的情報を抽出することにより解決する。遷移が実行される前に、レイアウトアニメーションシステムは、レイアウト階層にわたって関与している要素の位置、サイズおよび可視性を抽出して格納する。そのシステムは、まず、影響される要素（affected element）を、現在の状態が要求しているのと同じ位置、サイズ、および可視性で配置する。システムは、要素毎に、その要素を、現在の位置、サイズ、および可視性から次の位置、サイズ、および可視性に遷移させるスムーズアニメーションを計算する。可視性のために、追加の不透明なアニメーションを使用してスムーズなフェードインアニメーションを導入することも考慮される。システムは、所望の遷移時間にわたって要素をアニメーション表示する。したがって、このレイアウトアニメーションシステムは、自動レイアウトマネージメントの存在の下で、様々なタイプのプロパティに対してスムーズなレイアウト遷移を作成する能力を提供する。
【０００７】
本概要は、以下の詳細な説明においてさらに説明される概念の選択を簡略化した形で紹介するために提供されている。本概要は、特許請求される主題の主要な特徴または本質的な特徴を特定するようには意図されておらず、特許請求される主題を限定するのに用いられるもことも意図されていない。
【図面の簡単な説明】
【０００８】
【図１】一実施形態におけるレイアウトアニメーションシステムのコンポーネントを示すブロック図である。
【図２】一実施形態において、システムによって実行されるＵＩ要素のアニメーションを示すディスプレイの図である。
【図３】一実施形態において、特定の状態遷移の間に移動し得る潜在的なターゲットＵＩ要素を識別するシステムの処理を示すフローチャートである。
【図４】一実施形態において、現在の状態から次の状態にＵＩ要素の遷移をスムーズにアニメーション化するシステムの処理を示すフローチャートである。
【発明を実施するための形態】
【０００９】
本明細書では、レイアウトプロパティが個別であるか、自動的に計算されるかどうかに係わらず、レイアウトのプロパティのスムーズな遷移を実行するレイアウトアニメーションシステムを説明する。個別（discrete）プロパティの一例は、可視性である。ＵＩ要素は、ある状態で可視であるが、別の状態では可視ではないことがある。レイアウトアニメーションシステムは、２つの所与のレイアウト状態の間における変形の問題を、関与しているレイアウト状態の各々における要素の幾何学的な情報を抽出することにより解決する。レイアウト遷移の実行の間、関与しているＵＩ要素は、それらのレイアウトマネージャの制御から外され（例えば、レイアウトマネージャがＵＩ要素をアニメーション化していることを補償するレイアウトの追加レイヤを付加することによって）、レイアウト管理を必要とせずに、レイアウトアニメーションシステムによって直接ディスプレイ面上にアニメーション化される。要素が、該要素の目的位置およびサイズに到達すると、システムは、要素をレイアウトシステム内のそれらの場所に戻し、レイアウトシステムは再度制御を行う。したがって、レイアウトアニメーションシステムは、自動レイアウト管理の存在において、様々なタイプのプロパティのためにスムーズなレイアウト遷移を作成する能力を提供する。
【００１０】
レイアウトアニメーションシステムは次のように遷移を管理する。遷移（または、変形）が実行される前に、レイアウトアニメーションシステムは、親に関連する座標（parent-relative coordinates）内のレイアウト階層にわたる、関与する全ての要素（グラフィカル要素およびコントロールなどのプリミティブと、レイアウトコンテナの双方）の位置、サイズおよび可視性を抽出して保存する。遷移が実行されたとき、システムは、レイアウトマネージメント（例えば、ＷＰＦではＣａｎｖａｓ）を用いることなく、レイアウトプロパティ（例えば、サイズ、位置、可視性など）を変更する各要素を、描画コンテナに含めることができ、その結果、システムは、その要素をスムーズにアニメーション化することができる（例えば、Ｃａｎｖａｓに対して左側と上部の座標を徐々に変化することによって行われるが、これは、これらのプロパティは浮動小数点数であるためである）。代替または追加として、システムは、レイアウトアニメーションが進行中の間、レイアウトマネージャが新しいサイズ／位置情報を要素のコンテナに送信しないこと（または、レイアウト例外リストにそのような要素を保存しないこと）を要求しても良い。システムは、まず、影響される要素（affected element）を、現在の状態が要求しているのと同じ位置、サイズ、および可視性で配置する。一部の実施形態では、このステップは、スムーズアニメーションを提供するシステムが介入する前に、従来のレイアウトマネージャによって実行されることもある。要素毎に、システムは、要素を現在の位置、サイズ、および可視性から次の位置、サイズ、および可視性に変化させるスムーズアニメーションを計算する。可視性のために、追加の不透明なアニメーション（opacity animation）を使用してスムーズなフェードインアニメーションを導入することに留意されたい。そのため、システムは、所望の遷移時間に亘って要素をアニメーション表示する。要素が目標位置に到達した後、システムは要素を適切なレイアウトコンテナに戻す。その後、レイアウトアニメーションシステムは、関与している要素の制御を解放し、動作は再びレイアウトマネージャによって制御される。
【００１１】
個別のプロパティまたは計算プロパティは、様々なＵＩ要素設定を含むことができる。例えば、格子レイアウトは、ＵＩ要素が配置された座標ではなく、行および列の識別子を含むことができる。２つの状態間のある列から別の列へのＵＩ要素の遷移は、個別のプロパティ変更（例えば、Grid.Column）であるが、要素を実際に特定の距離を移動させて、要素の幅および／または高さを変更することもできる。状態間で列プロパティは変化しているが、レイアウトアニメーションシステムは、アニメーションがスムーズになるように、要素の位置およびサイズプロパティを、要素の開始位置と最終位置との間のいくつかの中間位置を通じて変更する。計算プロパティの値の一例は、ある要素の高さプロパティを、明示的な高さから、その要素の高さがその要素の周囲の他の要素に基づいて動的に調整されることを示す「自動」の値に変えることである。例えば、５（five）の高さと自動の高さとの間のプラットフォームにより自然に起こる段階的な修正はない。しかしながら、レイアウトアニメーションシステムは、要素のサイズプロパティを修正することによって遷移をスムーズにアニメーション化する。
【００１２】
図１は、一実施形態におけるレイアウトアニメーションシステムのコンポーネントを示すブロック図である。レイアウトアニメーションシステム１００は、状態管理コンポーネント１１０、状態デルタ決定（determine state delta）コンポーネント１２０、状態スナップショットコンポーネント１３０、スナップショット比較コンポーネント１４０、要素アニメーションコンポーネント１５０、および要素分離（element isolation）コンポーネント１６０を含んでいる。これらのコンポーネントの各々は本明細書でさらに詳細に説明される。
【００１３】
状態管理コンポーネント１１０は、ＵＩが存在し得る複数の状態を格納し、ある状態から別の状態に遷移すべきことを示す指示を受信する。複数の状態を、ＸＡＭＬファイルなどの宣言型フォーマットで格納することができる。設計者は、デザイナツールのキャンバス（ｃａｎｖａｓ）上にコントロールを視覚的に置くことによって状態を作成することができ、あるいはコントロール定義を宣言型フォーマットファイルに手動で追加することができる。宣言型フォーマットは、遷移を引き起こす条件（例えば、マウスホバリング、ボタンクリックなど）や、その遷移のプロパティ（例えば、期間）などの遷移情報も含むことができる。例えば、マイクロソフト社のＶｉｓｕａｌ  Ｓｔａｔｅ  Ｍａｎａｇｅｒを用いて、これらをＸＡＭＬファイルにＴｒｉｇｇｅｒおよび／またはＶｉｓｕａｌＳｔａｔｅとして格納することができる。異なるアプリケーションの様々な目的に基づいてアプリケーションのロジックによって、遷移を生じさせることができる。
【００１４】
状態デルタ決定コンポーネント１２０は、次の状態（ingoing state：新たな状態）と現在の状態（outgoing state）とを比較して、その状態間で変化するレイアウトプロパティ、および変化することとなる対応するＵＩ要素を決定する。レイアウトプロパティは、格子レイアウトの列と行（および、列スパンと行スパン）、キャンバスの上部と左部のプロパティ、可視性プロパティ、スタックの向き、ドックレイアウトにおけるドッキングの方向、拡張レイアウトの拡張されたプロパティ、ラップパネルレイアウトの向きとアイテムの幅／高さ、ならびに個々の要素の位置プロパティ（例えば、幅、高さ、最小幅、最小高、最大幅、最大高、マージン、パディング、水平整列、および垂直整列）などの多くの異なるプロパティタイプを含むことができる。状態デルタ決定コンポーネント１２０は、ある１つのＵＩ要素のレイアウトプロパティが遷移の間に変化すると判断したとき、該状態デルタ決定コンポーネント１２０は、その要素の親要素および兄弟要素を、変化した要素のセットに加えるが、これは、レイアウトプロパティが変化している要素の新しいパラメータのために、それらの親および兄弟要素も位置が変わることがあるからである。典型的に、子要素の親が変化するとき、その子要素は典型的に自動的に変化するため、子要素を処理する必要はなく、また子要素は、結果的に複雑になる場合のために、それら子要素自身のレイアウトアニメーションを構築することができる。
【００１５】
状態スナップショットコンポーネント１３０は、レイアウトの各ＵＩ要素が配置された長方形のスナップショットをとる。長方形は、実際には可視ではないＵＩ要素の寸法（次元：dimension）を表すＵＩ要素の抽象的な境界である。システムを用いて３次元のアニメーションを扱うこともでき、したがってスナップショットは、長方形ではなく、境界ボックス（bounding box）を含むこともある。状態スナップショットコンポーネント１３０は、２つのスナップショット、すなわち、一方のスナップショットは、現在の状態にあることをＵＩ要素に知らせた後のものであり、他方のスナップショットは、次の状態にあることをＵＩ要素に知らせた後のものである。一部の実施形態において、レイアウトアニメーションシステムは、ＵＩ要素を実際にレンダリングすることなくＵＩ要素が状態を変えることを要求するためのＡＰＩを提供する。
【００１６】
スナップショット比較コンポーネント１４０は、現在の状態のスナップショットと次の状態のスナップショットとを比較して、どのＵＩ要素が実際に変化したかを決定する。各要素について、スナップショット比較コンポーネント１４０は、現在の状態および次の状態の各々において変化した各プロパティの値を決定し、要素アニメーションコンポーネント１５０がプロパティの遷移をアニメーション化するために変更すべき適切なプロパティを決定する。例えば、可視性プロパティについて、スナップショット比較コンポーネント１４０は、不透明性が、現在のレイアウト状態と次のレイアウト状態との間におけるスムーズな遷移を作成するためにいくつかの中間状態を介して変更すべき適切なプロパティであると決定することができる。遷移アニメーションの間、システムは不透明性プロパティを変更し、次の状態への最終的なアニメーションにおいて、システムは可視性プロパティをその個別の値（例えば、可視でないことに対して、フォールス（偽））に変更し、不透明性プロパティをその初期値にリセットする。
【００１７】
状態デルタ決定コンポーネント１２０およびスナップショット比較コンポーネント１４０は、異なる条件下で同様の機能を実行する。状態デルタ決定コンポーネント１２０は、遷移が起こる前の複数の状態を比較して、遷移の間に変化することとなるレイアウトプロパティの予測を提供する。しかしながら、実際に遷移を行うことなく、状態デルタ決定コンポーネント１２０は、変化していると識別したものがＵＩ要素に実際に含めることがある。一方、スナップショット比較コンポーネント１４０は、各状態がアクティブであるときのレイアウトプロパティのスナップショットを比較する。開始のスナップショットは、現在の状態がアクティブであるときに撮られ、終了のスナップショットは、次の状態への遷移が行われた後（例えば、遷移は、画面にまだレンダリングされていないが、メモリで行われる）に撮られる。スナップショット比較コンポーネント１４０は、実際に変化したそれらのＵＩ要素を、遷移をスムーズにアニメーション化する要素アニメーションコンポーネント１５０に渡し、そして、実際には変化しなかった追加のＵＩ要素を従来のレイアウトパスを通じて渡す。さらに、従来の（レイアウトでない）アニメーションパスは、状態デルタにおいて変化しているプロパティであって、レイアウトの影響（例えば、背景色）は有していない全てのプロパティをアニメーション化することもできる。
【００１８】
要素アニメーションコンポーネント１５０は、現在の状態と次の状態との間で要素をスムーズにアニメーション化する。例えば、要素が、ある位置で開始して別の位置に移動する場合、要素アニメーションコンポーネント１５０は、その要素を開始位置から終了位置へ、いくつかの中間位置を通じて移動させて、ユーザにスムーズな移動の外観を提供する。本明細書では、長方形および長方形の座標を例として用いているが、この技術分野の当業者には、様々な種類の座標および遷移の動きを用いて上記システムを使用することができることが認識されよう。例えば、システムは、要素が回転角を介してアニメーション化される極座標系を用いることができる。別の例として、特定のＵＩレイアウトは、ＵＩ要素が現在の状態から次の状態を得るために移動する屈曲したパス（winding path）を定義することもできる。
【００１９】
一部の実施形態において、レイアウトアニメーションシステム１００は、他の要素から要素の移動を分離する要素分離（element isolation）コンポーネント１６０を含む。レイアウトマネージャは、要素レイアウトおよび位置を動的に決定するので、１つの要素のサイズおよび位置を変更することにより、他の要素のレイアウトの変化が生じることがある。これは、遷移アニメーションのコンテキストでは望ましくなく、このため、要素分離コンポーネント１６０は、要素アニメーションコンポーネント１５０がアニメーション化している要素を含む一時的なコンテナを作成することができる。要素分離コンポーネント１６０は、コンテナのサイズおよび位置を次の状態に基づいて設定し、コンテナ内の要素を、その現在の状態の位置およびサイズからその次の状態の位置およびサイズへアニメーション化する。コンテナのサイズおよび位置は遷移の間に変化しないので、他の要素は、そのアニメーションによって影響されない。遷移が完了すると、要素分離コンポーネント１６０は、一時的なコンテナをレイアウトから除去する。あるいはまた、レイアウトマネージャは、レイアウトアニメーションシステムが、要素に対する特定のセットの変化が他の要素に影響しないことを該マネージャに知らせるために設定するフラグを提供することができる。
【００２０】
システムが実装されるコンピューティング装置は、中央処理ユニット、メモリ、入力装置（例えば、キーボードおよびポインティングデバイス）、出力装置（例えば、表示装置）、ならびに記憶装置（例えば、ディスクドライブまたは他の不揮発性記憶媒体）を含むことができる。そのメモリおよび記憶装置は、システムを実装または有効にするコンピュータ実行可能な命令（例えば、ソフトウェア）で符号化されるコンピュータ読み取り可能な記憶媒体である。加えて、データ構造およびメッセージ構造を、通信リンク上の信号などのデータ伝送媒体を介して格納または送信することができる。インターネット、ローカルエリアネットワーク、ワイドエリアネットワーク、ポイントツーポイントのダイアルアップ接続、携帯電話ネットワークなどの様々な通信リンクを使用することができる。
【００２１】
システムの実施形態は、パーソナルコンピュータ、サーバコンピュータ、ハンドヘルドまたはラップトップ装置、マルチプロセッサシステム、マイクロプロセッサベースのシステム、プログラマブル家庭用電化製品、デジタルカメラ、ネットワークＰＣ、ミニコンピュータ、メインフレームコンピュータ、および上記のシステムもしくは装置のいずれかを含む分散型コンピュータ環境などの様々な動作環境で実装することができる。コンピュータシステムは、携帯電話機、パーソナルデジタルアシスタント（ＰＤＡ）、スマートフォン、パーソナルコンピュータ、プログラマブル家庭用電化製品、デジタルカメラなどとすることができる。
【００２２】
システムを、１つまたは複数のコンピュータまたは他の装置によって実行される、プログラムモジュールなどのコンピュータ実行可能な命令の一般的なコンテキストで説明することもできる。一般に、プログラムモジュールは、特定のタスクを実行するか、または特定の抽象なデータタイプを実装するルーチン、プログラム、オブジェクト、コンポーネント、データ構成などを含む。典型的に、プログラムモジュールの機能を、様々な実施形態において望ましく組み合わせ、あるいは分散させることができる。
【００２３】
図２は、一実施形態において、システムによって実行されるＵＩ要素のアニメーションを示す表示図である。ＵＩ要素は、現在の状態の開始位置２１０で開始し、次の状態の終了位置２３０で終了する。遷移をアニメーション化するために、システムは、まず、一時的なコンテナ２４０を用いて終了位置２３０でＵＩ要素を包む。一時的なコンテナ２４０は、ＵＩ要素の移動がＵＩ要素２５０などの他の要素側から分離されることを確かにする。ＵＩ要素の終了位置２３０は、遷移の目的で座標（０，０）とみなされる。本明細書で説明されるスナップショット処理を用いて、システムは、開始位置がコンテナに対して座標（−５００，−５００）であると決定する。レイアウトベースのシステムにおいて、ＵＩ要素は幾何学的座標を用いて配置されず、ＵＩ要素が最初に開始位置２１０にあり、後に終了位置２３０にあるようにさせる動作は、実際、関連付けられた座標を有しない或るプロパティにおける変化となる。例えば、設計者は、開始位置２１０から終了位置２３０への移動をさせるために、整列プロパティを左上から右下に変更することができる。整列などのプロパティのための論理的な中間状態はない。しかしながら、現在の状態および次の状態におけるＵＩ要素の実際の座標のスナップショットをとることによって、システムは、スナップショットの座標に基づいてＵＩ要素の移動をスムーズにアニメーション化することができる。よって、システムは、ＵＩ要素が開始位置２１０から終了位置２３０へスムーズに移動してユーザに対して現れるように、少なくとも１つの中間位置２２０を介してＵＩ要素をアニメーション化する。
【００２４】
一時的なコンテナ２４０の使用は、システムが、関心のあるＵＩ要素だけをアニメーション化し、他の要素がその表示の周囲を不規則にジャンプしないようにすることを可能にする。例えば、ＵＩ要素２５０が、全ての利用可能な幅を満たすように「自動」に設定された幅を有する場合、ＵＩ要素２５０は、アニメーション化されたＵＩ要素が、開始位置２１０から中間位置２２０へ、最終的に終了位置２３０に移動するように、アニメーションを通じて、ＵＩ要素２５０自身の位置を変更する。代わりに、一時的なコンテナ２４０は、ＵＩ要素２５０が動かないままでいるようにアニメーションの間に移動しない。さらに、ＵＩ要素２５０は、同一のレイアウト変化のため、あるいは別のレイアウト変化のためであっても、ＵＩ要素２５０自身のレイアウトアニメーションを体験し、そしてシステムは、現在のアニメーションが、進行中の他のいずれかのアニメーションを妨げるという副作用を避ける。遷移アニメーションが完了すると、システムは一時的なコンテナ２４０を除去し、レイアウトアニメーションシステムを再び呼び出す状態遷移が起きない限り、レイアウトは従来のレイアウトルールに従って応答する。
【００２５】
図３は、一実施形態において特定の状態遷移の間に移動し得る潜在的ターゲットのＵＩ要素を識別する、システムの処理を示すフローチャートである。はじめに、ブロック３１０において、システムは、異なっている全てのレイアウトベースのプロパティを決定するために、現在の状態を次の状態と比較する。例えば、システムは、レイアウトプロパティを列挙し、現在の状態および次の状態における各レイアウトプロパティの値に対して、同等または類似のプログラムテストを実行することができる。続いて、ブロック３２０において、システムは、その比較に基づいて、変化したレイアウトプロパティを識別する。レイアウトプロパティが変化したとしても、ＵＩ要素は実際に移動しないことがあることに留意されたい。例えば、整列プロパティが左から右に変化した場合にも、ＵＩ要素が、他の要素の間に挟まれていれば、そのＵＩ要素の位置は、いずれかの整列の場合と同じ位置となることがある。これは許容されることであり、この点におけるシステムの１つの目標は、結果的に変化しない一部の要素を含むことや過度に含むかどうかに関わらず、レイアウトを実際に変えることとなるＵＩ要素のセットを識別することである。それらの種類の要素は、図４に示される手順を使用して最終的に除去される。
【００２６】
続いて、ブロック３３０において、システムは、変化しているレイアウトプロパティを識別した、変化したＵＩ要素を、データ構造に格納する。例えば、システムは、変化したＵＩ要素のセットをインメモリリストに格納することができる。続いて、ブロック３４０において、識別された各ＵＩ要素について、システムは、いずれかの関連する（例えば、兄弟および親）ＵＩ要素を、その格納されたＵＩ要素に追加する。兄弟および親のＵＩ要素は、一般的に、特定のＵＩ要素のレイアウトの変化によって、影響を受ける。また、多くのレイアウトシステムは、複数の子要素が含まれることがあるが、子要素は親要素のレイアウト変化に自動的かつ適切に適合するため、これは、システムによるさら介入なるなしに行われることがある。続いて、ブロック３５０において、システムは、図４を参照してさらに説明するように、識別されたＵＩ要素それぞれの遷移をスムーズにアニメーション化する。ブロック３５０の後、それらのステップは終了する。
【００２７】
図４は、一実施形態において、現在の状態から次の状態にＵＩ要素の遷移をスムーズにアニメーション化するシステムの処理を示すフローチャートである。はじめに、ブロック４１０において、システムは、図３を参照して本明細書で説明した処理によって識別された、ＵＩ要素の位置および他の可視的なプロパティのスナップショットをとる。システムは、これらのステップを、前の処理によって識別された要素毎に実行しても良く、また、これらのステップは、要素毎に順次行われても、並列に行われても良いことに留意されたい。システムは、ＵＩ要素の効果的な不透明度を記憶することもでき、ここで、効果的な不透明度は、可視性の倍の不透明度（visibility times opacity）である。言い換えると、可視性がゼロまたは偽である場合は、システムは不透明度を保存しなくて良いが、可視性が真であれば、不透明度は可視性のレベルを与えるので、システムはその不透明度を記憶する。
【００２８】
続いて、ブロック４２０において、システムは、進行している以前の遷移を停止する。レイアウトＵＩは動的であり、ユーザはそのＵＩと対話することができるので、システムは、新しい状態変化要求を受信したとき、以前の状態変化の中間遷移である場合がある。これは比較的よく見られることであり、これにより、システムは、その新しい次の状態に基づいて、ＵＩ要素の現在の位置からそのＵＩ要素の新しい終了位置への遷移をアニメーション化する。続いて、ブロック４３０において、システムは、レイアウトが新しい状態に変化したことをＵＩ要素に知らせる。システムは、ＵＩ要素がその位置プロパティおよびレイアウトプロパティの全てを更新するようにこの処理を行うが、遷移はディスプレイに実際にはレンダリングされない。このように、システムは、いずれのアニメーションもユーザに示すことなく、それらの終了値でＵＩ要素のプロパティの各々にアクセスすることができる。
【００２９】
続いて、ブロック４４０において、システムは、ＵＩ要素が次の状態になったとき、そのＵＩ要素の位置および他の可視プロパティのスナップショットをとる。これは、アニメーションが完了したときにＵＩ要素が終了する場所をシステムに知らせる。システムは、ＵＩ要素の効果的な不透明度を再び記憶することができ、あるいは要素の現在のプロパティ値から必要に応じて効果的な不透明度を読み取ることもできる。続いて、ブロック４５０において、システムは、２つのスナップショットを比較して、或る形態（例えば、可視性、整列）において、ＵＩ要素が移動したか、または外観が変化したかどうかを判断する。このシステムは、現在の状態から次の状態へのスムーズなアニメーション遷移を提供するために、比較結果を使用して、ＵＩ要素に対する一連の中間的な位置／外観を作成する。
【００３０】
続いて、決定ブロック４６０において、ＵＩ要素の外観が変化した場合、システムはブロック４７０に進み、そうでなければ、システムは従来のアニメーションを使用してＵＩ要素が遷移を完了させることを可能にする。続いて、ブロック４７０において、システムは、アニメーションの間のＵＩ要素の移動を他のＵＩ要素から分離する一時的なコンテナ（例えば、キャンバス）に、ＵＩ要素を入れる。
【００３１】
続いて、ブロック４８０において、システムは、ＵＩ要素の外観の変化がユーザにスムーズに表現されるように、現在の状態と次の状態との間の変化をシミュレートする外観プロパティの値を徐々に修正することによって、ＵＩ要素の遷移をアニメーション化する。システムは、質的な（qualitative）レイアウトプロパティ（例えば、整列、列）がアニメーション化されている抽象化レベルから、量的な（quantitative）レイアウトプロパティ（例えば、幅、高さ、ｘ／ｙ座標）がアニメーション化されている抽象化レベルに変換する。この変換における本質は、前者のプロパティはぎくしゃくして見えることがあり、良いユーザ体験にはつながらないが、後者のプロパティはスムーズであり、良いユーザ体験につながるということにある。システムは、状態の間の遷移の特定の期間に基づいて、中間的外観（intermediate appearance）の数と、一連の中間的外観の間の遷移の速度を決定する。色に関して、システムは、開始色と終了色との間で赤、緑、および青の値を徐々にアニメーション化することができる。一部の実施形態において、従来のアニメーションシステムとレイアウトアニメーションシステムが並行に動作して（図示せず）、従来のアニメーションシステムがレイアウト以外のプロパティの変更（例えば、色）を処理し、レイアウトアニメーションシステムがレイアウトプロパティの変更（例えば、整列）を処理することができる。要素の位置を修正するレイアウトプロパティの変更に関して、システムは、ＵＩ要素の座標を徐々に修正してスムーズな移動を生じさせる。可視性などの他のプロパティに関して、システムは、不透明度などの関連するプロパティを修正して、スムーズに変化する可視性の外観を作り出すことができる。
【００３２】
続いて、ブロック４９０において、システムは、ＵＩ要素から一時的なコンテナを除去し、その結果、ＵＩ要素がレイアウト階層内のその通常の位置に戻され、そしてＵＩ要素に対する修正は、周りの要素に再度影響を与えることとなる。ブロック４９０の後、それらのステップは完了する。
【００３３】
一部の実施形態において、レイアウトアニメーションシステムは、プラグ着脱可能な（pluggable）レイアウトコンテナを起動して遷移のアニメーションを行う。特定のコンテナ設計者は、本明細書で説明されるデフォルト以外のタイプの状態間の移動を望むことがある。レイアウトアニメーションシステムは、プラグ着脱可能なコンテナに開始および終了状態をたずねて、これらの状態のスナップショットをとり、そのスナップショットが異なるときはコンテナに通知し、コンテナに開始状態から終了状態へのアニメーションを行うように要求する。そのプラグ着脱可能なコンテナは、変化しているレイアウトプロパティから、レイアウトプロパティの結果から得た遷移に対してシステムが使用するアニメーションプロパティへのマッピングを提供することができる。
【００３４】
一部の実施形態において、レイアウトアニメーションシステムは、レイアウトマネージメントを使用しない他のＵＩ要素とともにレイアウトマネージメントを使用する、一部のＵＩ要素に対して動作する。例えば、ＵＩは、他のＵＩ要素との相対で配置されたＵＩ要素とともに、絶対座標に応じて配置された要素を含むことがある。システムは、絶対的に配置された要素に影響を与えることなく、その相対的に配置された要素に対する変化をアニメーション化することができる。また、システムは、設計者が、特定の状態のグループ対して、スムーズレイアウトをオンまたはオフに切り替えることができるようにし、これにより、スムーズレイアウトがオンの状態グループは、本明細書で説明された技術を使用し、スムーズレイアウトがオフの状態グループは、従来のレイアウトアニメーション技術を使用する。
【００３５】
一部の実施形態において、レイアウトアニメーションシステムは、割り込みされる遷移にも対処する。遷移を、任意の所与のときの異なる変形ターゲット状態（morph target state）に「リダイレクト」することが可能である。ＵＩレイアウトは、ユーザがボタンを切り替えたときに、ある状態に変化し、ユーザが再度ボタンを切り替えときに別の状態に変化することができる。ユーザがボタンを素早く前後に切り替えた場合、ユーザの動作が遷移を逆にするとき、レイアウトは中間的な遷移とすることができる。このシステムは、その中間的な遷移位置から開始することにより、新たな最終状態に応じてレイアウトをアニメーション化することによりこれをスムーズに行うことができる。
【００３６】
以下は、マイクロソフト社のＳｉｌｖｅｒｌｉｇｈｔで使用するために、ユーザインタフェース要素を状態および遷移とともにＸＡＭＬで定義する例である。ＸＡＭＬ  ＵＩ要素は、典型的に、次のように定義される。  
<vsm:VisualStateManager.VisualStateGroups>
oneOrMoreVisualStateGroups
</vsm:VisualStateManager.VisualStateGroups>
【００３７】
プリフィクスvsmは、System.Windowsの名前空間およびアセンブリにマッピングする。プリフィクスvsmでは、マッピングは、xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"として宣言される。
【００３８】
テキスト“oneOrMoreVisualStateGroups”は、型VisualStateGroupの１つまたは複数のオブジェクト要素を参照する。設計者は、VisualStateGroupオブジェクトを、プロパティを付加したVisualStateManager.VisualStateGroupsに追加して、コントロールの状態を表す。各VisualStateGroupは、相互排他的なVisualStateオブジェクトのコレクションを含む。コントロールは、VisualStateManagerのGoToStateメソッドをコールすることにより状態間の遷移を生み出す。この抜粋（separate）は設計者（プログラミング経験を有していなくても良い）が、ＸＡＭＬで宣言的にユーザインタフェースを設計することを可能にし、一方、コントロールは、プログラマが、アプリケーションのユーザインタフェースの裏側のロジックを定義できるようにする。
【００３９】
次の例では、１つの格子（Grid）を含むボタン（Button）のための簡単なコントロールテンプレート（ControlTemplate）を作成する。この例は、その格子に対して、VisualStateManager.VisualStateGroupsプロパティを設定する。そのVisualStateManager.VisualStateGroupsは、CommonStatesと呼ばれる１つのVisualStateGroupを含み、このCommonStatesは、MouseOverおよびNormalVisualStateオブジェクトを定義する。ユーザが、マウスカーソルをそのボタン上に置いたとき、格子の内側の長方形（Rectangle）は、０．５秒以上で可視（Visible）から崩壊（Collapsed）へ可視性（Visibility）が変化する。ユーザが、マウスをそのボタンから離すように移動させると、その長方形（Rectangle）は、可視状態（Visible）に戻る。  
<ControlTemplate TargetType="Button" xmlns:vsm="clr-
namespace:System.Windows;assembly=System.Windows">
<Grid >
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<!--Take half second to trasition to the MouseOver state.-->
<vsm:VisualTransition To="MouseOver" 
GeneratedDuration="0:0:0.5"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal" />
<!−Collapse the Rectangle when the
mouse is over the button.-->
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<objectAnimationUsingKeyFrames 
Storyboard.TargetName="Rectangle1" 
Storyboard.TargetProperty="UIElement.Visibility">
<DiscreteObjectKeyFrame KeyTime=”00:00:00”>
<DiscreteObjectKeyFrame.Value>
<Visibilty>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateManager.CustomVisualStateManager>
<Microsoft_Expression_Extensions_Animation: 
LayoutAwareVisualStateManager/>
</vsm:VisualStateManager.CustomVisualStateManager>
<Rectangle x:Name=”Rectangle1”/>
</Grid>
</ControlTemplate>
【００４０】
上記のことから、本明細書では、例示のためにレイアウトアニメーションシステムの特定の実施形態を説明したが、本発明の精神および範囲から逸脱することなく様々な変更を行うことができることが認識されよう。したがって、本発明は、添付の特許請求の範囲の記載以外によって限定されることはない。
【図１】
2012521041.tif 000003
【図２】
2012521041.tif 000004
【図３】
2012521041.tif 000005
【図４】
2012521041.tif 000006
【国際調査報告】
2012521041.tif 000007
2012521041.tif 000008