ArkTS-页面转场动画

页面转场动画

在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效

两个页面间发生跳转，一个页面消失，另一个页面出现，这时可以配置各自页面的页面转场参数实现自定义的页面转场效果。页面转场效果写在pageTransition函数中，通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果。

TransitionPage1

import router from '@ohos.router'
@Entry
@Component
struct TransitionPage1 {
  @State scaleValue: number = 1
  @State opacityValue: number = 1

  build() {
    Column() {
      Image($r('app.media.pic1'))
        .width('100%')
        .height('100%')
        .scale({ x: this.scaleValue })
        .opacity(this.opacityValue)
    }
    .width('100%')
    .height('100%')
    .onClick(() => {
      router.pushUrl({
        url:'pages/TransitionPage2'
      })
    })
  }

  pageTransition() {
    PageTransitionEnter({}).onEnter((type: RouteType, progress: number) => {
      this.scaleValue = 1
      this.opacityValue = progress
    })
    PageTransitionExit({}).onExit((type: RouteType, progress: number) => {
      this.scaleValue = 1 - progress
      this.opacityValue = 1 - progress
    })
  }
}

TransitionPage2

import router from '@ohos.router'
@Entry
@Component
struct TransitionPage2 {
  @State scaleValue: number = 1
  @State opacityValue: number = 1

  build() {
    Column() {
      Image($r('app.media.pic2'))
        .width('100%')
        .height('100%')
        .scale({ x: this.scaleValue })
        .opacity(this.opacityValue)
    }
    .width('100%')
    .height('100%')
    .onClick(() => {
      router.back()
    })
  }

  pageTransition() {
    PageTransitionEnter({}).onEnter((type: RouteType, progress: number) => {
      this.scaleValue = progress
      this.opacityValue = progress
    })
    PageTransitionExit({}).onExit((type: RouteType, progress: number) => {
      this.scaleValue = 1 - progress
      this.opacityValue = 1 - progress
    })
  }
}

type配置为RouteType.None

type为RouteType.None表示对页面栈的push、pop操作均生效，type的默认值为RouteType.None。

// page A
pageTransition() {
  // 定义页面进入时的效果，从左侧滑入，时长为1200ms，无论页面栈发生push还是pop操作均可生效
  PageTransitionEnter({ type: RouteType.None, duration: 1200 })
    .slide(SlideEffect.Left)
  // 定义页面退出时的效果，向左侧滑出，时长为1000ms，无论页面栈发生push还是pop操作均可生效
  PageTransitionExit({ type: RouteType.None, duration: 1000 })
    .slide(SlideEffect.Left)
}

// page B
pageTransition() {
  // 定义页面进入时的效果，从右侧滑入，时长为1000ms，无论页面栈发生push还是pop操作均可生效
  PageTransitionEnter({ type: RouteType.None, duration: 1000 })
    .slide(SlideEffect.Right)
  // 定义页面退出时的效果，向右侧滑出，时长为1200ms，无论页面栈发生push还是pop操作均可生效
  PageTransitionExit({ type: RouteType.None, duration: 1200 })
    .slide(SlideEffect.Right)
}

禁用某页面的页面转场

通过设置页面转场的时长为0，可使该页面无页面转场动画。

pageTransition() {
  PageTransitionEnter({ type: RouteType.None, duration: 0 })
  PageTransitionExit({ type: RouteType.None, duration: 0 })
}