頁(yè)面間轉(zhuǎn)場(chǎng)

RouteType枚舉說(shuō)明

屬性

SlideEffect枚舉說(shuō)明

事件

示例

自定義方式1：配置了當(dāng)前頁(yè)面的入場(chǎng)動(dòng)畫(huà)為淡入，退場(chǎng)動(dòng)畫(huà)為縮小。

// index.ets
@Entry
@Component
struct PageTransitionExample1 {
  @State scale1: number = 1
  @State opacity1: number = 1

  build() {
    Column() {
      Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
        Image($r('app.media.bg1')).width('100%').height('100%')    // 圖片存放在media文件夾下
      }
    }.scale({ x: this.scale1 }).opacity(this.opacity1)
  }
  // 自定義方式1：完全自定義轉(zhuǎn)場(chǎng)過(guò)程的效果
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale1 = 1
        this.opacity1 = progress
      }) // 進(jìn)場(chǎng)過(guò)程中會(huì)逐幀觸發(fā)onEnter回調(diào)，入?yún)閯?dòng)效的歸一化進(jìn)度(0% -- 100%)
    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
      .onExit((type: RouteType, progress: number) => {
        this.scale1 = 1 - progress
        this.opacity1 = 1
      }) // 退場(chǎng)過(guò)程中會(huì)逐幀觸發(fā)onExit回調(diào)，入?yún)閯?dòng)效的歸一化進(jìn)度(0% -- 100%)
  }
}

// page1.ets
@Entry
@Component
struct AExample {
  @State scale2: number = 1
  @State opacity2: number = 1

  build() {
    Column() {
      Navigator({ target: 'pages/index', type: NavigationType.Push }) {
        Image($r('app.media.bg2')).width('100%').height('100%')   // 圖片存放在media文件夾下
      }
    }.width('100%').height('100%').scale({ x: this.scale2 }).opacity(this.opacity2)
  }
  // 自定義方式1：完全自定義轉(zhuǎn)場(chǎng)過(guò)程的效果
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale2 = 1
        this.opacity2 = progress
      }) // 進(jìn)場(chǎng)過(guò)程中會(huì)逐幀觸發(fā)onEnter回調(diào)，入?yún)閯?dòng)效的歸一化進(jìn)度(0% -- 100%)
    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
      .onExit((type: RouteType, progress: number) => {
        this.scale2 = 1 - progress
        this.opacity2 = 1
      }) // 退場(chǎng)過(guò)程中會(huì)逐幀觸發(fā)onExit回調(diào)，入?yún)閯?dòng)效的歸一化進(jìn)度(0% -- 100%)
  }
}

自定義方式2：配置了當(dāng)前頁(yè)面的入場(chǎng)動(dòng)畫(huà)為從左側(cè)滑入，退場(chǎng)為縮小加透明度變化。

// index.ets 
@Entry
@Component
struct PageTransitionExample {
  @State scale1: number = 1
  @State opacity1: number = 1

  build() {
    Column() {
      Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
        Image($r('app.media.bg1')).width('100%').height('100%')   // 圖片存放在media文件夾下
      }
    }.scale({ x: this.scale1 }).opacity(this.opacity1)
  }

  // 自定義方式2：使用系統(tǒng)提供的多種默認(rèn)效果(平移、縮放、透明度等)
  pageTransition() {
    PageTransitionEnter({ duration: 1200 })
      .slide(SlideEffect.Left)
    PageTransitionExit({ delay: 100 })
      .translate({ x: 100.0, y: 100.0 })
      .opacity(0)
  }
}

// page1.ets
@Entry
@Component
struct PageTransitionExample1 {
  @State scale2: number = 1
  @State opacity2: number = 1

  build() {
    Column() {
      Navigator({ target: 'pages/index', type: NavigationType.Push }) {
        Image($r('app.media.bg2')).width('100%').height('100%')    // 圖片存放在media文件夾下
      }
    }.scale({ x: this.scale2 }).opacity(this.opacity2)
  }

  // 自定義方式2：使用系統(tǒng)提供的多種默認(rèn)效果(平移、縮放、透明度等)
  pageTransition() {
    PageTransitionEnter({ duration: 1200 })
      .slide(SlideEffect.Left)
    PageTransitionExit({ delay: 100 })
      .translate({ x: 100.0, y: 100.0 })
      .opacity(0)
  }
}