IT评测·应用市场-qidao123.com

标题: 鸿蒙OpenHarmony【页面间转场 (pageTransition)】动画 [打印本页]

作者: 大连全瓷种植牙齿制作中心 时间: 2025-3-13 11:18
标题: 鸿蒙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。 示例：

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

复制代码

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。 示例：

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

复制代码

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：通过差别的退入场范例配置差别的退场，入场动画。

// index.ets
import { router } from '@kit.ArkUI';
@Entry
@Component
struct Index {
@State scale1: number = 1
@State opacity1: number = 1
build() {
Column() {
Image($r("app.media.transition_image1")).width('100%').height('100%')
}
.width('100%')
.height('100%')
.scale({ x: this.scale1 })
.opacity(this.opacity1)
.onClick(() => {
router.pushUrl({ url: 'pages/Page1' })
})
}
pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => {
if (type == RouteType.Push||type == RouteType.Pop) {
this.scale1 = progress
this.opacity1 = progress
}
})
PageTransitionExit({ duration: 1200, curve: Curve.Ease })
.onExit((type: RouteType, progress: number) => {
if (type == RouteType.Push) {
this.scale1 = 1 - progress
this.opacity1 = 1 - progress
}
})
}
}

复制代码

// page1.ets
import { router } from '@kit.ArkUI';
@Entry
@Component
struct Page1 {
@State scale2: number = 1
@State opacity2: number = 1
build() {
Column() {
Image($r("app.media.transition_image2")).width('100%').height('100%') // 图片存放在media文件夹下
}
.width('100%')
.height('100%')
.scale({ x: this.scale2 })
.opacity(this.opacity2)
.onClick(() => {
router.pushUrl({ url: 'pages/Index' })
})
}
pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => {
if(type==RouteType.Push || type == RouteType.Pop)
this.scale2 = progress
this.opacity2 = progress
})
PageTransitionExit({ duration: 1200, curve: Curve.Ease })
.onExit((type: RouteType, progress: number) => {
if (type == RouteType.Pop) {
this.scale2 = 1 - progress
this.opacity2 = 1 - progress
}
})
}
}

复制代码

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

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

复制代码

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

复制代码

示例2

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

// index.ets
import { router } from '@kit.ArkUI'
@Entry
@Component
struct PageTransitionExample {
@State scale1: number = 1
@State opacity1: number = 1
build() {
Column() {
Button("页面1").onClick(()=>{
router.pushUrl({
url:"pages/page1"
})
})
.width(200)
.height(60)
.fontSize(36)
Text("START")
.fontSize(36)
.textAlign(TextAlign.Center)
}.scale({ x: this.scale1 }).opacity(this.opacity1).height("100%").width("100%").justifyContent(FlexAlign.Center)
}
// 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等)
pageTransition() {
//设置入场动效
PageTransitionEnter({ duration: 200 })
.slide(SlideEffect.START)
//设置退场动效
PageTransitionExit({ delay: 100 })
.slide(SlideEffect.START) //Left
}
}

复制代码

// page1.ets
import { router } from '@kit.ArkUI'
@Entry
@Component
struct PageTransitionExample {
@State scale1: number = 1
@State opacity1: number = 1
build() {
Column() {
Button("页面2").onClick(()=>{
router.pushUrl({
url:"pages/Index"
})
})
.width(200)
.height(60)
.fontSize(36)
Text("END")
.fontSize(36)
.textAlign(TextAlign.Center)
}.scale({ x: this.scale1 }).opacity(this.opacity1).height("100%").width("100%").justifyContent(FlexAlign.Center)
}
// 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等)
pageTransition() {
PageTransitionEnter({ duration: 200 })
.slide(SlideEffect.END) //Right
PageTransitionExit({ delay:100 })
.slide(SlideEffect.END) //Right
}
}

复制代码

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

// index.ets
import { router } from '@kit.ArkUI'
@Entry
@Component
struct PageTransitionExample {
@State scale1: number = 1
@State opacity1: number = 1
build() {
Column() {
Button("页面1").onClick(()=>{
router.pushUrl({
url:"pages/page1"
})
})
.width(200)
.height(60)
.fontSize(36)
}.scale({ x: this.scale1 }).opacity(this.opacity1).height("100%").width("100%").justifyContent(FlexAlign.Center)
}
}

复制代码

// page1.ets
import { router } from '@kit.ArkUI'
@Entry
@Component
struct PageTransitionExample {
@State scale1: number = 1
@State opacity1: number = 1
build() {
Column() {
Button("页面2").onClick(()=>{
router.pushUrl({
url:"pages/Index"
})
})
.width(200)
.height(60)
.fontSize(36)
}.scale({ x: this.scale1 }).opacity(this.opacity1).height("100%").width("100%").justifyContent(FlexAlign.Center)
}
}

复制代码

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

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)