【鸿蒙实战开发】ArkUI动画（页面转场动画）

前言

页面转场动画是指在应用程序中，当用户导航到另一个页面时，使用动画效果来过渡页面之间的切换。这样做的目的是为了提升用户体验，使页面之间的切换更加平滑和有趣。

常见的页面转场动画包括淡入淡出、滑动、翻转、缩放等效果。通过使用这些动画效果，可以给用户一种流畅的感觉，让页面之间的切换更加自然。

在实现页面转场动画时，可以根据具体的需求和设计来选择合适的转场效果，并结合页面的布局和内容来调整动画效果的细节。

页面转场动画是一种通过使用动画效果来过渡页面切换的方式，旨在提升用户体验，使页面之间的切换更加平滑和有趣。

一、页面转场动画

1.type配置

PageTransitionEnter和PageTransitionExit的接口为：

PageTransitionEnter({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number})

PageTransitionExit({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number})

在HarmonyOS中，PageTransitionEnter和PageTransitionExit是用于控制页面切换动画的参数。它们分别表示页面进入和退出时的动画。

1.type（动画类型）：表示动画的类型，可以取以下几种值：
●NONE：表示对页面栈的push、pop操作均生效，type的默认值为RouteType.None。
●Push：表示仅对页面栈的push操作生效。
●Pop：表示仅对页面栈的pop操作生效。
2.duration（动画时长）：表示动画的时长，单位为毫秒。

3.curve（动画曲线）：表示动画的变化曲线。

4.delay（动画延迟）：表示动画的延迟时间，单位为毫秒。

页面A

// page A
pageTransition() {
  // 定义页面进入时的效果，从右侧滑入，时长为1200ms，页面栈发生push操作时该效果才生效
  PageTransitionEnter({ type: RouteType.Push, duration: 1200 })
    .slide(SlideEffect.Right)
  // 定义页面进入时的效果，从左侧滑入，时长为1200ms，页面栈发生pop操作时该效果才生效
  PageTransitionEnter({ type: RouteType.Pop, duration: 1200 })
    .slide(SlideEffect.Left)
  // 定义页面退出时的效果，向左侧滑出，时长为1000ms，页面栈发生push操作时该效果才生效
  PageTransitionExit({ type: RouteType.Push, duration: 1000 })
    .slide(SlideEffect.Left)
  // 定义页面退出时的效果，向右侧滑出，时长为1