屏幕切换动画

你可以为屏幕之间的切换添加动画效果——控制一个屏幕如何消失、新屏幕如何出现。可用的动画类型取决于具体的导航操作:

  • Navigate to Screen:打开动作设置,从完整动画类型列表中选择。不同步骤可以使用不同的过渡效果。
  • Navigate Next:仅支持默认的推入动画。
  • Navigate back:以反向播放到达当前屏幕时使用的过渡导航动画,且无延迟。如果到达时没有动画,返回时也不会有动画。
  • Close Flow:本身没有动画。流程与原生 UI 之间的过渡由您的应用负责处理。

动画类型

Navigate to Screen 操作的 Animation 下拉菜单提供五个选项:

  • Push:新页面从一侧滑入,同时将当前页面推出另一侧。
  • Slide in:新页面以滑动加淡入的方式覆盖在当前页面上方,当前页面向同一方向小幅移动。
  • Slide out:当前页面滑出并淡出,露出其下方的新页面。
  • Fade through:新页面以淡入方式覆盖在当前页面上方。
  • None:新页面直接替换当前页面,无任何过渡效果。

自定义过渡效果

您只能在 Navigate to Screen 操作中更改动画效果。

  1. 选择触发导航动作的元素。
  2. 在 Interactions 面板中,点击导航动作。
  3. 如果动作为 Navigate Next,从 Action 下拉菜单中选择 Navigate to Screen,然后将下一个屏幕选为 Destination。
  4. 从 Animation 下拉菜单中选择动画效果。
  5. 如果该动画有 Direction、Easing 或 Duration 设置,请相应调整。
  6. 若希望在动画开始前保持当前屏幕可见,请在 Delay 字段中设置一个数值。例如,可以通过延迟让加载屏幕保持显示几秒钟。列在导航动作之后的动作不会等待延迟结束。
  7. 要在自己的屏幕上预览过渡效果,请在设备上测试流程。