《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識點(diǎn)2-14-3 轉(zhuǎn)場動畫

轉(zhuǎn)場動畫0102組件內(nèi)的轉(zhuǎn)場動畫頁面間的轉(zhuǎn)場動畫組件內(nèi)的轉(zhuǎn)場動畫概述組件內(nèi)轉(zhuǎn)場主要通過transition屬性配置轉(zhuǎn)場參數(shù)，在組件插入和刪除時(shí)顯示過渡動效，主要用于容器組件中的子組件插入和刪除時(shí)，提升用戶體驗(yàn)（需要配合animateTo才能生效，動效時(shí)長、曲線、延時(shí)跟隨animateTo中的配置）。如右圖所示。組件內(nèi)的轉(zhuǎn)場動畫屬性名稱類型描述transitionTransitionOptions所有參數(shù)均為可選參數(shù)，詳細(xì)描述見TransitionOptions參數(shù)說明。組件的轉(zhuǎn)場動畫屬性說明：組件內(nèi)的轉(zhuǎn)場動畫屬性TransitionOptions參數(shù)說明：參數(shù)名參數(shù)類型必填參數(shù)描述typeTransitionType否默認(rèn)包括組件新增和刪除。默認(rèn)值：TransitionType.All說明：不指定Type時(shí)說明插入刪除使用同一種效果。opacitynumber否設(shè)置組件轉(zhuǎn)場時(shí)的透明度效果，為插入時(shí)起點(diǎn)和刪除時(shí)終點(diǎn)的值。默認(rèn)值：1translate{x?:number|string,y?:number|string,z?:number|string}否設(shè)置組件轉(zhuǎn)場時(shí)的平移效果，為插入時(shí)起點(diǎn)和刪除時(shí)終點(diǎn)的值。-x：橫向的平移距離。-y：縱向的平移距離。-z：豎向的平移距離。組件內(nèi)的轉(zhuǎn)場動畫屬性TransitionOptions參數(shù)說明：參數(shù)名參數(shù)類型必填參數(shù)描述scale{x?:number,y?:number,z?:number,centerX?:number|string,centerY?:number|string}否設(shè)置組件轉(zhuǎn)場時(shí)的縮放效果，為插入時(shí)起點(diǎn)和刪除時(shí)終點(diǎn)的值。-x：橫向放大倍數(shù)（或縮小比例）。-y：縱向放大倍數(shù)（或縮小比例）。-z：豎向放大倍數(shù)（或縮小比例）。-centerX、centerY指縮放中心點(diǎn)，centerX和centerY默認(rèn)值是"50%"。-中心點(diǎn)為0時(shí)，默認(rèn)的是組件的左上角。rotate{x?:number,y?:number,z?:number,angle?:number|string,centerX?:number|string,centerY?:number|string}否設(shè)置組件轉(zhuǎn)場時(shí)的旋轉(zhuǎn)效果，為插入時(shí)起點(diǎn)和刪除時(shí)終點(diǎn)的值。-x：橫向的旋轉(zhuǎn)向量。-y：縱向的旋轉(zhuǎn)向量。-z：豎向的旋轉(zhuǎn)向量。-centerX,centerY指旋轉(zhuǎn)中心點(diǎn)，centerX和centerY默認(rèn)值是"50%"。-中心點(diǎn)為（0，0）時(shí)，默認(rèn)的是組件的左上角。組件內(nèi)的轉(zhuǎn)場動畫使用示例@Entry@Componentstruct

TransitionExample

