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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2024-2-13 15:20:49修改
收藏
回复
举报
回复
    相关推荐