教程:在活动之间动画过渡

在本教程中,您将学习如何在 Activities 之间创建动画过渡。

视频显示教程的结果。

../../_images/preview-show-activity-transitions-with-scaling-and-easing-function.gif

本教程假定您了解使用 Kanzi Studio 的基础知识。熟悉 Kanzi Studio 的最佳入门点是:

获取教程

要获取本教程,请在 Kanzi Studio Quick Start 窗口中点击 Examples。在 Activity transitions 教程旁边,点击 下载。

Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。您可以找到:

  • 位于 <KanziWorkspace>/Tutorials/Activity transitions/Start/Tool_project 目录中的教程起点项目。

    要了解此项目的内容以及如何创建此类项目,请参阅 教程:构建应用程序 UI。

  • 位于 <KanziWorkspace>/Tutorials/Activity transitions/Completed 目录中的已完成教程。

在活动之间添加过渡

活动使用 State Manager 来定义状态更改的过渡。如果您不创建状态管理器并定义过渡,活动状态之间的过渡将是即时的。

在本节中,您将创建一个在 Activities 之间的动画过渡。

要在活动之间添加过渡:

  1. 在 Kanzi Studio Quick Start 窗口中,点击 Examples。在 Activity transitions 教程旁边,点击 Open 并选择 Start project。

    在 Activity Browser 中,Cluster > Gauge View > GaugeViewActivityHost > LeftArea > MaximizedMinimizedSwitcher > MaximizedLeft > MaximizedWidget 独占活动主机包含显示电池、音乐和导航小部件的活动。

    在 Preview 中,您可以通过单击左侧的按钮在活动之间切换。活动之间的过渡是即时的。

    ../../_images/activity-browser-exclusive-activity-host-maximized-widget.png ../../_images/preview-start.gif
  2. 在 Activity Browser 中,右键单击 WidgetBatteryMaximized 活动,选择 Add Transition > Flip Horizontal,并将动画状态管理器命名为 Maximized Widget State Manager。

    Flip Horizontal 过渡动画围绕其中心水平旋转一个 Activity。

    ../../_images/activity-browser-add-transition1.png ../../_images/activity-browser-add-transition-animation-state-manager-name.png

    当您运行此命令时,Kanzi Studio:

    • 在 Library > State Managers 中创建具有 ActivityState 状态组的 Maximized Widget State Manager,其 Controller Property 是 Activity Status 属性。状态组包含映射到活动不同状态的状态。

      例如,在 Inactive 状态下,Activity 围绕其中心沿 y 轴旋转 180 度。

      ../../_images/library-state-managers.png ../../_images/properties-perspective-transformation-inactive.png
    • 在 Prefabs > WidgetBatteryMaximized 活动预设中,将 Resources > State Manager 属性设置为 Maximized Widget State Manager。

      ../../_images/properties-state-manager.png
  3. 从 Library > State Managers 中,将 Maximized Widget State Manager 拖到 Prefabs 上,并将其放置在这些 Activity 预设上:

    • WidgetMusicMaximized

    • WidgetNavigationMaximized

    通过这种方式,您可以将 Maximized Widget State Manager 状态管理器添加到 MaximizedWidget 独占活动主机中的所有活动中。您使用相同的状态管理器将相同的过渡动画应用于独占活动主机中的所有活动。

    ../../_images/library-prefabs-set-state-manager-music.png ../../_images/library-prefabs-set-state-manager-navi.png

现在,当在 Preview 中单击左侧的按钮以在活动之间切换时,Kanzi 对它们应用动画水平翻转过渡效果。

../../_images/preview-show-activity-transitions.gif

调整过渡以动画化多个属性。

在上一节中,您添加了一个预定义的 Activity 过渡。当 Kanzi 在 Activity 之间动画过渡时,每个 Activity 都会经历以下状态集之一:

  • Inactive –> Activating –> Active

  • Active –> Deactivating –> Inactive

您可以设置 Kanzi 在这些状态中的每个状态下应用于活动的属性值。

在本节中,您:

  • 在过渡期间为 Activities 的不透明度设置动画。

  • 使 Activities 同时水平翻转并缩小,然后恢复到其原始大小。

