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

特创码农

发布于 2024-2-12 13:53

浏览

0收藏

HarmonyOS 鸿蒙 ArkTS ArkUI 页面之间切换转换动画设置-鸿蒙开发者社区

第一步：导入

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	设置到入场时表示从下边滑入，出场时表示滑出到下边。