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

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

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

名称

参数

参数描述

PageTransitionEnter

{

type: RouteType,

duration: number,

curve: Curve | string,

delay: number

}

设置当前页面的自定义入场动效。

- type:不配置时表明pop为push时效果的逆播。

- duration:动画的时长,单位为毫秒。

- curve:动画曲线。string类型的取值支持"ease"、"ease-in"、"ease-out"、"ease-in-out"、"extreme-deceleration"、"fast-out-linear-in"、"fast-out-slow-in"、"friction"、"linear"、"linear-out-slow-in"、"rhythm"、"sharp"、"smooth"。

默认值:Curve.Linear

- delay:动画延迟时长,单位为毫秒,默认不延迟播放。

PageTransitionExit

{

type: RouteType,

duration: number,

curve: Curve | string,

delay: number

}

设置当前页面的自定义退场动效。

- type:不配置时表明pop为push时效果的逆播

- duration:动画的时长,单位为毫秒。

- curve:动画曲线,string类型取值与PageTransitionEnter相同。

默认值:Curve.Linear

- delay:动画延迟时长,单位为毫秒,默认不延迟播放。

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 | string

}

设置页面转场时的平移效果,为入场时起点和退场时终点的值,和slide同时设置时默认生效slide。

- x:横向的平移距离。

- y:纵向的平移距离。

- z:竖向的平移距离。

scale

{

x? : number,

y? : number,

z? : number,

centerX? : number | string,

centerY? : number | string

}

设置页面转场时的缩放效果,为入场时起点和退场时终点的值。

- x:横向放大倍数(或缩小比例)。

- y:纵向放大倍数(或缩小比例)。

- z:竖向放大倍数(或缩小比例)。

- centerX、centerY缩放中心点。

- 中心点为0时,默认的是组件的左上角。

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

示例效果:

 

参考地址:文档中心

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值