頁面間轉(zhuǎn)場

RouteType枚舉說明

屬性

SlideEffect枚舉說明

事件

示例

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

// 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)場過程的效果
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale1 = 1
        this.opacity1 = progress
      }) // 進(jìn)場過程中會逐幀觸發(fā)onEnter回調(diào)，入?yún)閯有У臍w一化進(jìn)度(0% -- 100%)
    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
      .onExit((type: RouteType, progress: number) => {
        this.scale1 = 1 - progress
        this.opacity1 = 1
      }) // 退場過程中會逐幀觸發(fā)onExit回調(diào)，入?yún)閯有У臍w一化進(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)場過程的效果
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale2 = 1
        this.opacity2 = progress
      }) // 進(jìn)場過程中會逐幀觸發(fā)onEnter回調(diào)，入?yún)閯有У臍w一化進(jìn)度(0% -- 100%)
    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
      .onExit((type: RouteType, progress: number) => {
        this.scale2 = 1 - progress
        this.opacity2 = 1
      }) // 退場過程中會逐幀觸發(fā)onExit回調(diào)，入?yún)閯有У臍w一化進(jìn)度(0% -- 100%)
  }
}

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

// 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)
  }
}