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