鸿蒙OpenHarmony【页面间转场 (pageTransition)】动画

当路由举行切换时，可以通过在pageTransition函数中自界说页面入场和页面退场的转场动效。
阐明
从API Version 7开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
为了实现更好的转场结果，推荐使用[Navigation组件]和[模态转场]。
pageTransition

pageTransition?(): void
进入此页面或移动到其他页面时实现动画。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
PageTransitionEnter

PageTransitionEnter(value: PageTransitionOptions)
设置当前页面的自界说入场动效。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明value[PageTransitionOptions]是配置入场动效的参数。 PageTransitionExit

PageTransitionExit(value: PageTransitionOptions)
设置当前页面的自界说退场动效。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明value[PageTransitionOptions]是配置退场动效的参数。 PageTransitionOptions对象阐明

元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
名称范例必填阐明type[RouteType]否页面转场结果生效的路由范例。默认值：RouteType.None。durationnumber否动画的时长。单位：毫秒默认值：1000curve[Curve]string[ICurve]10+delaynumber否动画延迟时长。单位：毫秒默认值：0**阐明：**没有匹配时使用系统默认的页面转场结果(根据装备大概会有差别)，如需禁用系统默认页面转场结果，可以指定duration为0。 属性

slide

slide(value: SlideEffect): T
设置页面转场时的滑入滑出结果。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明value[SlideEffect]是页面转场时的滑入滑出结果。 translate

translate(value: TranslateOptions): T
设置页面转场时的平移结果。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明value[TranslateOptions]是设置页面转场时的平移结果，为入场时出发点和退场时尽头的值，和slide同时设置时默认生效slide。- x：横向的平移距离。- y：纵向的平移距离。- z：竖向的平移距离。 scale

scale(value: ScaleOptions): T
设置页面转场时的缩放结果。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明value[ScaleOptions]是设置页面转场时的缩放结果，为入场时出发点和退场时尽头的值。- x：横向放大倍数（或缩小比例）。- y：纵向放大倍数（或缩小比例）。- z：竖向放大倍数（或缩小比例）。- centerX、centerY缩放中心点。centerX和centerY默认值是"50%"，即默认以页面的中心点为旋转中心点。- 中心点为(0, 0)代表页面的左上角。 opacity

opacity(value: number): T
设置入场的出发点透明度值或者退场的尽头透明度值。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valuenumber是设置入场的出发点透明度值或者退场的尽头透明度值。 变乱

onEnter

onEnter(event: (type: RouteType, progress: number) => void): PageTransitionEnterInterface
逐帧回调，直到入场动画结束，progress从0变革到1。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明event(type: [RouteType], progress: number) => void是入场动画的逐帧回调直到入场动画结束，progress从0变革到1。 示例：

1.   pageTransition() {
2.     PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
3.       // 转场动画时入场动画 type 为路由类型 ，progress为从0到1逐渐变大
4.       .onEnter((type: RouteType, progress: number) => {
5.         // 业务逻辑代码
6.       })
7.   }

复制代码

onExit

onExit(event: (type: RouteType, progress: number) => void): PageTransitionExitInterface
逐帧回调，直到出场动画结束，progress从0变革到1。
系统能力： SystemCapability.ArkUI.ArkUI.Full
元服务API： 从API version 11开始，该接口支持在元服务中使用。
参数：
参数名范例必填阐明event(type: [RouteType], progress: number) => void是出场动画的逐帧回调直到入场动画结束，progress从0变革到1。 示例：

1.   pageTransition() {
2.     PageTransitionExit({ duration: 1200, curve: Curve.Linear })
3.       // 转场动画时出场动画 type 为路由类型 ，progress为从0到1逐渐变大
4.       .onExit((type: RouteType, progress: number) => {
5.         // 业务逻辑代码
6.       })
7.   }

复制代码

RouteType枚举阐明

系统能力： SystemCapability.ArkUI.ArkUI.Full
元服务API： 从API version 11开始，该接口支持在元服务中使用。
名称描述Pop重定向指定页面。从PageB回退到之前的页面PageA。对于PageB，指定RouteType为None或者Pop的PageTransitionExit组件样式生效，对于PageA，指定RouteType为None或者Pop的PageTransitionEnter组件样式生效。Push跳转到下一页面。PageA跳转到下一个新的界面PageB。对于PageA，指定RouteType为None或者Push的PageTransitionExit组件样式生效，对于PageB，指定RouteType为None或者Push的PageTransitionEnter组件样式生效。None页面未重定向。如Push和Pop描述中RouteType为None的情形，即页面进场时PageTransitionEnter的转场结果生效；退场时PageTransitionExit的转场结果生效。 SlideEffect枚举阐明

