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

第一步：导入 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。

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

设置到入场时表示从下边滑入，出场时表示滑出到下边。

交流学习 

添加下方名片，拉您