要调整过渡以动画化多个属性:

  1. 在 Library > State Managers > Maximized Widget State Manager > ActivityState 状态组中,选择 Inactive 状态。在 Properties 中:

    • 在 Perspective Transformation 属性中,将 Scale 属性字段设置为 0.5。

    • 添加并将 Node > Opacity 属性设置为 0。

    这样,在 Inactive 状态下,您将活动的尺寸缩小到原始值的一半,并使活动完全透明。

    ../../_images/library-state-managers-activity-state-inactive.png ../../_images/properties-opacity-inactive.png
  2. 选择 Active 状态。在 Properties 中,添加并设置 Node > Opacity 属性为 1。

    这样,在 Active 状态下,您可以使活动不透明。

    ../../_images/library-state-managers-activity-state-active.png ../../_images/properties-opacity-active.png
  3. 选择 Activating 和 Deactivating 状态。在 Properties:

    • 在 Perspective Transformation 属性中,将 Scale 属性字段设置为 0.5。

    • 添加并设置 Node > Opacity 属性为 0.2。

    这样,在 Activating 和 Deactivating 状态下,您将活动的尺寸缩小到原始值的一半,并使活动看起来褪色。

    ../../_images/properties-perspective-transformation-scale-activating.png ../../_images/properties-perspective-transformation-scale-deactivating.png

现在,当您在活动之间切换时,过渡动画:

  • 水平翻转活动。

  • 将活动缩小并恢复到其原始大小。

  • 淡出正在停用的 Activity 并淡入正在激活的 Activity。

../../_images/preview-show-activity-transitions-with-scaling.gif

调整过渡的曲线和速度。

在 Kanzi 中,您可以使用不同的缓动函数来创建更逼真的过渡动画,从而提供更愉悦的用户体验。缓动函数定义了动画曲线,即属性值变化的速率。默认情况下,Kanzi 使用线性缓动函数。

在本节中,您首先使用不同的缓动函数为 Activities 的大小变化制作动画。然后,您调整过渡动画的速度。

要调整过渡的曲线和速度:

  1. 在 Library > State Managers > Maximized Widget State Manager 中,选择 ActivityState 状态组。在 Properties 中,点击 Activating –> Active 状态转换。

    ../../_images/library-state-managers-activity-state.png ../../_images/properties-state-transitions-activating-active.png
  2. 在 State Transition Settings 中,单击 添加过渡动画 以添加过渡动画并设置:

    • Property Type 到 Perspective Transformation

    • Easing Mode 到 Ease out

      通过这种方式,您可以使动画开始时速度很快,然后减速。

      Ease out 缓动模式与默认的 Ease in 缓动模式相反,默认模式使动画开始时缓慢,然后加速。

    • Easing Function 到 Back

      Back 缓动函数使动画超过目标值然后返回,从而在动画中创建弹跳效果。

    • 将 Amplitude 设置为 0.5。

      通过这种方式,您可以设置 Back 缓动函数使动画超过目标值的程度。

    单击 Save。

    通过此过渡动画,您可以使激活的 Activity 的大小超过原始大小,然后在 Active 状态下返回到原始大小。Kanzi 将默认的线性过渡动画应用于 Activity 的不透明度和旋转。

    ../../_images/state-transition-settings-add-transition-animation-perspective-transformation.png ../../_images/preview-show-activity-transitions-with-scaling-easing-duration500.gif
  3. 要调整过渡动画的速度:

    1. 在 Properties 中,点击 Inactive –> Activating 状态转换。在 State Transition Settings 中,将 Duration (ms) 设置为 200 并点击 Save。

      通过这种方式,您将从 Inactive 状态到 Activating 状态的过渡长度设置为200毫秒。

      ../../_images/properties-state-transitions-click.png ../../_images/state-transition-settings-inactive-activating.png
    2. 为这些状态转换重复上一步:

      • Activating –> Active

      • Active –> Deactivating

      • Deactivating –> Inactive

    现在,当您在活动之间切换时,Kanzi 会以更高的速度为过渡动画。

    ../../_images/preview-show-activity-transitions-with-scaling-easing.gif

接下来该做什么?

在本教程中,您学习了如何使用活动过渡动画。

要继续学习如何在 Kanzi 中使用动画,您可以:

另请参阅

要了解有关活动系统的更多信息,请参阅 活动。

要了解有关 Kanzi 中可用缓动函数的更多信息,请参阅 缓动函数。