元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
名称描述Left设置到入场时表示从左边滑入，出场时表示滑出到左边。元服务API： 从API version 11开始，该接口支持在元服务中使用。Right设置到入场时表示从右边滑入，出场时表示滑出到右边。元服务API： 从API version 11开始，该接口支持在元服务中使用。Top设置到入场时表示从上边滑入，出场时表示滑出到上边。元服务API： 从API version 11开始，该接口支持在元服务中使用。Bottom设置到入场时表示从下边滑入，出场时表示滑出到下边。元服务API： 从API version 11开始，该接口支持在元服务中使用。START12+设置LTR入场时表示从左边滑入，出场时表示滑出到左边。RTL入场时表示从右边滑入，出场时表示滑出到右边。元服务API： 从API version 12开始，该接口支持在元服务中使用。END12+设置LTR入场时表示从右边滑入，出场时表示滑出到右边。RTL入场时表示从左边滑入，出场时表示滑出到左边。元服务API： 从API version 12开始，该接口支持在元服务中使用。 示例

示例1

自界说方式1：通过差别的退入场范例配置差别的退场，入场动画。

1. // index.ets
2. import { router } from '@kit.ArkUI';
4. @Entry
5. @Component
6. struct Index {
7.   @State scale1: number = 1
8.   @State opacity1: number = 1
10.   build() {
11.     Column() {
12.       Image($r("app.media.transition_image1")).width('100%').height('100%')
13.     }
14.     .width('100%')
15.     .height('100%')
16.     .scale({ x: this.scale1 })
17.     .opacity(this.opacity1)
18.     .onClick(() => {
19.       router.pushUrl({ url: 'pages/Page1' })
20.     })
21.   }
23.   pageTransition() {
24.     PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
25.       .onEnter((type: RouteType, progress: number) => {
26.         if (type == RouteType.Push||type == RouteType.Pop) {
27.           this.scale1 = progress
28.           this.opacity1 = progress
29.         }
30.       })
31.     PageTransitionExit({ duration: 1200, curve: Curve.Ease })
32.       .onExit((type: RouteType, progress: number) => {
33.         if (type == RouteType.Push) {
34.           this.scale1 = 1 - progress
35.           this.opacity1 = 1 - progress
36.         }
37.       })
38.   }
39. }

复制代码

1. // page1.ets
2. import { router } from '@kit.ArkUI';
4. @Entry
5. @Component
6. struct Page1 {
7.   @State scale2: number = 1
8.   @State opacity2: number = 1
10.   build() {
11.     Column() {
12.       Image($r("app.media.transition_image2")).width('100%').height('100%') // 图片存放在media文件夹下
13.     }
14.     .width('100%')
15.     .height('100%')
16.     .scale({ x: this.scale2 })
17.     .opacity(this.opacity2)
18.     .onClick(() => {
19.       router.pushUrl({ url: 'pages/Index' })
20.     })
21.   }
23.   pageTransition() {
24.     PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
25.       .onEnter((type: RouteType, progress: number) => {
26.         if(type==RouteType.Push || type == RouteType.Pop)
27.           this.scale2 = progress
28.         this.opacity2 = progress
30.       })
31.     PageTransitionExit({ duration: 1200, curve: Curve.Ease })
32.       .onExit((type: RouteType, progress: number) => {
33.         if (type == RouteType.Pop) {
34.           this.scale2 = 1 - progress
35.           this.opacity2 = 1 - progress
36.         }
37.       })
38.   }
39. }

复制代码

自界说方式2：配置了当前页面的入场动画为从左侧滑入，退场为平移加透明度变革。

1. // index.ets
2. @Entry
3. @Component
4. struct PageTransitionExample {
5.   build() {
6.     Column() {
7.       Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
8.         Image($r('app.media.bg1')).width('100%').height('100%')   // 图片存放在media文件夹下
9.       }
10.     }
11.   }
13.   // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等)
14.   pageTransition() {
15.     // 该页面进入动画时长为1200ms，尽量与另一页面的退出动画时长匹配
16.     PageTransitionEnter({ duration: 1200 })
17.       .slide(SlideEffect.Left)
18.     // 该页面退出动画时长为1000ms，尽量与另一页面的进入动画时长匹配
19.     PageTransitionExit({ duration: 1000 })
20.       .translate({ x: 100.0, y: 100.0 })
21.       .opacity(0)
22.   }
23. }

