作者简介，愚公搬代码
《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，程序员宅基地专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，51CTO博客专家等。
《近期荣誉》：2023年华为云十佳博主，2022年程序员宅基地之星TOP2，2022年华为云十佳博主等。
《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎 点赞评论收藏

---

前言

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

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

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

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

一、页面转场动画

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)
  // 定义页面退出时的效果，向右侧滑出，时长为1000ms，页面栈发生pop操作时该效果才生效
  PageTransitionExit({
     type: RouteType.Pop, duration: 1000 })
    .slide(SlideEffect.Right)
}

页面B

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

通过设置页面转场的时长为0，可使该页面无页面转场动画。

2.场景示例

页面A

// PageTransitionSrc1
import router from '@ohos.router';
@Entry
@Component
struct PageTransitionSrc1 {
    
  build() {
    
    Column() {
    
      Image($r('app.media.img_2'))
        .width('90%')
        .height('80%')
        .objectFit(ImageFit.Fill)
        .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成
        .margin(30)

      Row({
     space: 10 }) {
    
        Button("pushUrl")
          .onClick(() => {
    
            // 路由到下一个页面，push操作
            router.pushUrl({
     url: 'pages/myTest/pageTransitionDst1' });
          })
        Button("back")
          .onClick(() => {
    
            // 返回到上一页面，相当于pop操作
            router.back();
          })
      }.justifyContent(FlexAlign.Center)
    }
    .width("100%").height("100%")
    .alignItems(HorizontalAlign.Center)
  }

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

页面B

// PageTransitionDst1
import router from '@ohos.router';
@Entry
@Component
struct PageTransitionDst1 {
    
  build() {
    
    Column() {
    
      Image($r('app.media.img_2'))
        .width('90%')
        .height('80%')
        .objectFit(ImageFit.Fill)
        .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成
        .margin(30)

      Row({
     space: 10 }) {
    
        Button("pushUrl")
          .onClick(() => {
    
            // 路由到下一页面，push操作
            router.pushUrl({
     url: 'pages/myTest/pageTransitionSrc1' });
          })
        Button("back")
          .onClick(() => {
    
            // 返回到上一页面，相当于pop操作
            router.back();
          })
      }.justifyContent(FlexAlign.Center)
    }
    .width("100%").height("100%")
    .alignItems(HorizontalAlign.Center)
  }

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

---

感谢：给读者的一封信

亲爱的读者，

我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。

再次感谢您的阅读和支持！

最诚挚的问候， “愚公搬代码”