ステップ2 - 補間の完了に反応する

このステップでは、相対方位に基づいてコンパスの背景を設定します。相対方位とは、目的地と進行方向の差です。

補間が完了したことに反応する

このセクションでは、Property Target Interpolator: Interpolation Completed トリガーを使用して、Property Target Interpolator がコンパスダイヤルの回転を完了したときに確認します。補間が完了し、進行方向と目的地が一致したときに、RootPage ノード内の State Manager を使用してコンパスの背景を設定します。

補間の完了に反応するには:

  1. 目的地と移動方向の差を見つける:

    1. Library Alt を押しながら右クリック Property Types で、Property Type を選択し、New Property Type ウィンドウで設定します。

      • Name から Interpolate.RelativeBearing へ

      • Data Type から Integer へ

      ../../_images/create-property-type1.png ../../_images/new-property-type-relativebearing.png

    2. Node Tree で RootPage ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。

      • Property から Interpolate.RelativeBearing へ

      • Expression へ

        abs(mod({@./Interpolate.Destination} - {@./Interpolate.Direction}, 360))

      Save をクリックします。

      このバインディングを使用して、目的地と移動方向の間の角度の差を、前のステップで作成した Interpolate.RelativeBearing プロパティに格納します。モジュロ関数を使用して、Interpolate.RelativeBearing の値を0から359度の範囲にラップします。

      ../../_images/rootpage-in-project1.png ../../_images/relativebearing-in-binding-argument-editor.png

  2. Node Tree で Direction > Value ノードを選択し、Properties の Bindings で既存のバインディングをクリックし、Binding Editor で Expression を設定します。

    mod({#RootPage/Interpolate.Direction}, 360)

    Save をクリックします。

    このバインディングを使用して、コンパスの中心に表示される値を0から359の範囲にラップします。

    ../../_images/value-in-project.png ../../_images/value-binding-argument-editor.png

  3. Property Target Interpolator が補間を完了したときにそれに反応する方法を見つける:

    1. Node Tree で RootPage ノードを選択し、Node Components Alt を押しながら右クリック Triggers で、Message Trigger > Property Target Interpolator > Interpolation Completed を選択します。

      Property Target Interpolator: Interpolation Completed トリガーは、Property Target Interpolator が補間するプロパティの補間を完了したときに送信するメッセージをインターセプトします。

      ここでは、Property Target Interpolator: Interpolation Completed トリガーを使用して、このチュートリアルのステップ1で追加した Property Target Interpolator が Interpolate.Interpolator プロパティの値の補間を終了したときに送信するメッセージをインターセプトします。

      ../../_images/rootpage-in-project1.png ../../_images/add-interpolation-completed-trigger.png

    2. Property Target Interpolator: Interpolation Completed の Node Components > Triggers トリガーで、Message Source プロパティを Dial ノードに設定します。

      Message Source プロパティを使用して、Property Target Interpolator: Interpolation Completed トリガーがインターセプトしたいメッセージのターゲットアイテムを設定します。Message Source プロパティを Dial ノードに設定するのは、Property Target Interpolator が、チュートリアルのステップ1で Dial ノードに追加したインターポレーションを完了したときに知りたいからです。

      ../../_images/interpolation-completed-trigger-settings.png

    3. Property Target Interpolator: Interpolation Completed の Node Components で、Conditions を右クリックし、Trigger Condition を選択し、トリガー条件を設定します。

      • A

        • Property から Interpolate.RelativeBearing へ

      • Operation から = へ

      • B

        • Type of B から Fixed へ

        • Fixed Value を 0 に

      このトリガー条件を使用して、補間が完了し、Interpolate.RelativeBearing プロパティの値が0のときにのみ、この Property Target Interpolator: Interpolation Completed トリガーを発動します。Interpolate.RelativeBearing プロパティの値が0のとき、移動の方向は目的地と一致します。

      ../../_images/interpolation-completed-add-trigger-condition.png ../../_images/interpolation-completed-condition-relativebearing-equals-0.png

    4. Property Target Interpolator: Interpolation Completed の Node Components で Alt を押しながら右クリック Actions をトリガーし、Set Property を選択し、Set Property アクションセットで:

      • Target Property から Interpolate.OnCourse へ

      • Fixed Value を有効にする

      このアクションを使用して、Property Target Interpolator: Interpolation Completed トリガーがオフになり、Interpolate.RelativeBearing プロパティの値が 0 のときに、Interpolate.OnCourse プロパティの値を true に設定します。Interpolate.OnCourse プロパティが true に設定されると、RootPage ノード内の State Manager が、RootPage ノード内の Background Brush プロパティを Green に設定します。

      ../../_images/interpolation-completed-set-property.png ../../_images/set-property-oncourse-true.png

Compass.xml ファイル内の direction XML 要素の値を変更して変更を保存すると、補間が完了した後、目的地と進行方向が一致している場合、コンパスの背景が緑色に変わります。

コンパスの動作を調整する

前のセクションでは、RootPage ノード内の State Manager を使用してコンパスの背景色を設定する Property Target Interpolator: Interpolation Completed トリガーを追加しました。しかし、そのステートマネージャーは、コンパスダイヤルの回転の補間が完了し、目的地と進行方向が一致したときにのみ背景色を設定します。このセクションでは、次の条件に反応する On Property Change トリガーを追加します:

  • 目的地または移動方向が変わり、目的地と移動方向が一致しません。

  • 目的地が変わり、目的地と移動方向が一致します。

コンパスの動作を調整するには、

  1. 相対方位が変化し、進行方向と目的地が一致しない場合に反応します。

    1. Node Tree で RootPage ノードを選択し、Node Components > Triggers で On Property Change トリガーを作成し、それに On RelativeBearing Change という名前を付け、Property Type を Interpolate.RelativeBearing プロパティに設定します。

      Kanzi は、RootPage ノード内の Interpolate.RelativeBearing プロパティの値が変更されたときにこのトリガーを発動します。

      ../../_images/add-on-property-change-trigger.png ../../_images/on-property-change-trigger-settings-relativebearing.png

    2. Property Target Interpolator: Interpolation Completed の Node Components > Triggers で、..Interpolate.RelativeBearing = 0 トリガー条件を右クリックし、Copy を選択し、On RelativeBearing Change トリガーを右クリックして、Paste を選択します。

      ../../_images/copy-trigger-condition.png ../../_images/paste-trigger-condition-on-relativebearing-change.png

    3. On RelativeBearing Change トリガーに貼り付けたトリガー条件で、Operation を != に設定します。

      この条件では、Kanzi は Interpolate.RelativeBearing プロパティの値が変化し、かつ Interpolate.RelativeBearing プロパティの値が 0 でない場合にのみこのトリガーを発動します。Interpolate.RelativeBearing プロパティの値が 0 でない場合、移動の方向は目的地と一致しません。

      ../../_images/on-property-change-condition-relativebearing-not-0.png

    4. On RelativeBearing Change トリガーで Set Property アクションを作成し、次のように設定します:

      • Target Property から Interpolate.OnCourse へ

      • Fixed Value を無効にする

      このアクションを使用して、Interpolate.RelativeBearing プロパティの値が変化し、かつ Interpolate.RelativeBearing プロパティの値が 0 でない場合に、Interpolate.OnCourse プロパティを false に設定します。Interpolate.OnCourse プロパティが false に設定されると、RootPage ノード内の State Manager が、RootPage ノード内の Background Brush プロパティを Black に設定します。

      ../../_images/on-property-change-set-property.png ../../_images/on-property-change-oncourse-false.png

  2. 目的地が変更され、移動方向と一致したときに反応します。

    1. Node Tree で RootPage ノードを選択し、Node Components > Triggers で On Property Change トリガーを作成し、それに On Destination Change という名前を付け、Property Type を Interpolate.Destination プロパティに設定します。

      Kanzi は、RootPage ノード内の Interpolate.Destination プロパティの値が変化したときにこのトリガーを発動します。

      ../../_images/add-new-trigger-for-on-property-change.png ../../_images/on-property-change-settings-destination.png

    2. Interpolation Completed トリガーで、..Interpolate.RelativeBearing = 0 トリガー条件をコピーして、On Destination Change トリガーに貼り付けます。

      このトリガー条件を使用して、Interpolate.RelativeBearing プロパティの値が変化し、かつ Interpolate.RelativeBearing プロパティの値が 0 のときにのみ On Destination Change トリガーを発動します。Interpolate.RelativeBearing プロパティの値が 0 のとき、移動の方向は目的地と一致します。

      ../../_images/copy-trigger-condition.png ../../_images/paste-trigger-condition-on-destination-change.png ../../_images/on-property-change-condition-relativebearing-equals-0.png

    3. Property Target Interpolator: Interpolation Completed トリガーで Set Property アクションをコピーし、On Destination Change トリガーに貼り付けます。

      このアクションを使用して、Interpolate.RelativeBearing プロパティの値が変化し、かつ Interpolate.RelativeBearing プロパティの値が 0 のときに、Interpolate.OnCourse プロパティを true に設定します。Interpolate.OnCourse プロパティが true に設定されると、RootPage ノード内の State Manager が、RootPage ノード内の Background Brush プロパティを Green に設定します。

      ../../_images/copy-set-property-action.png ../../_images/paste-set-property-action.png ../../_images/on-property-change-oncourse-true.png

Compass.xml ファイル内の direction または destination XML 要素の値を変更してファイルを保存すると、コンパスの背景が次のように変わります。

  • direction XML要素の値を変更するとき:

    • 目的地と移動方向が一致する場合、コンパスダイヤルの回転の補間が完了した後、背景が緑色に変わります。

    • 目的地と移動方向が一致しない場合、背景は即座に黒くなります。

  • destination XML要素の値を変更すると、

    • 目的地と移動方向が一致すると、背景が即座に緑色に変わります。

    • 目的地と移動方向が一致しない場合、背景は即座に黒くなります。

Previous step

次の作業

このチュートリアルでは、Property Target Interpolator を使用してプロパティのターゲット値を動的に設定し、現在の値を時間をかけてターゲット値に補間する方法を学びました。また、補間の完了に反応するために Property Target Interpolator: Interpolation Completed トリガーを使用する方法も学びました。

次に行えること：

関連項目

補間の完了に関する情報を取得する

バインディングの使用

トリガーの使用