{

@State

flag:

boolean

=

true

@State

show:

string

=

'hide'

build()

{

Column()

{

Button(this.show).width(80).height(30).margin(30)

.onClick(()

=>

{

//

點(diǎn)擊Button控制Image的顯示和消失

animateTo({

duration:

3000

},

()

=>

{

if

(this.flag)

{

this.show

=

'show'

}

else

{

this.show

=

'hide'

}

this.flag

=

!this.flag

})

})

if

(this.flag)

{

//

Image的顯示和消失配置為不同的過渡效果

Image($r('app.media.testImg')).width(300).height(300)

.transition({

type:

TransitionType.Insert,

scale:

{

x:

0,

y:

1.0

}

})

.transition({

type:

TransitionType.Delete,

rotate:

{

angle:

180

}

})

}

}.width('100%')

}}頁面間的轉(zhuǎn)場動畫概述頁面轉(zhuǎn)場動畫是指頁面在打開或者關(guān)閉時(shí)添加的動畫效果，需要在全局pageTransition方法內(nèi)配置頁面入場和頁面退場時(shí)的自定義轉(zhuǎn)場動效。如右圖所示。頁面間的轉(zhuǎn)場動畫全局方法名稱參數(shù)參數(shù)描述PageTransitionEnter{type?:RouteType,duration?:number,curve?:

Curvedelay?:number}設(shè)置當(dāng)前頁面的自定義入場動效。-type：頁面轉(zhuǎn)場效果生效的路由類型。默認(rèn)值：RouteType.None。說明：沒有匹配時(shí)使用系統(tǒng)默認(rèn)的頁面轉(zhuǎn)場效果(根據(jù)設(shè)備可能會有差異)，如需禁用系統(tǒng)默認(rèn)頁面轉(zhuǎn)場效果，可以指定duration為0。-duration：動畫的時(shí)長，單位為毫秒。-curve：動畫曲線。string類型的取值支持"ease"、"ease-in"、"ease-out"、"ease-in-out"、"extreme-deceleration"、"fast-out-linear-in"、"fast-out-slow-in"、"friction"、"linear"、"linear-out-slow-in"、"rhythm"、"sharp"、"smooth"。默認(rèn)值：Curve.Linear-delay：動畫延遲時(shí)長，單位為毫秒，默認(rèn)不延遲播放。頁面間的轉(zhuǎn)場動畫全局方法名稱參數(shù)參數(shù)描述PageTransitionExit{type?:RouteType,duration?:number,curve?:

Curve,delay?:number}設(shè)置當(dāng)前頁面的自定義退場動效。-type：頁面轉(zhuǎn)場效果生效的路由類型。默認(rèn)值：RouteType.None。說明：沒有匹配時(shí)使用系統(tǒng)默認(rèn)的頁面轉(zhuǎn)場效果(根據(jù)設(shè)備可能會有差異)，如需禁用系統(tǒng)默認(rèn)頁面轉(zhuǎn)場效果，可以指定duration為0。-duration：動畫的時(shí)長，單位為毫秒。-curve：動畫曲線，string類型取值與PageTransitionEnter相同。默認(rèn)值：Curve.Linear-delay：動畫延遲時(shí)長，單位為毫秒，默認(rèn)不延遲播放。頁面組件的轉(zhuǎn)場動畫屬性參數(shù)名參數(shù)類型必填參數(shù)描述lideSlideEffect否設(shè)置頁面轉(zhuǎn)場時(shí)的滑入滑出效果。默認(rèn)值：SlideEffect.Righttranslate{x?:number|string,y?:number|string,z?:number|string}否設(shè)置頁面轉(zhuǎn)場時(shí)的平移效果，為入場時(shí)起點(diǎn)和退場時(shí)終點(diǎn)的值，和slide同時(shí)設(shè)置時(shí)默認(rèn)生效slide。-x：橫向的平移距離。-y：縱向的平移距離。-z：豎向的平移距離。scale{x?:number,y?:number,z?:number,centerX?:number|string,centerY?:number|string}否設(shè)置頁面轉(zhuǎn)場時(shí)的縮放效果，為入場時(shí)起點(diǎn)和退場時(shí)終點(diǎn)的值。-x：橫向放大倍數(shù)（或縮小比例）。-y：縱向放大倍數(shù)（或縮小比例）。-z：豎向放大倍數(shù)（或縮小比例）。-centerX、centerY縮放中心點(diǎn)。-中心點(diǎn)為0時(shí)，默認(rèn)的是組件的左上角。opacitynumber否設(shè)置入場的起點(diǎn)透明度值或者退場的終點(diǎn)透明度值。默認(rèn)值：1頁面間的轉(zhuǎn)場動畫使用示例@Entry@Componentstruct

