步骤 2 - 对完成的插值做出反应

在本步骤中,根据相对方位设置指南针背景。相对方位是目的地与行进方向之间的差异。

对已完成的插值作出反应

在本节中,您将使用 Property Target Interpolator: Interpolation Completed 触发器来获知 Property Target Interpolator 何时完成指南针表盘的旋转。当插值完成且行驶方向与目的地对齐时,您将使用 RootNode 节点中的 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 中选择 RootNode 节点,在 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-project.png ../../_images/relativebearing-in-binding-argument-editor.png
  2. 在 Node Tree 中选择 Direction > Value 节点,在 Properties 中的 Bindings 中单击现有绑定,并在 Binding Editor 中将 Expression 设置为

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

    单击 Save。

    您可以使用绑定来将指南针中心显示的值包装在 0 到 359 度范围内。

    ../../_images/value-in-project.png ../../_images/value-binding-argument-editor.png
  3. 找出当 Property Target Interpolator 完成插值时并对其做出反应:

    1. 在 Node Tree 中选择 RootNode 节点,在 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-project.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 节点,因为您想知道在本教程的第 1 步中添加到 Dial 节点的 Property Target Interpolator 完成插值的时间。

      ../../_images/interpolation-completed-trigger-settings.png
    3. 在 Node Components 中,在 Property Target Interpolator: Interpolation Completed 触发器中右键单击 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 设置为 enabled。

      当 Property Target Interpolator: Interpolation Completed 触发器被触发且 Interpolate.RelativeBearing 属性的值为 0 时,您可以使用此动作将 Interpolate.OnCourse 属性的值设为 true。当 Interpolate.OnCourse 属性设为 true 时,RootNode 节点中的 State Manager 会将 RootNode 节点中的 Background Brush 属性设为 Green。

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

现在,当您更改 Compass.xml 文件中 direction XML 元素的值并保存更改后,插值完成后,如果目的地和行进方向对齐,指南针背景将变为绿色。

调整指南针行为

在上一节中,您添加了 Property Target Interpolator: Interpolation Completed 触发器,该触发器使用 RootNode 节点中的 State Manager 设置指南针背景颜色。但是,该状态机仅在指南针表盘旋转的插值完成且目的地与行驶方向对齐时才设置背景颜色。在本节中,您将添加 On Property Change 触发器,以便在以下情况下做出响应:

  • 目的地或行驶方向改变,目的地与行驶方向不一致。

  • 目的地改变,目的地与行驶方向一致。

要调整指南针行为:

  1. 在相对方位改变且行驶方向和目的地不一致时作出反应:

    1. 在 Node Tree 中选择 RootNode 节点,在 Node Components > Triggers 中创建 On Property Change 触发器,将其命名为 On RelativeBearing Change,并将 Property Type 设置为 Interpolate.RelativeBearing 属性。

      Kanzi 会在 RootNode 节点中的 Interpolate.RelativeBearing 属性值发生更改时触发此触发器。

      ../../_images/add-on-property-change-trigger.png ../../_images/on-property-change-trigger-settings-relativebearing.png
    2. 在 Node Components > Triggers 中,在 Property Target Interpolator: Interpolation Completed 触发器上右键单击 ..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 时,RootNode 节点中的 State Manager 会将 RootNode 节点中的 Background Brush 属性设置为 Black。

      ../../_images/on-property-change-set-property.png ../../_images/on-property-change-oncourse-false.png
  2. 在目的地改变且与行驶方向一致时作出反应:

    1. 在 Node Tree 中选择 RootNode 节点,在 Node Components > Triggers 中创建一个 On Property Change 触发器,将其命名为 On Destination Change,并将 Property Type 设置为 Interpolate.Destination 属性。

      Kanzi 会在 RootNode 节点中的 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 时,RootNode 节点中的 State Manager 会将 RootNode 节点中的 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 元素中的值时:

    • 如果目的地和行驶方向一致,背景立即变为绿色。

    • 如果目的地和行驶方向不一致,背景立即变为黑色。

接下来该做什么?

在本教程中,您学习了如何使用 Property Target Interpolator 动态设置属性的目标值,并在一段时间内将当前值插值到目标值。您还学习了如何使用 Property Target Interpolator: Interpolation Completed 触发器对完成的插值做出反应。

现在您可以:

另请参阅

获取关于插值完成的信息

使用绑定

使用触发器