鸿蒙学习 - 转场动画pageTransition

首页： 核心代码在pageTransition里面设置push和pop的具体效果就行。

import router from '@ohos.router'

@Entry
@Component
struct Index {
  build() {

    Column(){
      Text("首页").fontSize(100)
      Button("push").onClick(() => {
        router.pushUrl({
          url: "pages/Second"
        })
      })
    }
  }

  // 转场动画
  pageTransition() {
    // 退出的时候的效果
    PageTransitionExit({ type: RouteType.Push, duration:3000 }).onExit((type: RouteType, progress: number) => {

    }).slide(SlideEffect.Left)
   // 进入时候的效果
    PageTransitionEnter({ type:RouteType.Pop, duration:3000 }).onEnter((type: RouteType, progress: number) => {

    }).slide(SlideEffect.Left)

  }

}

第二页

import router from '@ohos.router'

@Entry
@Component
struct Second {
  build() {

    Column(){
      Text("第二页").fontSize(100)
      Button("pop").onClick(() => {
        router.back({
          url: "pages/Index"
        }
        )
      })
    }
  }

  // 转场动画
  pageTransition() {
    // 退出的时候的效果
    PageTransitionExit({ type: RouteType.Pop, duration:3000 }).onExit((type: RouteType, progress: number) => {

    }).slide(SlideEffect.Right)
    // 进入时候的效果
    PageTransitionEnter({ type:RouteType.Push, duration:3000 }).onEnter((type: RouteType, progress: number) => {

    }).slide(SlideEffect.Right)

  }

}