
回复
说明:该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
一、页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。
PageTransitionEnter和PageTransitionExit组件支持的属性
PageTransitionEnter和PageTransitionExit组件支持的事件:
二、示例
效果展示:
示例代码:
index.ets
@Entry
@Component
struct PageTransitionExample1 {
@State scale: number = 1
@State opacity: number = 1
@State active: boolean = false
build() {
Column() {
Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
Image($rawfile("fss.jpg")).width("100%").height("100%")
}
.onClick(() => {
this.active = true
})
}.scale({ x: this.scale }).opacity(this.opacity)
}
// 自定义方式1:完全自定义转场过程的效果
pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => {
this.scale = 1
this.opacity = progress
}) // 进场过程中会逐帧触发onEnter回调,入参为动效的归一化进度(0% -- 100%)
PageTransitionExit({ duration: 1500, curve: Curve.Ease })
.onExit((type: RouteType, progress: number) => {
this.scale = 1 - progress
this.opacity = 1
}) // 退场过程中会逐帧触发onExit回调,入参为动效的归一化进度(0% -- 100%)
}
}
page1.ets
// page1.ets
@Entry
@Component
struct AExample {
@State scale: number = 1
@State opacity: number = 1
@State active: boolean = false
build() {
Column() {
Navigator({ target: 'pages/index' ,type: NavigationType.Push}) {
Image($rawfile("gz.jpg")).width("100%").height("100%")
}
}.height("100%").width("100%").scale({ x: this.scale }).opacity(this.opacity)
}
// 自定义方式1:完全自定义转场过程的效果
pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => {
this.scale = 1
this.opacity = progress
}) // 进场过程中会逐帧触发onEnter回调,入参为动效的归一化进度(0% -- 100%)
PageTransitionExit({ duration: 1500, curve: Curve.Ease })
.onExit((type: RouteType, progress: number) => {
this.scale = 1 - progress
this.opacity = 1
}) // 退场过程中会逐帧触发onExit回调,入参为动效的归一化进度(0% -- 100%)
}
}
完整代码地址:
https://gitee.com/jltfcloudcn/jump_to/tree/master/PageTransitionAnimation