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

第一个页面展示一张图片，点击图片，切换到第二个页面。如何实现上下切换的页面间跳转动画？

第一个页面：

1. // Index.ets
   
2. @Entry
   
3. @Component
   
4. struct PageTransition1 {
   
5.   build() {
   
6.     Stack({alignContent: Alignment.Bottom}) {
   
7.       Navigator({ target: 'pages/Page6'}) {
   
8.         Image($r('app.media.pic4')).width('100%').height(200) // 图片存放在media文件夹下
   
9.       }
   
10.     }.height('100%').width('100%')
    
11.   }
    
12. }
    

复制代码

第二个页面：

1. // Page1.ets
   
2. @Entry
   
3. @Component
   
4. struct PageTransition2 {
   
5.   build() {
   
6.     Stack({alignContent: Alignment.Bottom}) {
   
7.       Navigator({ target: 'pages/Page5'}) {
   
8.         Image($r('app.media.1')).width('100%').height(200) // 图片存放在media文件夹下
   
9.       }
   
10.     }.height('100%').width('100%')
    
11.   }
    
12. }
    

复制代码

【运行环境】

硬件：rk3568；  ROM: 3.2  Beta5；  API 9

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

分别在两个页面加上pageTransition函数:

pageTransition() {

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

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

  }

参考链接：页面转场动画