ArkUI 中的页面间转场（pageTransition）是一种用于在路由切换时自定义页面入场和退场动效的技术，旨在为用户提供更丰富的视觉体验。通过使用 Navigation 组件和模态转场，并结合 PageTransitionEnter 和 PageTransitionExit 接口，开发者可以灵活地设置动画效果和回调函数，从而实现多样化的页面转场效果。

页面间转场的基本概念

页面间转场是指在用户导航从一个页面到另一个页面时，通过动画效果来增强用户体验的过程。这种转场效果不仅能够提升应用的视觉吸引力，还能帮助用户更好地理解页面之间的关系和导航流程。

在 ArkUI 中，页面间转场主要通过 pageTransition 函数来实现。该函数允许开发者配置页面进入和退出的动画效果，从而实现自定义的页面转场效果。

页面转场的基本用法

页面转场的基本用法包括定义页面进入和退出的动画效果。开发者可以通过 PageTransitionEnter 和 PageTransitionExit 接口来设置这些动画效果。以下是一个基本的示例：

// Page1.ets
@Entry
@Component
struct PageTransition2 {
  build() {
    Stack({ alignContent: Alignment.Top }) {
      Navigator({ target: 'pages/basic_knowledge/tmp' }) {
        Image($r('app.media.cat'))
          .width('100%')
          .height(200)
        // 图片存放在media文件夹下
      }
    }.height('100%').width('100%')
  }

  pageTransition() {
    PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
    PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
  }
}

// Index.ets
@Entry
@Component
struct PageTransition1 {
  build() {
    Stack({ alignContent: Alignment.Top }) {
      Navigator({ target: 'pages/basic_knowledge/tmp2' }) {
        Image($r('app.media.ic_widget')).width('100%').height(200)
        // 图片存放在media文件夹下
      }
    }.height('100%').width('100%')
  }

  pageTransition() {
    PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
    PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
  }
}

在上述示例中，PageTransition1 和 PageTransition2 分别定义了页面进入和退出的动画效果。通过 slide 方法，页面在进入和退出时会从底部滑入和滑出。

页面转场的详细配置

页面转场的详细配置包括设置动画的持续时间、曲线、延迟时间等参数。开发者可以根据具体需求进行调整，以实现最佳的视觉效果。

动画持续时间

动画持续时间是指动画从开始到结束所需的时间。开发者可以通过 duration 参数来设置动画的持续时间。例如：

PageTransitionEnter({ duration: 1000 }).slide(SlideEffect.Bottom) 

在上述示例中，页面进入的动画持续时间为 1000 毫秒。

动画曲线

动画曲线是指动画在播放过程中速度的变化方式。ArkUI 提供了多种预设的动画曲线，开发者可以通过 curve 参数来选择合适的动画曲线。例如：

PageTransitionEnter({ duration: 1000, curve: Curve.Ease }).slide(SlideEffect.Bottom) 

在上述示例中，页面进入的动画使用了 Ease 曲线，动画在开始和结束时速度较慢，中间速度较快。

动画延迟时间

动画延迟时间是指动画在开始之前等待的时间。开发者可以通过 delay 参数来设置动画的延迟时间。例如：

PageTransitionEnter({ duration: 1000, delay: 500 }).slide(SlideEffect.Bottom) 

在上述示例中，页面进入的动画在开始之前会等待 500 毫秒。

页面转场的回调函数

页面转场的回调函数允许开发者在动画开始、结束、暂停、取消等关键节点执行特定的操作。ArkUI 提供了 onEnter 和 onExit 回调函数，开发者可以通过这些回调函数来实现自定义的动画逻辑。

onEnter 回调函数

onEnter 回调函数在页面进入动画开始时被调用。开发者可以在该回调函数中执行一些初始化操作或动画逻辑。例如：

PageTransitionEnter({ duration: 1000 }).onEnter((type: RouteType, progress: number) => { if (type == RouteType.Push || type == RouteType.Pop) { this.scale1 = progress this.opacity1 = progress } }) 

在上述示例中，onEnter 回调函数根据动画的进度更新了组件的缩放和透明度。

onExit 回调函数

