Harmony/OpenHarmony应用开发-转场动画页面间转场 - HarmonyOS技术社区 - 电子技术论坛

2022-12-26 11:03:09

Harmony

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

说明：从API Version 7开始支持。开发语言ets.

名称	参数	参数描述
PageTransitionEnter	{type: RouteType,duration: number,curve:Curve	string,delay: number}
PageTransitionExit	{type: RouteType,duration: number,curve:Curve	string,delay: number}

routerType枚举说明：

名称	描述
Pop	重定向指定页面。PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。
Push	跳转到下一页面。PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。
None	页面未重定向。

属性：

参数名称	参数类型	必填	参数描述
slide	SlideEffect	否	设置页面转场时的滑入滑出效果。默认值：SlideEffect.Right
translate	{x? : number	string,y? : number	string,z? : number
scale	{x? : number,y? : number,z? : number,centerX? : number	string,centerY? : number	string}
opacity	number	否	设置入场的起点透明度值或者退场的终点透明度值。默认值：1

SlideEffect枚举说明：

名称	描述
Left	设置到入场时表示从左边滑入，出场时表示滑出到左边。
Right	设置到入场时表示从右边滑入，出场时表示滑出到右边。
Top	设置到入场时表示从上边滑入，出场时表示滑出到上边。
Bottom	设置到入场时表示从下边滑入，出场时表示滑出到下边。

事件	功能描述
onEnter(event: (type?: RouteType, progress?: number) => void)	回调入参为当前入场动画的归一化进度[0 - 1]。- type：跳转方法。- progress：当前进度。
onExit(event: (type?: RouteType, progress?: number) => void)	回调入参为当前退场动画的归一化进度[0 - 1]。- type：跳转方法。- progress：当前进度。

代码实例：

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

示例效果：

参考地址：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-page-transition-animation-0000001380440914-V3

回帖高级模式

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。侵权投诉

[文章]Harmony/OpenHarmony应用开发-转场动画页面间转场

回帖高级模式