Harmony/OpenHarmony应用开发-转场动画页面间转场

鸿蒙时代
发布于 2022-12-26 11:00
浏览
0收藏

在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效。
说明:从API Version 7开始支持。开发语言ets.
Harmony/OpenHarmony应用开发-转场动画页面间转场-鸿蒙开发者社区Harmony/OpenHarmony应用开发-转场动画页面间转场-鸿蒙开发者社区
routerType枚举说明:
Harmony/OpenHarmony应用开发-转场动画页面间转场-鸿蒙开发者社区
属性:
Harmony/OpenHarmony应用开发-转场动画页面间转场-鸿蒙开发者社区
Harmony/OpenHarmony应用开发-转场动画页面间转场-鸿蒙开发者社区
SlideEffect枚举说明:
Harmony/OpenHarmony应用开发-转场动画页面间转场-鸿蒙开发者社区Harmony/OpenHarmony应用开发-转场动画页面间转场-鸿蒙开发者社区
代码实例:
transitionAnimation.ets

@Entry
@Component
struct TransitionAnimation {
  @State scale1: number = 1
  @State opacity1: number = 1

  build() {
    Column() {
      Navigator({ target: 'pages/transitionAnimation02', type: NavigationType.Push }) {
        Image($r('app.media.icon')).width(200).height(200)    // 图片存放在media文件夹下
      }
    }.scale({ x: this.scale1 }).opacity(this.opacity1)
  }
  // 自定义方式1:完全自定义转场过程的效果
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale1 = 1
        this.opacity1 = progress
      }) // 进场过程中会逐帧触发onEnter回调,入参为动效的归一化进度(0% -- 100%)
    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
      .onExit((type: RouteType, progress: number) => {
        this.scale1 = 1 - progress
        this.opacity1 = 1
      }) // 退场过程中会逐帧触发onExit回调,入参为动效的归一化进度(0% -- 100%)
  }
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.

transitionAnimation02.ets

@Entry
@Component
struct TransitionAnimation02 {
  @State scale2: number = 1
  @State opacity2: number = 1

  build() {
    Column() {
      Navigator({ target: 'pages/transitionAnimation', type: NavigationType.Push }) {
        Image($r('app.media.widget')).width(200).height(200)   // 图片存放在media文件夹下
      }
    }.width('100%').height('100%').scale({ x: this.scale2 }).opacity(this.opacity2)
  }
  // 自定义方式1:完全自定义转场过程的效果
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale2 = 1
        this.opacity2 = progress
      }) // 进场过程中会逐帧触发onEnter回调,入参为动效的归一化进度(0% -- 100%)
    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
      .onExit((type: RouteType, progress: number) => {
        this.scale2 = 1 - progress
        this.opacity2 = 1
      }) // 退场过程中会逐帧触发onExit回调,入参为动效的归一化进度(0% -- 100%)
  }
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.

示例效果:
Harmony/OpenHarmony应用开发-转场动画页面间转场-鸿蒙开发者社区
参考地址:https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-page-transition-animation-0000001380440914-V3

标签
HarmonyOpenHarmony应用开发-转场动画页面.docx 57.57K 14次下载
收藏
回复
举报


回复
    相关推荐