HarmonyOS 页面跳转动画？

Question

ohos.router是否支持从底部玩上弹出页面的动画，默认的好像都是从右往左弹入

登录模块的页面希望弹出页面是从底部往上弹出

Answer 1

您可以使用“页面转场动画”，参考链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-page-transition-animation-0000001885919517-V5

demo如下：

//page1

import { router } from '@kit.ArkUI'; 
@Entry 
@Component 
struct RouterPage1 { 
  @State message: string = 'Hello World'; 
  build() { 
    RelativeContainer() { 
      Text(this.message) 
        .id('HelloWorld') 
        .fontSize(50) 
        .fontWeight(FontWeight.Bold) 
        .alignRules({ 
          center: { anchor: '__container__', align: VerticalAlign.Center }, 
          middle: { anchor: '__container__', align: HorizontalAlign.Center } 
        }) 
      Button('点击跳转').onClick(()=>{ 
        router.pushUrl({ 
          url:'pages/irRouter/RouterPage2' 
        }) 
      }) 
    } 
    .height('100%') 
    .width('100%') 
    .backgroundColor(Color.Red) 
  } 
 
  pageTransition() { 
    PageTransitionEnter({type:RouteType.None, duration: 500}) 
      .slide(SlideEffect.Bottom) 
    PageTransitionExit({type:RouteType.None, duration: 500}) 
      .slide(SlideEffect.Top) 
  } 
}

//page2

@Entry 
@Component 
struct RouterPage2 { 
  @State message: string = 'Hello World'; 
  build() { 
    RelativeContainer() { 
      Text(this.message) 
        .id('HelloWorld') 
        .fontSize(50) 
        .fontWeight(FontWeight.Bold) 
        .alignRules({ 
          center: { anchor: '__container__', align: VerticalAlign.Center }, 
          middle: { anchor: '__container__', align: HorizontalAlign.Center } 
        }) 
    } 
    .height('100%') 
    .width('100%') 
    .backgroundColor(Color.Green) 
  } 
  pageTransition() { 
    PageTransitionEnter({type:RouteType.None, duration: 500}) 
      .slide(SlideEffect.Bottom) 
    PageTransitionExit({type:RouteType.None, duration: 500}) 
      .slide(SlideEffect.Top) 
  } 
}