如何实现上下切换的页面间跳转动画

可以使用pageTransition函数来实现页面转场效果，通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果，将其slide属性设置为SlideEffect.Bottom，则页面入场时从下边划入，出场时滑出到下边，即可实现上下切换效果。参考代码如下：

// Index.ets 
@Entry 
@Component 
struct PageTransition1 { 
  build() { 
    Stack({ alignContent: Alignment.Bottom }) { 
      Navigator({ target: 'pages/Page1'}) { 
        Image($r('app.media.ic_banner01')).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) 
  } 
}

// Page1.ets

@Entry 
@Component 
struct PageTransition2 { 
  build() { 
    Stack({ alignContent: Alignment.Bottom }) { 
      Navigator({ target: 'pages/Index'}) { 
        Image($r('app.media.ic_banner02')).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) 
  } 
}