中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效。 说明:从API Version 7开始支持。开发语言ets. routerType枚举说明: 属性: SlideEffect枚举说明: 代码实例: transitionAnimation.ets
@Entry @Component struct TransitionAnimation { @State scale1: number = 1 @State opacity1: number = 1 build() { Column() { Navigator({ target: 'pages/transitionAnimation02', type: NavigationType.Push }) { Image($r('app.media.icon')).width(200).height(200) // 图片存放在media文件夹下 } }.scale({ x: this.scale1 }).opacity(this.opacity1) } // 自定义方式1:完全自定义转场过程的效果 pageTransition() { PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) .onEnter((type: RouteType, progress: number) => { this.scale1 = 1 this.opacity1 = progress }) // 进场过程中会逐帧触发onEnter回调,入参为动效的归一化进度(0% -- 100%) PageTransitionExit({ duration: 1500, curve: Curve.Ease }) .onExit((type: RouteType, progress: number) => { this.scale1 = 1 - progress this.opacity1 = 1 }) // 退场过程中会逐帧触发onExit回调,入参为动效的归一化进度(0% -- 100%) } }
transitionAnimation02.ets
@Entry @Component struct TransitionAnimation02 { @State scale2: number = 1 @State opacity2: number = 1 build() { Column() { Navigator({ target: 'pages/transitionAnimation', type: NavigationType.Push }) { Image($r('app.media.widget')).width(200).height(200) // 图片存放在media文件夹下 } }.width('100%').height('100%').scale({ x: this.scale2 }).opacity(this.opacity2) } // 自定义方式1:完全自定义转场过程的效果 pageTransition() { PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) .onEnter((type: RouteType, progress: number) => { this.scale2 = 1 this.opacity2 = progress }) // 进场过程中会逐帧触发onEnter回调,入参为动效的归一化进度(0% -- 100%) PageTransitionExit({ duration: 1500, curve: Curve.Ease }) .onExit((type: RouteType, progress: number) => { this.scale2 = 1 - progress this.opacity2 = 1 }) // 退场过程中会逐帧触发onExit回调,入参为动效的归一化进度(0% -- 100%) } }
示例效果: 参考地址:https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-page-transition-animation-0000001380440914-V3
微信扫码分享