页面转场动画
在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效
两个页面间发生跳转，一个页面消失，另一个页面出现，这时可以配置各自页面的页面转场参数实现自定义的页面转场效果。页面转场效果写在
pageTransition函数中，通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果。
TransitionPage1
import router from '@ohos.router'
@Entry
@Component
struct TransitionPage1 {@State scaleValue: number = 1@State opacityValue: number = 1build() {Column() {Image($r('app.media.pic1')).width('100%').height('100%').scale({ x: this.scaleValue }).opacity(this.opacityValue)}.width('100%').height('100%').onClick(() => {router.pushUrl({url:'pages/TransitionPage2'})})}pageTransition() {PageTransitionEnter({}).onEnter((type: RouteType, progress: number) => {this.scaleValue = 1this.opacityValue = progress})PageTransitionExit({}).onExit((type: RouteType, progress: number) => {this.scaleValue = 1 - progressthis.opacityValue = 1 - progress})}
}
TransitionPage2
import router from '@ohos.router'
@Entry
@Component
struct TransitionPage2 {@State scaleValue: number = 1@State opacityValue: number = 1build() {Column() {Image($r('app.media.pic2')).width('100%').height('100%').scale({ x: this.scaleValue }).opacity(this.opacityValue)}.width('100%').height('100%').onClick(() => {router.back()})}pageTransition() {PageTransitionEnter({}).onEnter((type: RouteType, progress: number) => {this.scaleValue = progressthis.opacityValue = progress})PageTransitionExit({}).onExit((type: RouteType, progress: number) => {this.scaleValue = 1 - progressthis.opacityValue = 1 - progress})}
}
type配置为RouteType.None
type为RouteType.None表示对页面栈的push、pop操作均生效，type的默认值为RouteType.None。
// page A
pageTransition() {// 定义页面进入时的效果，从左侧滑入，时长为1200ms，无论页面栈发生push还是pop操作均可生效PageTransitionEnter({ type: RouteType.None, duration: 1200 }).slide(SlideEffect.Left)// 定义页面退出时的效果，向左侧滑出，时长为1000ms，无论页面栈发生push还是pop操作均可生效PageTransitionExit({ type: RouteType.None, duration: 1000 }).slide(SlideEffect.Left)
}
// page B
pageTransition() {// 定义页面进入时的效果，从右侧滑入，时长为1000ms，无论页面栈发生push还是pop操作均可生效PageTransitionEnter({ type: RouteType.None, duration: 1000 }).slide(SlideEffect.Right)// 定义页面退出时的效果，向右侧滑出，时长为1200ms，无论页面栈发生push还是pop操作均可生效PageTransitionExit({ type: RouteType.None, duration: 1200 }).slide(SlideEffect.Right)
}
禁用某页面的页面转场
通过设置页面转场的时长为0，可使该页面无页面转场动画。
pageTransition() {PageTransitionEnter({ type: RouteType.None, duration: 0 })PageTransitionExit({ type: RouteType.None, duration: 0 })
}
