HarmonyOS應(yīng)用開發(fā)-ets頁(yè)面間轉(zhuǎn)場(chǎng)

1、蛟龍騰飛學(xué)習(xí)分享材料 HarmonyOS應(yīng)用開發(fā)-ets頁(yè)面間轉(zhuǎn)場(chǎng)說(shuō)明：該組件從API version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。一、頁(yè)面轉(zhuǎn)場(chǎng)通過(guò)在全局pageTransition方法內(nèi)配置頁(yè)面入場(chǎng)組件和頁(yè)面退場(chǎng)組件來(lái)自定義頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)效。組件名稱參數(shù)參數(shù)描述PageTransitionEnterObject頁(yè)面入場(chǎng)組件，用于自定義當(dāng)前頁(yè)面的入場(chǎng)效果PageTransitionExitObject頁(yè)面退場(chǎng)組件，用于自定義當(dāng)前頁(yè)面的退場(chǎng)效果PageTransitionEnter和PageTransitionExit組件支持的屬性：參數(shù)名稱參數(shù)類型默認(rèn)值

2、必填參數(shù)描述slideSlideEffectRight否設(shè)置轉(zhuǎn)場(chǎng)的滑入效果translatex? : number,y? : number,z? : number-否設(shè)置頁(yè)面轉(zhuǎn)場(chǎng)時(shí)的平移效果，為入場(chǎng)時(shí)起點(diǎn)和退場(chǎng)時(shí)終點(diǎn)的值，和slide同時(shí)設(shè)置時(shí)默認(rèn)生效slide。scalex? : number,y? : number,z? : number,centerX? : number,centerY? : number-否設(shè)置頁(yè)面轉(zhuǎn)場(chǎng)時(shí)的縮放效果，為入場(chǎng)時(shí)起點(diǎn)和退場(chǎng)時(shí)終點(diǎn)的值。opacitynumber1否設(shè)置入場(chǎng)的起點(diǎn)透明度值或者退場(chǎng)的終點(diǎn)透明度值。PageTransitionEnter和Page

3、TransitionExit組件支持的事件：事件功能描述onEnter(type: RouteType, progress: number) = void回調(diào)入?yún)楫?dāng)前入場(chǎng)動(dòng)畫的歸一化進(jìn)度0 - 1。onExit(type: RouteType, progress: number) = void回調(diào)入?yún)楫?dāng)前退場(chǎng)動(dòng)畫的歸一化進(jìn)度0 - 1。二、示例效果展示：示例代碼：index.etsEntryComponentstruct PageTransitionExample1 State scale: number = 1 State opacity: number = 1 State active

4、: 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：完全自定義轉(zhuǎn)場(chǎng)過(guò)程的效果 pageTransition() PageTransitionEnter( duration: 1200,

5、curve: Curve.Linear ) .onEnter(type: RouteType, progress: number) = this.scale = 1 this.opacity = progress ) / 進(jìn)場(chǎng)過(guò)程中會(huì)逐幀觸發(fā)onEnter回調(diào)，入?yún)閯?dòng)效的歸一化進(jìn)度(0% - 100%) PageTransitionExit( duration: 1500, curve: Curve.Ease ) .onExit(type: RouteType, progress: number) = this.scale = 1 - progress this.opacity = 1 )

6、/ 退場(chǎng)過(guò)程中會(huì)逐幀觸發(fā)onExit回調(diào)，入?yún)閯?dòng)效的歸一化進(jìn)度(0% - 100%) page1.ets/ page1.etsEntryComponentstruct 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%) .h

7、eight(100%).width(100%).scale( x: this.scale ).opacity(this.opacity) / 自定義方式1：完全自定義轉(zhuǎn)場(chǎng)過(guò)程的效果 pageTransition() PageTransitionEnter( duration: 1200, curve: Curve.Linear ) .onEnter(type: RouteType, progress: number) = this.scale = 1 this.opacity = progress ) / 進(jìn)場(chǎng)過(guò)程中會(huì)逐幀觸發(fā)onEnter回調(diào)，入?yún)閯?dòng)效的歸一化進(jìn)度(0% - 100%) PageTransitionExit( duration: 1500, curve: Curve.Ease ) .onExit(type: RouteType, progress: number) = this.scale = 1 - progress this.opacity = 1 ) / 退場(chǎng)過(guò)程中會(huì)逐幀觸發(fā)onExit回調(diào)，入?yún)閯?dòng)效的歸一化進(jìn)度(0% - 100%) 完整代碼地址： HY