# 页面间转场页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。

组件名称	参数	参数描述
PageTransitionEnter	Object	页面入场组件，用于自定义当前页面的入场效果，详见动效参数说明。
PageTransitionExit	Object	页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。

- 动效参数说明

参数名称	参数类型	默认值	必填	参数描述
type	RouteType	-	否	不配置时表明pop为push时效果的逆播。
duration	number	1000	否	动画时长，单位为毫秒。
curve	Curve \| Curves	Linear	否	动画曲线，有效值参见Curve 说明。
delay	number	0	否	动画延迟时长，单位为毫秒，默认不延时播放。

- RouteType枚举说明

名称	描述
Pop	PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。
Push	PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。

## 属性 PageTransitionEnter和PageTransitionExit组件支持的属性：

参数名称	参数类型	默认值	必填	参数描述
slide	SlideEffect	Right	否	设置转场的滑入效果，有效值参见SlideEffect说明。
translate	{ x? : number, y? : number, z? : number }	-	否	设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。
scale	{ x? : number, y? : number, z? : number, centerX? : number, centerY? : number }	-	否	设置页面转场时的缩放效果，为入场时起点和退场时终点的值。
opacity	number	1	否	设置入场的起点透明度值或者退场的终点透明度值。

- SlideEffect枚举说明

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

## 事件 PageTransitionEnter和PageTransitionExit组件支持的事件：

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

## 示例自定义方式1：配置了当前页面的入场动画为淡入，退场动画为缩小。 ``` // index.ets @Entry @Component struct PageTransitionExample1 { @State scale: number = 1 @State opacity: number = 1 @State active: boolean = false build() { Column() { Navigator({ target: 'pages/page1', type: NavigationType.Push }) { Image($r('app.media.bg1')).width("100%").height("100%") } .onClick(() => { this.active = true }) }.scale({ x: this.scale }).opacity(this.opacity) } // 自定义方式1：完全自定义转场过程的效果 pageTransition() { PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) .onEnter((type: RouteType, progress: number) => { this.scale = 1 this.opacity = progress }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%) PageTransitionExit({ duration: 1500, curve: Curve.Ease }) .onExit((type: RouteType, progress: number) => { this.scale = 1 - progress this.opacity = 1 }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%) } } ``` ``` // page1.ets @Entry @Component struct AExample { @State scale: number = 1 @State opacity: number = 1 @State active: boolean = false build() { Column() { Navigator({ target: 'pages/index' ,type: NavigationType.Push}) { Image($r('app.media.bg2')).width("100%").height("100%") } }.height("100%").width("100%").scale({ x: this.scale }).opacity(this.opacity) } // 自定义方式1：完全自定义转场过程的效果 pageTransition() { PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) .onEnter((type: RouteType, progress: number) => { this.scale = 1 this.opacity = progress }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%) PageTransitionExit({ duration: 1500, curve: Curve.Ease }) .onExit((type: RouteType, progress: number) => { this.scale = 1 - progress this.opacity = 1 }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%) } } ``` ![](figures/PageTransition1.gif) 自定义方式2：配置了当前页面的入场动画为从左侧滑入，退场为缩小加透明度变化。 ``` // index.ets @Entry @Component struct PageTransitionExample { @State scale: number = 1 @State opacity: number = 1 @State active: boolean = false build() { Column() { Navigator({ target: 'pages/page1', type: NavigationType.Push }) { Image($r('app.media.bg1')).width("100%").height("100%") } .onClick(() => { this.active = true }) }.scale({ x: this.scale }).opacity(this.opacity) } // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等) 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 scale: number = 1 @State opacity: number = 1 @State active: boolean = false build() { Column() { Navigator({ target: 'pages/index', type: NavigationType.Push }) { Image($r('app.media.bg2')).width ("100%").height("100%") } .onClick(() => { this.active = true }) }.scale({ x: this.scale }).opacity(this.opacity) } // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等) pageTransition() { PageTransitionEnter({ duration: 1200 }) .slide(SlideEffect.Left) PageTransitionExit({ delay: 100 }) .translate({ x: 100.0, y: 100.0 }) .opacity(0) } } ``` ![](figures/PageTransition2.gif)