ステップ1 - コンパスダイヤルの回転を補間する¶
このチュートリアルのこのステップでは、Property Target Interpolator を使用して、コンパスダイヤルの回転を現在の方向から目標方向へ時間をかけて補間します。
チュートリアルを入手する¶
チュートリアルを入手するには、Kanzi Studio の Quick Start ウィンドウで Examples をクリックします。Interpolate チュートリアルの横にある 
をクリックします。
Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。
<KanziWorkspace>/Tutorials/Interpolate/Start/Tool_projectディレクトリ内のチュートリアルの開始地点プロジェクト。<KanziWorkspace>/Tutorials/Interpolate/Completedディレクトリ内の完成したチュートリアル。
開始プロジェクトの内容¶
スタートポイントとなるプロジェクトには、このチュートリアルを完了するのに必要なコンテンツが含まれています。
RootPage ノードには、コンパスの目的地と進行方向を受け取るためのデータコンテキストとバインディング、およびステートマネージャーが含まれています。
データコンテキスト。プロジェクトは、XML_data_source プラグインを使用して、XMLデータソースからデータを取得します。
テキストエディタで
<ProjectName>/Application/bin/Compass.xmlファイルを開き、destination または direction XML要素の値を変更します。ファイルを保存すると、XML_data_source プラグインがプロジェクト内のデータオブジェクトを更新し、更新された値を Kanzi Studio Preview に表示します。Data Sources ウィンドウで更新された値を確認するには、Data Sources ウィンドウで XML data source の横にある
をクリックします。Kanzi Studio は、そのデータソースのデータをリロードし、データオブジェクトとその値を更新します。
このセットアップでは、コンパスダイヤルはデータソースから受け取る値に基づいて回転します。しかし、変更は瞬時であり、アニメーション化されていません。このチュートリアルでは、Property Target Interpolator を使用して、コンパスダイヤルの回転を現在の方向から目標方向へ時間をかけてアニメーション化します。
Data Sources ウィンドウを表示するには、Kanzi Studio メインメニューで Window > Data Sources を選択します。
バインディング。RootPage ノードには次のバインディングがあります。
Interpolate.Destination プロパティは、
Compass.xmlファイル内の destination XML 要素の値にバインドされています。Interpolate.Direction プロパティは、
Compass.xmlファイル内の direction XML 要素の値にバインドされています。
ステートマネージャー。RootPage State Manager は RootPage ノードの背景色を設定します。それを実現するために、Interpolate.OnCourse カスタムコントローラープロパティを使用します。ステートマネージャーには2つの状態があります。
OffCourse ステートは、Interpolate.OnCourse プロパティの値が false に設定されているときに、RootPage ノードの背景を黒に設定します。
OnCourse ステートは、Interpolate.OnCourse プロパティの値が true に設定されると、RootPage ノードの背景を緑に設定します。
このチュートリアルのステップ2では、コンパスの背景色を設定するためにステートマネージャーを使用します。
Dial ノードは、コンパスダイヤルを構成する要素をグループ化します。
Degrees ノードには、30度間隔で度数を表示するノードが含まれています。
Cardinal Points ノードには、方位を示すノードが含まれています。
Ticks ノードは目盛りを表示します。
Dial ノードは、RootPage ノード内の Interpolate.Direction プロパティにバインディングされており、
Compass.xmlファイル内の direction XML 要素の値に基づいてノードを回転させます。
Direction ノードは、コンパスの中心に表示される現在の移動方向を度単位で含んでいます。
Value ノードの Text プロパティは、RootPage の Interpolate.Direction プロパティの値にバインドされており、その値は
Compass.xmlファイル内の direction XML 要素から取得されます。
Direction of Travel ノードには、現在の移動方向を示す矢印が含まれており、常に上向きに指しています。
Destination ノードには、現在の目的地を示すノードが含まれています。
Destination ノードには、RootPage ノードの Interpolate.Direction プロパティの値に基づいてノードを回転させるバインディングがあります。
Destination Offset ノードには、RootPage ノードの Interpolate.Destination プロパティの値に基づいてノードを回転させるバインディングがあります。
Destination Arrow ノードには、現在の目的地を示す緑色の矢印が含まれています。
Destination ノードと Destination Offset ノードのバインディングは、
Compass.xmlファイル内の destination および direction XML 要素の値に基づいて、Destination Arrow ノードがコンパスダイヤルの周りを回転するようにします。
コンパスダイヤルの回転を補間する¶
このセクションでは、コンパスダイヤルの回転をアニメーション化し、移動方向が変わると、Property Target Interpolator が現在の値をターゲット値に時間をかけて補間します。
Property Target Interpolator は、決してオーバーシュートしないスプリングダンパーシステムの動作をエミュレートします。スプリングがオブジェクトを動かす力を設定するには Acceleration プロパティを使用し、減衰係数を設定するには Drag プロパティを使用します。Acceleration プロパティの値が大きいほど、プロパティは新しい値に速く到達します。Drag プロパティの値が大きいほど、最大補間速度は低くなります。
コンパスダイヤルの回転を補間するには、
Kanzi Studio の Quick Start ウィンドウで Examples をクリックします。Interpolate チュートリアルの横にある Open をクリックし、Start project を選択します。
Library Alt を押しながら右クリック Property Types で、Property Type を選択し、New Property Type ウィンドウで設定します。
Name から Interpolate.Interpolator へ
Data Type から Float へ
Interpolate.Interpolator プロパティタイプを作成するのは、データ型が整数である Interpolate.Direction プロパティを補間したいからです。データ型が浮動小数点数でないプロパティを補間するには、浮動小数点数のプロパティタイプを作成し、補間したいプロパティを作成した浮動小数点数プロパティにバインドする必要があります。
Dial ノードの回転を、前のステップで作成したプロパティにバインドします。
Node Tree で Dial ノードを選択し、Bindings の Properties で既存のバインディングをクリックして編集し、Binding Editor で Expression を設定します。
createRotationZ({@./Interpolate.Interpolator})Save をクリックします。
このバインディングを使用して、Interpolate.Interpolator プロパティの値に基づいて Dial ノードを回転させます。
Properties で + Add Binding をクリックし、Binding Editor で設定します。
Property から Interpolate.Interpolator へ
Expression へ
{#RootPage/Interpolate.Direction}
Save をクリックします。
RootPage ノードで、回転を制御するために Interpolate.Interpolator プロパティを Interpolate.Direction プロパティにバインドします。
回転を補間したいノードに Property Target Interpolator を追加します。
Node Tree で Dial ノードを選択し、Node Components Alt を押しながら右クリック Animation で Property Target Interpolator を選択します。
Property Target Interpolator を使用して、Interpolate.Interpolator プロパティの値を時間の経過とともにターゲット値に補間します。前のステップで作成したバインディングは、この変更を Dial ノードの回転に適用します。
Create Property Target Interpolator ダイアログで Interpolated Property Type を Interpolate.Interpolator に設定します。
補間動作を設定するには、作成した Property Target Interpolator で以下を設定します。
Acceleration から 5 まで
Drag から 2 へ
Property Target Interpolator は、決してオーバーシュートしないスプリングダンパーシステムの動作をエミュレートします。スプリングがオブジェクトを動かす力を設定するには Acceleration プロパティを使用し、減衰係数を設定するには Drag プロパティを使用します。Acceleration プロパティの値が大きいほど、プロパティは新しい値に速く到達します。Drag プロパティの値が大きいほど、最大補間速度は低くなります。
<ProjectName>/Application/bin/Compass.xml 内の direction XML要素の値を変更してファイルを保存すると、Property Target Interpolator がコンパスダイヤルの回転を時間をかけてターゲット値に補間します。
ヒント
デフォルトで、Preview は Kanzi Studio ウィンドウがフォーカスされているときのみコンテンツを更新します。Kanzi Studio ウィンドウがフォーカスされていないときに Kanzi Studio プロジェクトの変更を確認するには、Kanzi Studio で Edit > User Preferences を選択し、Advanced タブで Update Preview when Kanzi Studio is not focused 設定を有効にします。
