网站开发选定制还是模板,陕西高端建设网站,中文网站排名,网站安全建设方案步骤页面转场动画 在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效 两个页面间发生跳转#xff0c;一个页面消失#xff0c;另一个页面出现#xff0c;这时可以配置各自页面的页面转场参数实现自定义的页面转场效果。页面转场效果写在pageTransition函数中…
页面转场动画 在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效 两个页面间发生跳转一个页面消失另一个页面出现这时可以配置各自页面的页面转场参数实现自定义的页面转场效果。页面转场效果写在pageTransition函数中通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果。 TransitionPage1
import router from ohos.router
Entry
Component
struct TransitionPage1 {State scaleValue: number 1State 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 1State 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 })
}
