《HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)》 課件知識(shí)點(diǎn)2-14-2 顯示動(dòng)畫(huà)

顯示動(dòng)畫(huà)顯示動(dòng)畫(huà)概述提供全局animateTo顯式動(dòng)畫(huà)接口來(lái)指定由于閉包代碼導(dǎo)致的狀態(tài)變化插入過(guò)渡動(dòng)效。接口描述：animateTo(value:AnimateParam,event:()=>void):void顯示動(dòng)畫(huà)的參數(shù)參數(shù)說(shuō)明：參數(shù)名參數(shù)類型必填參數(shù)描述valueAnimateParam是設(shè)置動(dòng)畫(huà)效果相關(guān)參數(shù)。event()=>void是指定顯示動(dòng)效的閉包函數(shù)，在閉包函數(shù)中導(dǎo)致的狀態(tài)變化系統(tǒng)會(huì)自動(dòng)插入過(guò)渡動(dòng)畫(huà)。顯示動(dòng)畫(huà)的參數(shù)AnimateParam對(duì)象說(shuō)明：名稱類型描述durationnumber動(dòng)畫(huà)持續(xù)時(shí)間，單位為毫秒。默認(rèn)值：1000temponumber動(dòng)畫(huà)的播放速度，值越大動(dòng)畫(huà)播放越快，值越小播放越慢，為0時(shí)無(wú)動(dòng)畫(huà)效果。默認(rèn)值：1.0curveCurve動(dòng)畫(huà)曲線。默認(rèn)值：Curve.Lineardelaynumber單位為ms(毫秒)，默認(rèn)不延時(shí)播放。默認(rèn)值：0iterationsnumber默認(rèn)播放一次，設(shè)置為-1時(shí)表示無(wú)限次播放。默認(rèn)值：1playModePlayMode設(shè)置動(dòng)畫(huà)播放模式，默認(rèn)播放完成后重頭開(kāi)始播放。默認(rèn)值：PlayMode.NormalonFinish()=>void動(dòng)效播放完成回調(diào)。顯示動(dòng)畫(huà)使用示例1-改變寬高

@State

widthSize:

number

=

250

@State

heightSize:

number

=

100

private

flag:

boolean

=

true...省略代碼Button('change

width

and

height')

.width(this.widthSize).height(this.heightSize).margin(30)

.onClick(()

=>

{

if

(this.flag)

{

animateTo({

duration:

2000,

curve:

Curve.EaseOut,

iterations:

3,

playMode:

PlayMode.Normal,

onFinish:

()

=>

{

console.info('play

end')

}

},

()

=>

{

this.widthSize

=

100

this.heightSize

=

50

})

}

else

{

animateTo({},

()

=>

{

this.widthSize

=

250

this.heightSize

=

100

})

}

this.flag

=

!this.flag

})})顯示動(dòng)畫(huà)使用示例2-旋轉(zhuǎn)@State

rotateAngle:

number

=

0...省略代碼Button('change

rotate

angle')

.margin(50)

.rotate({

x:

0,

y:

0,

z:

1,

angle:

this.rotateAngle

})

.onClick(()

=>

{

animateTo({

duration:

1200,

curve:

Curve.Friction,

delay:

500,

iterations:

-1,

//

設(shè)置-1表示動(dòng)畫(huà)無(wú)限循環(huán)

playMode:

PlayMode.AlternateReverse,

onFinish:

()

=>

{

con