使用状态迁移

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

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

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

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

  1. 创建一个节点并将节点设置为使用状态管理器。请参阅 使用状态机 或 教程:创建一个切换按钮。

    例如,创建切换按钮和拥有包含状态 On 和 Off 的状态组的状态管理器。

  2. 在 State Tools 中,单击 Transition Editor 以打开 State Transition Editor。

    要创建新的过渡,请在现有过渡下单击 + Create Transition。

    ../../_images/open-state-transition-editor1.png
  3. 当您第一次打开 State Transition Editor 时,它会显示该状态组中所有状态之间使用的过渡。将鼠标指针移动到 image0 上以查看过渡的详细信息。

    ../../_images/set-transition-between-any-to-any-state.png
  4. 在弹出窗口中进行以下设置:

    • Duration 到转换的长度(以毫秒为单位)。

      要设置过渡的持续时间,可以在 Duration 区域中单击并拖动,或输入新值。

    • Allow interrupt 或 Always full time 设置 Kanzi 如何处理过渡的中断:

      • Always full time 使用 Duration 中设置的整个时间在中断发生后过渡到该状态。

      • Allow interrupt 仅使用在 Duration 中设置的剩余时间来过渡到中断发生后的状态。

    • Configure Animations 使您能够进一步定义过渡的细节。在 State Transition Settings 窗口中设置:

      • 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)

        缓入缓出

        Bounce

        缓入 (Ease in)

        缓出 (Ease out)

        缓入缓出

        Circle

        缓入 (Ease in)

        缓出 (Ease out)

        缓入缓出

        Cubic

        缓入 (Ease in)

        缓出 (Ease out)

        缓入缓出

        Elastic

        缓入 (Ease in)

        缓出 (Ease out)

        缓入缓出

        Exponential

        缓入 (Ease in)

        缓出 (Ease out)

        缓入缓出

        Linear

        缓入,缓出,缓入缓出

        Power

        缓入 (Ease in)

        缓出 (Ease out)

        缓入缓出

        Quadratic

        缓入 (Ease in)

        缓出 (Ease out)

        缓入缓出

        Quartic

        缓入 (Ease in)

        缓出 (Ease out)

        缓入缓出

        Quintic

        缓入 (Ease in)

        缓出 (Ease out)

        缓入缓出

        Sine

        缓入 (Ease in)

        缓出 (Ease out)

        缓入缓出

        Smoother step

        缓入,缓出

        缓入缓出

        平滑步进

        缓入,缓出

        缓入缓出

        步骤

        缓入,缓出

        缓入缓出

      • Easing Mode 定义了如何将缓动函数应用于过渡:

        • Ease in 适用于过渡缓动函数。

        • Ease out 适用于过渡缓动函数的负值。

        • Ease in-out 适用于过渡的前半部分的缓动函数本身,以及过渡的后半部分的缓动函数的负值。

      • Transition Animations 使您能够为过渡使用自定义动画。请参阅 在状态迁移中使用自定义缓动函数。

      ../../_images/state-transition-editor-window.png

设置特定状态之间的迁移

您可以在特定状态之间设置自定义过渡。您可以将状态添加到 State Transition Editor 画布,并配置它们之间的过渡设置。

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

  1. 在 State Transition Editor 中右键单击,选择 Add State To Canvas,然后选择您要为其设置转换的状态。

    要显示所有状态,右键单击并选择 Add All States To Canvas。

    ../../_images/add-state-to-canvas.png
  2. 单击状态以选择它,然后单击 Default 转换以设置 Custom 转换。

    ../../_images/state-transition-editor-default-transitions.png
  3. 将鼠标指针移动到 image1 转换上,以查看转换的详细信息。

    在 State Tools 中,您可以看到在 State Transition Editor 中定义的转换。要编辑转换的设置,请单击该转换。

    ../../_images/select-a-transition-in-state-tools.png ../../_images/click-transition-to-open-editor.png

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

您可以使用动画为状态迁移定义自定义缓动函数。例如,定义一个自定义缓动函数,以便在进入该状态时使电话呼叫警报闪烁。

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

  1. 创建或选择使用状态管理器的节点。请参阅 使用状态机 或 教程:创建一个切换按钮。

    例如:

    1. 创建一个 Image 节点,以显示提醒用户有来电的图像。

      ../../_images/incoming-call1.png ../../_images/image-in-project.png ../../_images/image-incoming-call.png
    2. 为 Image 节点创建一个状态管理器,该管理器具有一个包含状态 Default 和 Incoming Call 的状态组,并为每个状态添加和设置 Image 节点的 Opacity 属性的值:

      • 对于 Default 状态,将其设置为 0。这样,当电话没有响铃时,您可以在 Default 状态下隐藏来电图像。

      • 对于 Incoming Call 状态,将其设置为 1。这样,当电话响铃时,您可以在 Incoming Call 状态下显示来电图像。

      ../../_images/image-state-manager.png
  2. 创建一个 Animation 或 Animation Clip 资源。您使用此动画来更改您在上一步中创建的状态中使用的属性的值。请参阅 创建关键帧动画。

    例如:在 Library > Animations > Animation Data 中创建一个 Animation,用于动画化节点的 Opacity 属性。您使用此动画使节点在进入 Incoming Call 状态时闪烁三次。

    ../../_images/animation-data-animation-library.png ../../_images/animation-target-property-opacity.png ../../_images/animation-clip-editor-opacity-animation.png
  3. 在 Node Tree 中选择您在第一步中创建的节点,并在 State Tools 中点击 Any -> Any 以打开 State Transition Settings。

    ../../_images/state-tools-click-any-to-any.png
  4. 在 State Transition Settings 集中:

    • Start State 到您想要从中进行动画过渡的状态。

      例如,将其设为 Default。

    • End State 到您想要动画过渡到的状态。

      例如,将其设为 Incoming Call。

    ../../_images/set-start-and-end-state.png
  5. 在 State Transition Settings 的底部,点击 image2 以添加过渡动画,并在 Transition Animations 中设置:

    • 将 Property Type 到您想要动画化的属性。

      例如,将其设为 Opacity。

      Kanzi Studio 在 Property Type 下拉菜单中仅显示在 Start State 和 End State 状态下具有不同值的属性。

    • Easing Function 到 Custom

    • 将您在此过程的早期创建的动画应用到 Custom Animation。

      例如,将其设为 Animation。

    ../../_images/transition-animation-custom.png

配置缓动函数

您可以在 State Transition Settings 中配置一些缓动函数,以定义设置过渡曲线的函数中的值。

您可以在 State Transition Settings 中配置的缓动函数有:

  • Back

    • 使用 Amplitude 属性设置过渡曲线的振幅或深度。

    ../../_images/back-amplitude.png
  • Elastic

    • 使用 Oscillations 属性设置过渡曲线中的振荡次数。

    • 使用 Springiness 属性设置过渡曲线中振荡的弹性。

    ../../_images/elastic-oscillations.png
  • Exponential

    • 使用 Exponent 属性设置过渡曲线相乘的幂指数。

    ../../_images/exponential-exponent.png
  • Power

    • 使用 Power 属性设置过渡曲线加速的速度。

    ../../_images/power.png

在状态之间交叉淡化动画

当状态组中的各个状态包含同名的 Animation Player 节点组件时,State Manager 会在 Transition 持续期间内自动在传出动画和传入动画之间进行交叉淡化。无论 Transition 上配置了何种缓动函数,交叉淡化都使用线性混合。

请参阅 混合动画。

另请参阅

状态机 (State Manager)

使用状态机

混合动画

教程:创建一个切换按钮

使用 Button 节点

创建关键帧动画