使用状态迁移

使用状态迁移来定义状态机在应用程序状态改变时的反应，例如当用户点击一个按钮时。例如，您可以：

使用任何与任何状态之间的迁移

当您创建状态时，状态机使用默认迁移在两种状态之间进行迁移。

要设置任何状态之间的迁移：

  1. 创建节点，并设置节点以使用状态机。请参阅使用状态机或教程：创建切换按钮。
    例如，创建切换按钮和拥有包含状态 On 和 Off 的状态组的状态机。
  2. 在状态工具 (State Tools) 中点击迁移编辑器 (Transition Editor) 打开状态迁移编辑器 (State Transition Editor)。
    要创建新迁移，点击现有迁移下的 + 创建迁移 (+ Create Transition)。
  3. 当您首次打开 状态迁移编辑器 (State Transition Editor) 时，它显示在该状态组的所有状态之间使用的迁移。将鼠标指针悬停在 上方以查看迁移的详细信息。
  4. 在弹出窗口中进行以下设置：
    • 持续期间 (Duration) 以毫秒为单位的迁移时长。 在持续期间 (Duration) 区域中执行点击和拖动操作，或输入新值以设置迁移的持续时间。
    • 允许中断 (Allow interrupt) 或全部时间 (Always full time) 设置Kanzi 如何处理迁移中断：
      • 发生中断后，全部时间 (Always full time) 会使用持续期间 (Duration) 中设置的全部时间迁移为该状态。
      • 发生中断后，允许中断 (Allow interrupt) 仅使用持续期间 (Duration) 中设置的剩余时间迁移为该状态。
    • 配置动画 (Configure Animations) 让您能够进一步定义迁移的详细信息。在状态迁移编辑器 (State Transition Editor) 窗口中设置：
      • 将开始时间 (Start Time) 设为迁移开始前的逝去时间（单位：毫秒）。
      • 将方向 (Direction) 设为是否将该迁移应用到从起始状态 (Start State) 到结束状态 (End State) 的迁移，或将其设为两种状态的迁移：
        • 单向 (Unidirectional) 仅应用于从起始状态 (Start State) 到结束状态 (End State) 的迁移。
        • 双向 (Bidirectional) 应用于从起始状态 (Start State) 到结束状态 (End State) 的迁移，以及从结束状态 (End State) 到起始状态 (Start State) 的迁移。
      • 缓动函数 (Easing Function) 设置定义迁移曲线的缓动函数。
        使用缓动函数使 UI 元素更逼真。由于现实生活中的物体不会立即启动或停止，所以合适的缓动函数可以帮您营造更愉快的用户体验。
        关闭选择最适合的缓动函数。

        将鼠标悬停在缓动函数的图像上查看其创建的动画的类型。

        缓动函数缓动模式
         缓入 (Ease in)缓出 (Ease out)缓入缓出
        背面 (Back)

        反弹

        圆形

        三次方

        Elastic

        Exponential

        线性 (Linear)

        Power

        二次 (Quadratic)

        四次

        五次

        正弦

        更平滑步进

        平滑步进

        步进

      • 缓动模式 (Easing Mode) 定义如何将缓动函数应用于该迁移：
        • 缓入 (Ease in) 按原样向该迁移应用缓动函数。
        • 缓出 (Ease out) 向该迁移应用缓动函数的负值。
        • 缓入缓出 (Ease in-out) 按原样向迁移的第一部分应用缓动函数，向迁移的第二部分应用缓动函数的负值。
      • 迁移动画 (Transition Animations) 让您能够将自定义动画用于迁移。请参阅在状态迁移中使用自定义缓动函数。

设置特定状态之间的迁移

您可以设置特定状态之间的自定义迁移。您可以向 状态迁移编辑器 (State Transition Editor) 画布添加状态，并配置这两种状态之间的迁移设置。

要设置特定状态之间的迁移：

  1. 在状态迁移编辑器 (State Transition Editor) 中右键点击， 然后在添加状态至画布 (Add State To Canvas) 中选择要设置迁移的状态。
    要显示所有状态，点击 添加所有状态至画布 (Add All States To Canvas)。
  2. 点击该状态以选择它，然后点击 默认值 (Default) 迁移以设置 自定义 (Custom) 迁移。
  3. 将鼠标指针移动到 迁移上方以查看迁移的详细信息。
    状态工具 (State Tools) 显示您在 状态迁移编辑器 (State Transition Editor) 中定义的迁移。点击某个迁移，在状态迁移编辑器 (State Transition Editor) 中打开该迁移的自定义设置。

在状态迁移中使用自定义缓动函数

您可以使用动画为状态迁移定义自定义缓动函数。例如，定义自定义缓动函数，在进入该状态时发出电话闪烁提示。

要在状态迁移中使用自定义缓动函数：

  1. 创建或选择使用状态机的节点。请参阅使用状态机或教程：创建切换按钮。
    例如：
    1. 创建图像 (Image) 节点，该节点显示图像，提醒用户有来电。

    2. 为图像 (Image) 节点创建具有一个状态组（含 Default 和 Incoming Call 状态）的状态机，为每个状态添加并设置图像 (Image) 节点的不透明度 (Opacity) 属性值：
      • 对于Default 状态，将其设为 0
        这样即可在电话不响铃时在 Default 状态隐藏来电图像。
      • 对于Incoming Call 状态，将其设为 1
        这样即可在电话响铃时在 Incoming Call 状态显示来电图像。
  2. 创建动画 (Animation) 或动画剪辑 (Animation Clip) 资源。使用此动画更改在上一步创建的状态中使用的属性值。请参阅创建关键帧动画。
    例如，在素材库 (Library) > 动画 (Animations) > 动画数据 (Animation Data) 中创建为节点的不透明度 (Opacity) 属性实现动画效果的动画 (Animation)。使用此动画让节点在进入 Incoming Call 状态时闪烁三次。
  3. 在工程 (Project) 中选择您在第一步中创建的节点并在状态工具 (State Tools) 中点击任何 -> 任何 (Any -> Any) 以打开状态迁移编辑器 (State Transition Editor)。
  4. 在状态迁移编辑器 (State Transition Editor) 中设置：
    • 起始状态 (Start State) 为您要从该迁移实现动画化的状态
      例如，将其设为Default。
    • 结束状态 (End State) 为您要动画化到该迁移的状态
      例如，将其设为Incoming Call。
  5. 在状态迁移编辑器 (State Transition Editor) 底部，点击 添加迁移动画，并在迁移动画 (Transition Animations) 中设置：
    • 属性类型 (Property Type) 为要实现动画效果的属性
      例如，将其设为不透明度 (Opacity)。
      Kanzi Studio 在属性类型 (Property Type) 下拉菜单中仅显示在起始状态 (Start State) 和结束状态 (End State) 状态具有不同值的属性。
    • 缓动函数 (Easing Function) 为自定义 (Custom)
    • 自定义动画 (Custom Animation) 设为您之前在此过程创建的动画
      例如，将其设为动画 (Animation)。

    6. 要在预览 (Preview) 中播放迁移动画，在状态工具 (State Tools) 中点击迁移旁的。

配置缓动函数

您可以在状态迁移编辑器 (State Transition Editor) 中配置部分缓动函数以定义用于设置迁移曲线的函数中的值。

在状态迁移编辑器 (State Transition Editor) 中可以配置的缓动函数包括：

另请参阅

状态机

使用状态机

教程：创建切换按钮

使用按钮 (Button) 节点

创建关键帧动画