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

第一步：导入

1. import promptAction from '@ohos.promptAction'

复制代码

第二步：在build下方写入

1. pageTransition(){
2.     PageTransitionEnter({ duration: 1200 })
3.       .slide(SlideEffect.Right)
4.     PageTransitionExit({ delay: 100 })
5.       .translate({ x: 100.0, y: 100.0 })
6.       .opacity(0)
7.   }

复制代码

参考

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
  设置到入场时表现从下边滑入，出场时表现滑出到下边。
  交换学习 

添加下方手刺，拉您

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