HarmonyOS鸿蒙Next中如何实现上下切换的页面间跳转动画

HarmonyOS鸿蒙Next中如何实现上下切换的页面间跳转动画 解决措施

可以使用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) 
  } 
}

参考链接

页面间转场