步骤 4 - 为 Car 页面创建状态。¶
在此步骤中，您使用 Kanzi 状态机从不同角度在您的应用程序中显示汽车，并为这些状态之间的过渡设置动画。
创建汽车阴影¶
在 Page 节点 Car 中，您可以调整用于汽车阴影的材质。
要创建汽车阴影：
在 Node Tree 中，双击 Page 节点 Car 以在新的 Preview 选项卡中打开它。
在汽车模型下有一个平面。这是因为用于渲染阴影纹理的材质的 alpha 混合模式不正确。
在 Node Tree 中，选择 Car > Viewport 2D > Car > RootNode > Shadowplane 节点，并在 Properties 中点击
，旁边的 Cluster Material 属性以打开 Shadow 材质的属性。
在 Shadow 材质 Properties 中，将 Blend Mode 设置为 Alpha: Automatic。
创建状态¶
在本节中，为汽车创建不同的状态，每个状态侧重于汽车的不同部分。在此步骤的下一节中，您将创建可点击以进入这些状态的 UI 控件。
在 Kanzi 中，状态管理器是创建丰富用户界面最重要的功能之一。
要创建状态：
在 Node Tree 中选择 Car > Viewport 2D > Car > RootNode > Camera_Root 节点。
在 State Tools 窗口中，单击 Create State Manager 以在 Camera_Root 节点中创建一个状态管理器。
您可以在 Preview 窗口下方找到 State Tools 窗口。
Kanzi Studio 创建一个新的状态管理器并将其分配给 Camera_Root 节点。
当 State Tools 激活时，Preview 选项卡为橙色，您可以使用 State Tools 创建状态。当 State Tools 激活时，Kanzi Studio 跟踪所有属性值的变化，您可以使用 State Tools 将这些值存储到状态中。
在 State Tools 中，单击 Create State 以创建一个状态。
创建三个状态。
双击每个状态的名称，然后将状态命名为 Brakes、Roof、Suspension。
在 Node Tree 中选择 Car > Viewport 2D > Car > RootNode > Camera_Root > Camera 节点。
在 Preview 中选择 Camera tool
并单击 
。当您启用此选项时，Kanzi Studio 会将自由摄像机的当前位置存储到您在 Camera tool 下拉菜单中选择的 Camera 节点。在这种情况下，这是您在 Node Tree 中选择的 Camera 节点。
在 Node Tree 中，选择 Car > Viewport 2D > Car > RootNode > Car 节点，并在 Preview Camera tool 中点击
以将相机拉近到汽车。
在 Preview Camera tool 中，使用轨道相机
设置汽车的位置，并在 State Tools 中单击 
将当前值保存到该状态。例如，当您对位置感到满意时，在 Brakes 状态下的 State Tools 中，单击
以将 Camera 节点的当前位置存储到该状态。
Orbit Camera 允许您移动：
您在 Node Tree 中选择的节点。
您使用相机的 Constraints > Look At 属性设置的节点。
要使用轨道摄像机移动，使用以下控件：
控件
描述 (Description)
点击鼠标左键并拖动。
旋转 (Rotate)
点击鼠标中键并拖动。
按下 Space 键，然后单击并拖动鼠标左键。
平移
滚动鼠标滚轮。
按下 Shift 和 Alt 键，然后单击并拖动鼠标左键。
缩放
按住 Ctrl 并单击鼠标左键。
选择或取消选择 3D 节点 (3D node)。
重复上一步，直到为所有状态创建位置。
在 Preview 中，点击
以进入 Interact 模式，并在 State Tools 中点击每个状态以查看您的应用程序在该状态下的外观。在这种情况下，您可以看到场景中汽车在您为每个状态定义的位置显示。在 State Tools 中，单击 Edit State Manager 以停用 State Tools。
创建在不同状态之间迁移的控件¶
在本节中，您可以创建控件，以在上一节中创建的状态之间进行迁移。
要创建在状态之间迁移的控件：
在 Node Tree 按 Alt 并右键单击 的 Car > Viewport 2D 节点中，选择 Stack Layout 2D，并将其命名为 CarControl。
在 Node Tree 中选择 CarControl 节点，并在 Properties 中将 Direction 属性设置为 Y。
使用 Direction 属性设置您希望 Stack Layout 节点沿其堆叠子节点的轴。
在 Prefabs 中点击
，创建一个 Button 2D 预设，并在 Button 2D 中创建一个 Image 节点。您可以使用此预设件控制在本步骤的前面部分创建的状态机。
在 Prefabs 中，选择 Button 2D > Image 节点，并在 Properties 中添加并设置：
将 Layout Width 和 Layout Height 属性设置为 100 像素。
将 Vertical Margin 属性 Top 和 Bottom 属性字段设置为 5。
在 Image 属性旁边单击
。这可让您在工程中为该预设件的每个实例显示不同的图像。
从 Prefabs 窗口中拖动三个 Button 2D 预设到 Node Tree 窗口，并将它们放在 Car > Viewport 2D > CarControl 节点上。
Kanzi Studio 在 CarControl 节点中实例化 Button 2D 预设。
选择每个 Button 2D 预设实例，按下 F2，并将其重命名为 Brakes、Roof 和 Suspension。
在 CarControl 节点中的 Node Tree 中，选择实例化的 Button 2D 预设中的第一个：
在 Properties 中添加 FirstApplication.Button2D.Image 属性，并将其设置为 StateBrakes 图像。
在 Node Components 按 Alt 并右键单击 Triggers 中，选择 Message Trigger > Button > Click。
在 Node Components 按 Alt 并右键单击 中，Button: Click 触发器，选择 Dispatch Message Action > State Manager > Go to State，并在 State Manager: Go to State 操作中设置：
Target Item 到 Prefabs/Car/Car/RootNode/Camera_Root
State 到 Camera_Root State Manager/StateGroup/Brakes
重复上一步以设置剩余的两个 Button 2D 预设。使用 StateRoof 和 StateSuspension 图像，并设置 Go to State 操作以指向状态 Roof 和 Suspension。
当您单击 CarControl 节点中的按钮时，Kanzi Studio 使用默认的线性过渡转换到该状态。您可以使用 State Transition Editor 调整过渡。请参阅 使用状态迁移。
调整按钮位置¶
在本节中，调整控制汽车状态的按钮的位置。
要调整按钮位置：
单击主菜单下的 Screen 选项卡以在 Preview 中显示整个应用程序。
在 Pages 窗口中选择 Car 节点，并在 Preview 中使用 Node tool
来定位 CarControl 节点。小技巧
要选择具有 Node tool 的节点，请在 Preview 中双击您要选择的节点。
另请参阅¶
要了解有关使用状态机的更多信息，请参阅 使用状态机。
要详细了解有关使用触发器和动作的信息，请参阅 触发器 (Triggers)。
要了解有关使用 Preview Camera tool 的更多信息，请参阅 使用 Camera 节点。