步骤 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 自定义控制器属性来实现这一点。状态管理器有两个状态:
当 Interpolate.OnCourse 属性的值设置为 false 时,OffCourse 状态将 RootPage 节点的背景设置为黑色。
当 Interpolate.OnCourse 属性的值设置为 true 时,OnCourse 状态将 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 节点中的绑定共同使 Destination Arrow 节点根据
Compass.xml文件中 destination 和 direction XML 元素中的值围绕罗盘刻度旋转。
插值指南针表盘的旋转¶
在本节中,您将学习动画化指南针表盘的旋转,以便当行驶方向改变时,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 节点,在 Properties 中在 Bindings 中单击现有绑定进行编辑,并在 Binding Editor 中将 Expression 设置为:
createRotationZ({@./Interpolate.Interpolator})单击 Save。
您使用此绑定根据 Interpolate.Interpolator 属性的值旋转 Dial 节点。
在 Properties 中,单击 + Add Binding,并在 Binding Editor 中设置:
Property 到 Interpolate.Interpolator
Expression 到
{#RootPage/Interpolate.Direction}
单击 Save。
您将 Interpolate.Interpolator 属性绑定到 RootPage 节点中的 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 设置。