复制代码

1. // page1.ets
2. @Entry
3. @Component
4. struct PageTransitionExample1 {
5.   build() {
6.     Column() {
7.       Navigator({ target: 'pages/index', type: NavigationType.Push }) {
8.         Image($r('app.media.bg2')).width('100%').height('100%')    // 图片存放在media文件夹下
9.       }
10.     }
11.   }
13.   // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等)
14.   pageTransition() {
15.     // 该页面进入动画时长为1000ms，尽量与另一页面的退出动画时长匹配
16.     PageTransitionEnter({ duration: 1000 })
17.       .slide(SlideEffect.Left)
18.     // 该页面退出动画时长为1200ms，尽量与另一页面的进入动画时长匹配
19.     PageTransitionExit({ duration: 1200 })
20.       .translate({ x: 100.0, y: 100.0 })
21.       .opacity(0)
22.   }
23. }

复制代码

示例2

自界说方式1：配置提供的差别退入场平移结果，将系统语言排版模式改为RTL。

1. // index.ets
2. import { router } from '@kit.ArkUI'
4. @Entry
5. @Component
6. struct PageTransitionExample {
7.   @State scale1: number = 1
8.   @State opacity1: number = 1
10.   build() {
11.     Column() {
12.       Button("页面1").onClick(()=>{
13.         router.pushUrl({
14.           url:"pages/page1"
15.         })
16.       })
17.         .width(200)
18.         .height(60)
19.         .fontSize(36)
20.       Text("START")
21.         .fontSize(36)
22.         .textAlign(TextAlign.Center)  
23.     }.scale({ x: this.scale1 }).opacity(this.opacity1).height("100%").width("100%").justifyContent(FlexAlign.Center)
24.   }
26.   // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等)
27.   pageTransition() {
28.     //设置入场动效
29.     PageTransitionEnter({ duration: 200 })
30.       .slide(SlideEffect.START)
31.     //设置退场动效
32.     PageTransitionExit({ delay: 100 })
33.       .slide(SlideEffect.START) //Left
34.   }
35. }

复制代码

1. // page1.ets
2. import { router } from '@kit.ArkUI'
4. @Entry
5. @Component
6. struct PageTransitionExample {
7.   @State scale1: number = 1
8.   @State opacity1: number = 1
10.   build() {
11.     Column() {
12.       Button("页面2").onClick(()=>{
13.         router.pushUrl({
14.           url:"pages/Index"
15.         })
16.       })
17.         .width(200)
18.         .height(60)
19.         .fontSize(36)
20.       Text("END")
21.         .fontSize(36)
22.         .textAlign(TextAlign.Center)
23.     }.scale({ x: this.scale1 }).opacity(this.opacity1).height("100%").width("100%").justifyContent(FlexAlign.Center)
24.   }
26.   // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等)
27.   pageTransition() {
28.     PageTransitionEnter({ duration: 200 })
29.       .slide(SlideEffect.END) //Right
30.     PageTransitionExit({ delay:100 })
31.       .slide(SlideEffect.END) //Right
32.   }
33. }

复制代码

自界说方式2：使用系统默认的退入场结果，将系统语言排版模式改为RTL。

1. // index.ets
2. import { router } from '@kit.ArkUI'
4. @Entry
5. @Component
6. struct PageTransitionExample {
7.   @State scale1: number = 1
8.   @State opacity1: number = 1
10.   build() {
11.     Column() {
12.       Button("页面1").onClick(()=>{
13.         router.pushUrl({
14.           url:"pages/page1"
15.         })
16.       })
17.         .width(200)
18.         .height(60)
19.         .fontSize(36)
20.     }.scale({ x: this.scale1 }).opacity(this.opacity1).height("100%").width("100%").justifyContent(FlexAlign.Center)
21.   }
22. }

复制代码

1. // page1.ets
2. import { router } from '@kit.ArkUI'
4. @Entry
5. @Component
6. struct PageTransitionExample {
7.   @State scale1: number = 1
8.   @State opacity1: number = 1
10.   build() {
11.     Column() {
12.       Button("页面2").onClick(()=>{
13.         router.pushUrl({
14.           url:"pages/Index"
15.         })
16.       })
17.         .width(200)
18.         .height(60)
19.         .fontSize(36)
20.     }.scale({ x: this.scale1 }).opacity(this.opacity1).height("100%").width("100%").justifyContent(FlexAlign.Center)
21.   }
22. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。