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

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

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

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