1# 页面间转场 (pageTransition) 2 3当路由进行切换时，可以通过在pageTransition函数中自定义页面入场和页面退场的转场动效。详细指导请参考[页面转场动画](../../../ui/arkts-page-transition-animation.md)。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 为了实现更好的转场效果，推荐使用[Navigation组件](../../../ui/arkts-navigation-navigation.md)和[模态转场](../../../ui/arkts-modal-transition.md)。 10 11## pageTransition 12 13pageTransition?(): void 14 15进入此页面或移动到其他页面时实现动画。 16 17**系统能力：** SystemCapability.ArkUI.ArkUI.Full 18 19## PageTransitionEnter 20 21PageTransitionEnter(value: PageTransitionOptions) 22 23设置当前页面的自定义入场动效。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**参数：** 28 29| 参数名 | 类型 | 必填 | 说明 | 30| ------ | ------------------------------------------------------ | ---- | -------------------- | 31| value | [PageTransitionOptions](#pagetransitionoptions对象说明) | 是 | 配置入场动效的参数。 | 32 33## PageTransitionExit 34 35PageTransitionExit(value: PageTransitionOptions) 36 37设置当前页面的自定义退场动效。 38 39**系统能力：** SystemCapability.ArkUI.ArkUI.Full 40 41**参数：** 42 43| 参数名 | 类型 | 必填 | 说明 | 44| ------ | ------------------------------------------------------- | ---- | -------------------- | 45| value | [PageTransitionOptions](#pagetransitionoptions对象说明) | 是 | 配置退场动效的参数。 | 46 47## PageTransitionOptions对象说明 48 49 50| 名称 | 类型 | 必填 | 描述 | 51| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 52| type | [RouteType](#routetype枚举说明) | 否 | 页面转场效果生效的路由类型。<br/>默认值：RouteType.None。 | 53| duration | number | 否 | 动画的时长。<br/>单位：毫秒<br/>默认值：1000 | 54| curve | [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../js-apis-curve.md#icurve)<sup>10+</sup> | 否 | 动画曲线。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 | 55| delay | number | 否 | 动画延迟时长。<br/>单位：毫秒<br/>默认值：0<br/>**说明：** <br/>没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异)，如需禁用系统默认页面转场效果，可以指定duration为0。 | 56 57 58## 属性 59 60| 参数名称 | 参数类型 | 必填 | 参数描述 | 61| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 62| slide | [SlideEffect](#slideeffect枚举说明) | 否 | 设置页面转场时的滑入滑出效果。 | 63| translate | {<br/>x? : number \| string;<br/>y? : number \| string;<br/>z? : number \| string<br/>} | 否 | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。<br/>- x：横向的平移距离。<br/>- y：纵向的平移距离。<br/>- z：竖向的平移距离。 | 64| 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缩放中心点。centerX和centerY默认值是"50%"，即默认以页面的中心点为旋转中心点。<br/>- 中心点为(0, 0)代表页面的左上角。<br/> | 65| opacity | number | 否 | 设置入场的起点透明度值或者退场的终点透明度值。 | 66 67 68## 事件 69 70| 事件 | 功能描述 | 71| ------------------------------------------------------------ | ------------------------------------------------------------ | 72| onEnter(event: (type: [RouteType](#routetype枚举说明), progress: number) => void) | 回调入参为当前入场动画的归一化进度[0 - 1]。<br/>- type：跳转方法。<br/>- progress：当前进度。<br/>触发该事件的条件：<br/>逐帧回调，直到入场动画结束，progress从0变化到1。 | 73| onExit(event: (type: [RouteType](#routetype枚举说明), progress: number) => void) | 回调入参为当前退场动画的归一化进度[0 - 1]。<br/>- type：跳转方法。<br/>- progress：当前进度。<br/>触发该事件的条件：<br/>逐帧回调，直到退场动画结束，progress从0变化到1。 | 74 75## RouteType枚举说明 76 77| 名称 | 描述 | 78| ---- | ------------------------------------------------------------ | 79| Pop | 重定向指定页面。从PageB回退到之前的页面PageA。对于PageB，指定RouteType为None或者Pop的PageTransitionExit组件样式生效，对于PageA，指定RouteType为None或者Pop的PageTransitionEnter组件样式生效。 | 80| Push | 跳转到下一页面。PageA跳转到下一个新的界面PageB。对于PageA，指定RouteType为None或者Push的PageTransitionExit组件样式生效，对于PageB，指定RouteType为None或者Push的PageTransitionEnter组件样式生效。 | 81| None | 页面未重定向。如Push和Pop描述中RouteType为None的情形，即页面进场时PageTransitionEnter的转场效果生效；退场时PageTransitionExit的转场效果生效。 | 82 83## SlideEffect枚举说明 84 85| 名称 | 描述 | 86| ------ | -------------------------------------------------- | 87| Left | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 | 88| Right | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 | 89| Top | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 | 90| Bottom | 设置到入场时表示从下边滑入，出场时表示滑出到下边。 | 91 92## 示例 93 94自定义方式1：通过不同的退入场类型配置不同的退场，入场动画。 95 96```ts 97// index.ets 98import router from '@ohos.router' 99 100@Entry 101@Component 102struct Index { 103 @State scale1: number = 1 104 @State opacity1: number = 1 105 106 build() { 107 Column() { 108 Image($r("app.media.transition_image1")).width('100%').height('100%') 109 } 110 .width('100%') 111 .height('100%') 112 .scale({ x: this.scale1 }) 113 .opacity(this.opacity1) 114 .onClick(() => { 115 router.pushUrl({ url: 'pages/Page1' }) 116 }) 117 } 118 119 pageTransition() { 120 PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) 121 .onEnter((type: RouteType, progress: number) => { 122 if (type == RouteType.Push||type == RouteType.Pop) { 123 this.scale1 = progress 124 this.opacity1 = progress 125 } 126 }) 127 PageTransitionExit({ duration: 1200, curve: Curve.Ease }) 128 .onExit((type: RouteType, progress: number) => { 129 if (type == RouteType.Push) { 130 this.scale1 = 1 - progress 131 this.opacity1 = 1 - progress 132 } 133 }) 134 } 135} 136``` 137 138```ts 139// page1.ets 140import router from '@ohos.router' 141 142@Entry 143@Component 144struct Page1 { 145 @State scale2: number = 1 146 @State opacity2: number = 1 147 148 build() { 149 Column() { 150 Image($r("app.media.transition_image2")).width('100%').height('100%') // 图片存放在media文件夹下 151 } 152 .width('100%') 153 .height('100%') 154 .scale({ x: this.scale2 }) 155 .opacity(this.opacity2) 156 .onClick(() => { 157 router.pushUrl({ url: 'pages/Index' }) 158 }) 159 } 160 161 pageTransition() { 162 PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) 163 .onEnter((type: RouteType, progress: number) => { 164 if(type==RouteType.Push || type == RouteType.Pop) 165 this.scale2 = progress 166 this.opacity2 = progress 167 168 }) 169 PageTransitionExit({ duration: 1200, curve: Curve.Ease }) 170 .onExit((type: RouteType, progress: number) => { 171 if (type == RouteType.Pop) { 172 this.scale2 = 1 - progress 173 this.opacity2 = 1 - progress 174 } 175 }) 176 } 177} 178``` 179 180 181 182自定义方式2：配置了当前页面的入场动画为从左侧滑入，退场为平移加透明度变化。 183 184```ts 185// index.ets 186@Entry 187@Component 188struct PageTransitionExample { 189 build() { 190 Column() { 191 Navigator({ target: 'pages/page1', type: NavigationType.Push }) { 192 Image($r('app.media.bg1')).width('100%').height('100%') // 图片存放在media文件夹下 193 } 194 } 195 } 196 197 // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等) 198 pageTransition() { 199 // 该页面进入动画时长为1200ms，尽量与另一页面的退出动画时长匹配 200 PageTransitionEnter({ duration: 1200 }) 201 .slide(SlideEffect.Left) 202 // 该页面退出动画时长为1000ms，尽量与另一页面的进入动画时长匹配 203 PageTransitionExit({ duration: 1000 }) 204 .translate({ x: 100.0, y: 100.0 }) 205 .opacity(0) 206 } 207} 208``` 209 210```ts 211// page1.ets 212@Entry 213@Component 214struct PageTransitionExample1 { 215 build() { 216 Column() { 217 Navigator({ target: 'pages/index', type: NavigationType.Push }) { 218 Image($r('app.media.bg2')).width('100%').height('100%') // 图片存放在media文件夹下 219 } 220 } 221 } 222 223 // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等) 224 pageTransition() { 225 // 该页面进入动画时长为1000ms，尽量与另一页面的退出动画时长匹配 226 PageTransitionEnter({ duration: 1000 }) 227 .slide(SlideEffect.Left) 228 // 该页面退出动画时长为1200ms，尽量与另一页面的进入动画时长匹配 229 PageTransitionExit({ duration: 1200 }) 230 .translate({ x: 100.0, y: 100.0 }) 231 .opacity(0) 232 } 233} 234``` 235 236 237
