HarmonyOS 鸿蒙 ArkTS ArkUI 页面之间切换转换动画设置

news2025/1/25 9:21:50

第一步：导入

import promptAction from '@ohos.promptAction'

第二步：在build下方写入

 pageTransition(){
    PageTransitionEnter({ duration: 1200 })
      .slide(SlideEffect.Right)
    PageTransitionExit({ delay: 100 })
      .translate({ x: 100.0, y: 100.0 })
      .opacity(0)
  }

参考

PageTransitionEnter

参数：

参数名	类型	必填	说明
value	PageTransitionOptions	是	配置入场动效的参数。

PageTransitionExit

参数：

参数名	类型	必填	说明
value	PageTransitionOptions	是	配置入场动效的参数。

PageTransitionOptions对象说明

名称	类型	必填	描述
type	RouteType	否	页面转场效果生效的路由类型。默认值：RouteType.None。
duration	number	否	动画的时长。单位：毫秒默认值：1000
curve	Curve\| string	否	动画曲线。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"。默认值：Curve.Linear
delay	number	否	动画延迟时长。单位：毫秒默认值：0 说明：没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异)，如需禁用系统默认页面转场效果，可以指定duration为0。

属性

参数名称	参数类型	必填	参数描述
slide	SlideEffect	否	设置页面转场时的滑入滑出效果。默认值：SlideEffect.Right
translate	{ x? : number \| string, y? : number \| string, z? : number \| string }	否	设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。 - x：横向的平移距离。 - y：纵向的平移距离。 - z：竖向的平移距离。
scale	{ x? : number, y? : number, z? : number, centerX? : number \| string, centerY? : number \| string }	否	设置页面转场时的缩放效果，为入场时起点和退场时终点的值。 - x：横向放大倍数（或缩小比例）。 - y：纵向放大倍数（或缩小比例）。 - z：竖向放大倍数（或缩小比例）。 - centerX、centerY缩放中心点。 - 中心点为0时，默认的是组件的左上角。
opacity	number	否	设置入场的起点透明度值或者退场的终点透明度值。默认值：1

事件

事件	功能描述
onEnter(event: (type?: RouteType, progress?: number) => void)	回调入参为当前入场动画的归一化进度[0 - 1]。 - type：跳转方法。 - progress：当前进度。触发该事件的条件：逐帧回调，直到入场动画结束，progress从0变化到1。
onExit(event: (type?: RouteType, progress?: number) => void)	回调入参为当前退场动画的归一化进度[0 - 1]。 - type：跳转方法。 - progress：当前进度。触发该事件的条件：逐帧回调，直到退场动画结束，progress从0变化到1。

功能描述

onEnter(event: (type?: RouteType, progress?: number) => void)

回调入参为当前入场动画的归一化进度[0 - 1]。

- type：跳转方法。

- progress：当前进度。

触发该事件的条件：

逐帧回调，直到入场动画结束，progress从0变化到1。

onExit(event: (type?: RouteType, progress?: number) => void)

回调入参为当前退场动画的归一化进度[0 - 1]。

- type：跳转方法。

- progress：当前进度。

触发该事件的条件：

逐帧回调，直到退场动画结束，progress从0变化到1。

RouteType枚举说明

名称	描述
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枚举说明

名称	描述
Left	设置到入场时表示从左边滑入，出场时表示滑出到左边。
Right	设置到入场时表示从右边滑入，出场时表示滑出到右边。
Top	设置到入场时表示从上边滑入，出场时表示滑出到上边。
Bottom	设置到入场时表示从下边滑入，出场时表示滑出到下边。