1# 页面间转场 2 3在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9| 名称 | 参数 | 参数描述 | 10| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 11| PageTransitionEnter | {<br/>type: RouteType,<br/>duration: number,<br/>curve: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay: number<br/>} | 设置当前页面的自定义入场动效。<br/>- type：不配置时表明pop为push时效果的逆播。<br/>- duration：动画的时长，单位为毫秒。<br/>- 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"。<br/> 默认值：Curve.Linear<br/>- delay：动画延迟时长，单位为毫秒，默认不延迟播放。 | 12| PageTransitionExit | {<br/>type: RouteType,<br/>duration: number,<br/>curve: [Curve](ts-appendix-enums.md#curve) \| string,<br/>delay: number<br/>} | 设置当前页面的自定义退场动效。<br/>- type：不配置时表明pop为push时效果的逆播<br/>- duration：动画的时长，单位为毫秒。<br/>- curve：动画曲线，string类型取值与PageTransitionEnter相同。<br/> 默认值：Curve.Linear<br/>- delay：动画延迟时长，单位为毫秒，默认不延迟播放。 | 13 14## RouteType枚举说明 15 16| 名称 | 描述 | 17| ---- | ---------------------------------------- | 18| Pop | 重定向指定页面。PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。 | 19| Push | 跳转到下一页面。PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 | 20| None | 页面未重定向。 | 21 22 23## 属性 24 25| 参数名称 | 参数类型 | 必填 | 参数描述 | 26| --------- | ---------------------------------------- | ---- | ---------------------------------------- | 27| slide | SlideEffect | 否 | 设置页面转场时的滑入滑出效果。<br/>默认值：SlideEffect.Right | 28| translate | {<br/>x? : number \| string,<br/>y? : number \| string,<br/>z? : number \| string<br/>} | 否 | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。<br/>- x：横向的平移距离。<br/>- y：纵向的平移距离。<br/>- z：竖向的平移距离。 | 29| scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number \| string,<br/>centerY? : number \| string<br/>} | 否 | 设置页面转场时的缩放效果，为入场时起点和退场时终点的值。<br/>- x：横向放大倍数（或缩小比例）。<br/>- y：纵向放大倍数（或缩小比例）。<br/>- z：竖向放大倍数（或缩小比例）。<br/>- centerX、centerY缩放中心点。<br/>- 中心点为0时，默认的是组件的左上角。 | 30| opacity | number | 否 | 设置入场的起点透明度值或者退场的终点透明度值。<br/>默认值：1 | 31 32## SlideEffect枚举说明 33 34| 名称 | 描述 | 35| ------ | ------------------------- | 36| Left | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 | 37| Right | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 | 38| Top | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 | 39| Bottom | 设置到入场时表示从下边滑入，出场时表示滑出到下边。 | 40 41 42## 事件 43 44| 事件 | 功能描述 | 45| ---------------------------------------- | ---------------------------------------- | 46| onEnter(event: (type: RouteType, progress: number) => void) | 回调入参为当前入场动画的归一化进度[0 - 1]。<br/>- type：跳转方法。<br/>- progress：当前进度。 | 47| onExit(event: (type: RouteType, progress: number) => void) | 回调入参为当前退场动画的归一化进度[0 - 1]。<br/>- type：跳转方法。<br/>- progress：当前进度。 | 48 49 50## 示例 51 52自定义方式1：配置了当前页面的入场动画为淡入，退场动画为缩小。 53 54```ts 55// index.ets 56@Entry 57@Component 58struct PageTransitionExample1 { 59 @State scale1: number = 1 60 @State opacity1: number = 1 61 62 build() { 63 Column() { 64 Navigator({ target: 'pages/page1', type: NavigationType.Push }) { 65 Image($r('app.media.bg1')).width("100%").height("100%") 66 } 67 }.scale({ x: this.scale1 }).opacity(this.opacity1) 68 } 69// 自定义方式1：完全自定义转场过程的效果 70 pageTransition() { 71 PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) 72 .onEnter((type: RouteType, progress: number) => { 73 this.scale1 = 1 74 this.opacity1 = progress 75 }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%) 76 PageTransitionExit({ duration: 1500, curve: Curve.Ease }) 77 .onExit((type: RouteType, progress: number) => { 78 this.scale1 = 1 - progress 79 this.opacity1 = 1 80 }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%) 81 } 82} 83``` 84 85```ts 86// page1.ets 87@Entry 88@Component 89struct AExample { 90 @State scale2: number = 1 91 @State opacity2: number = 1 92 93 build() { 94 Column() { 95 Navigator({ target: 'pages/index' ,type: NavigationType.Push}) { 96 Image($r('app.media.bg2')).width("100%").height("100%") 97 } 98 }.height("100%").width("100%").scale({ x: this.scale2 }).opacity(this.opacity2) 99 } 100// 自定义方式1：完全自定义转场过程的效果 101 pageTransition() { 102 PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) 103 .onEnter((type: RouteType, progress: number) => { 104 this.scale2 = 1 105 this.opacity2 = progress 106 }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%) 107 PageTransitionExit({ duration: 1500, curve: Curve.Ease }) 108 .onExit((type: RouteType, progress: number) => { 109 this.scale2 = 1 - progress 110 this.opacity2 = 1 111 }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%) 112 } 113} 114``` 115 116 117 118自定义方式2：配置了当前页面的入场动画为从左侧滑入，退场为缩小加透明度变化。 119 120```ts 121// index.ets 122@Entry 123@Component 124struct PageTransitionExample { 125 @State scale1: number = 1 126 @State opacity1: number = 1 127 128 build() { 129 Column() { 130 Navigator({ target: 'pages/page1', type: NavigationType.Push }) { 131 Image($r('app.media.bg1')).width("100%").height("100%") 132 } 133 }.scale({ x: this.scale1 }).opacity(this.opacity1) 134 } 135 136// 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等) 137 pageTransition() { 138 PageTransitionEnter({ duration: 1200 }) 139 .slide(SlideEffect.Left) 140 PageTransitionExit({ delay: 100 }) 141 .translate({ x: 100.0, y: 100.0 }) 142 .opacity(0) 143 } 144} 145``` 146 147```ts 148// page1.ets 149@Entry 150@Component 151struct PageTransitionExample1 { 152 @State scale2: number = 1 153 @State opacity2: number = 1 154 155 build() { 156 Column() { 157 Navigator({ target: 'pages/index', type: NavigationType.Push }) { 158 Image($r('app.media.bg2')).width ("100%").height("100%") 159 } 160 }.scale({ x: this.scale2 }).opacity(this.opacity2) 161 } 162 163// 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等) 164 pageTransition() { 165 PageTransitionEnter({ duration: 1200 }) 166 .slide(SlideEffect.Left) 167 PageTransitionExit({ delay: 100 }) 168 .translate({ x: 100.0, y: 100.0 }) 169 .opacity(0) 170 } 171} 172``` 173 174 175
