回复
HarmonyOS 鸿蒙 ArkTS ArkUI 页面之间切换转换动画设置 原创
特创码农
发布于 2024-2-12 13:53
浏览
0收藏
第一步:导入
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修改
赞
收藏
回复
相关推荐