onExit 回调函数在页面退出动画开始时被调用。开发者可以在该回调函数中执行一些清理操作或动画逻辑。例如：

PageTransitionExit({ duration: 1000 }).onExit((type: RouteType, progress: number) => { if (type == RouteType.Push) { this.scale1 = 1 - progress this.opacity1 = 1 - progress } }) 

在上述示例中，onExit 回调函数根据动画的进度更新了组件的缩放和透明度。

页面转场的类型

ArkUI 提供了多种页面转场类型，开发者可以根据具体需求选择合适的转场类型。常见的页面转场类型包括：

Slide Effect

Slide Effect 是最常见的页面转场类型之一，页面在进入和退出时会从屏幕的一侧滑入或滑出。例如：

PageTransitionEnter({ duration: 1000 }).slide(SlideEffect.Right) PageTransitionExit({ duration: 1000 }).slide(SlideEffect.Left) 

在上述示例中，页面进入时从右侧滑入，退出时从左侧滑出。

Opacity Effect

Opacity Effect 是另一种常见的页面转场类型，页面在进入和退出时会逐渐改变透明度。例如：

PageTransitionEnter({ duration: 1000 }).opacity(0).to(1) PageTransitionExit({ duration: 1000 }).opacity(1).to(0) 

在上述示例中，页面进入时透明度从 0 渐变到 1，退出时透明度从 1 渐变到 0。

Scale Effect

Scale Effect 是页面转场类型之一，页面在进入和退出时会逐渐改变缩放比例。例如：

PageTransitionEnter({ duration: 1000 }).scale(0.5).to(1) PageTransitionExit({ duration: 1000 }).scale(1).to(0.5) 

在上述示例中，页面进入时缩放比例从 0.5 渐变到 1，退出时缩放比例从 1 渐变到 0.5。

页面转场的组合使用

开发者可以将多种页面转场效果组合使用，以实现更复杂的动画效果。例如，可以同时使用 Slide Effect 和 Opacity Effect 来实现页面在进入和退出时既有滑动又有透明度变化的效果。

PageTransitionEnter({ duration: 1000 }).slide(SlideEffect.Right).opacity(0).to(1) PageTransitionExit({ duration: 1000 }).slide(SlideEffect.Left).opacity(1).to(0) 

在上述示例中，页面进入时从右侧滑入并逐渐变为不透明，退出时从左侧滑出并逐渐变为透明。

页面转场的自定义实现

开发者可以根据具体需求自定义页面转场效果。例如，可以实现页面在进入和退出时有旋转效果。

PageTransitionEnter({ duration: 1000 }).rotate(90).to(0) PageTransitionExit({ duration: 1000 }).rotate(0).to(90) 

在上述示例中，页面进入时从旋转 90 度渐变到不旋转，退出时从不旋转渐变到旋转 90 度。

页面转场的最佳实践

在实际开发中，开发者应遵循一些最佳实践来确保页面转场效果的流畅性和用户体验的一致性。以下是一些最佳实践建议：

保持动画简洁

过多的动画效果可能会分散用户的注意力，影响用户体验。建议保持动画简洁明了，避免过于复杂的动画效果。

保持动画一致性

在整个应用中保持动画效果的一致性，可以帮助用户更好地理解和预测页面之间的导航流程。建议在整个应用中使用统一的动画风格和效果。

测试动画性能

动画效果的流畅性对用户体验至关重要。建议在不同的设备和网络环境下测试动画性能，确保动画在各种条件下都能流畅运行。

使用回调函数

合理使用回调函数可以在动画开始、结束、暂停、取消等关键节点执行特定的操作，从而实现更复杂的动画逻辑。建议充分利用回调函数来实现自定义的动画效果。

结论

ArkUI 中的页面间转场（pageTransition）是一种强大的技术，可以帮助开发者实现丰富多样的页面转场效果，提升用户体验。通过灵活配置动画效果和回调函数，开发者可以实现自定义的页面转场效果，从而为用户提供更加流畅和愉悦的视觉体验。希望本文能够帮助开发者更好地理解和使用 ArkUI 中的页面间转场技术，开发出更加出色的应用。

----

以上