PageTransitionExample1

{

@State

scale1:

number

=

1

@State

opacity1:

number

=

1

build()

{

Column()

{

Navigator({

target:

'pages/page1',

type:

NavigationType.Push

})

{

Image($r('app.media.bg1')).width('100%').height('100%')

//

圖片存放在media文件夾下

}

}.scale({

x:

this.scale1

}).opacity(this.opacity1)

}

//

自定義方式1：完全自定義轉(zhuǎn)場過程的效果

pageTransition()

{

PageTransitionEnter({

duration:

1200,

curve:

Curve.Linear

})

.onEnter((type:

RouteType,

progress:

number)

=>

{

this.scale1

=

1

this.opacity1

=

progress

})

//

進(jìn)場過程中會逐幀觸發(fā)onEnter回調(diào)，入?yún)閯有У臍w一化進(jìn)度(0%

--

100%)

PageTransitionExit({

duration:

1500,

curve:

Curve.Ease

})

.onExit((type:

RouteType,

progress:

number)

=>

{

this.scale1

=

1

-

progress

this.opacity1

=

1

})

//

退場過程中會逐幀觸發(fā)onExit回調(diào)，入?yún)閯有У臍w一化進(jìn)度(0%

--

100%)

}}當(dāng)前頁面代碼頁面間的轉(zhuǎn)場動畫使用示例@Entry@Componentstruct

AExample

{

@State

scale2:

number

=

1

@State

opacity2:

number

=

1

build()

{

Column()

{

Navigator({

target:

'pages/PageTransitionExample1',

type:

NavigationType.Back

})

{

Image($r('app.media.bg2')).width('100%').height('100%')

//

圖片存放在media文件夾下

}

}.width('100%').height('100%').scale({

x:

this.scale2

}).opacity(this.opacity2)

}

//

自定義方式1：完全自定義轉(zhuǎn)場過程的效果

pageTransition()

{

PageTransitionEnter({

duration:

1200,

curve:

Curve.Linear

})

.onEnter((type:

RouteType,

progress:

number)

=>

{

this.scale2

=

1

this.opacity2

=

progress

})

//

進(jìn)場過程中會逐幀觸發(fā)onEnter回調(diào)，入?yún)閯有У臍w一化進(jìn)度(0%

--

100%)

PageTransitionExit({

duration:

1500,

curve:

Curve.Ease

})

.onExit((type:

RouteType,

progress:

number)

=>

{

this.scale2

=

1

-

progress

this.opacity2

=

1

})

//

退場過程中會逐幀觸發(fā)onExit回調(diào)，入?yún)閯有У臍w一化進(jìn)度(0%

--

100%)

}}目標(biāo)頁面代碼共享元素轉(zhuǎn)場共享元素的轉(zhuǎn)場是另一種頁面間的轉(zhuǎn)場動畫，組件使用sharedTransition屬性共享元素。屬性說明：名稱類型描述sharedTransitionid:string,{duration?:number,curve?:Curve,delay?:number,motionPath?:{path:string,form?:number,to?:number,rotatable?:boolean},zIndex?:number,type?:

SharedTransitionEffectType}兩個(gè)頁面中id值相同且不為空字符串的組件即為共享元素，在頁面轉(zhuǎn)場時(shí)可顯示共享元素轉(zhuǎn)場動效。-id：設(shè)置組件的id。-duration：單位為毫秒，默認(rèn)動畫時(shí)長為1000毫秒。-curve：默認(rèn)曲線為Linear，有效值參見Curve說明。-delay：單位為毫秒，默認(rèn)不延時(shí)播放。-motionPath：運(yùn)動路徑信息，詳細(xì)說明請參考路徑動畫。-path：設(shè)置路徑。-from：設(shè)置起始值。-to：設(shè)置終止值。-rotatable：是否旋轉(zhuǎn)。-zIndex：設(shè)置Z軸。-type：動畫類型。共享元素轉(zhuǎn)場使用示例@Entry@Compone