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

屬性動(dòng)畫屬性動(dòng)畫概述屬性動(dòng)畫是組件的通用屬性發(fā)生改變時(shí)而產(chǎn)生的屬性漸變效果。支持的屬性包括width、height、backgroundColor、opacity、scale、rotate、translate等。使用屬性動(dòng)畫時(shí)，需要給組件（包括基礎(chǔ)組件和容器組件）添加animation屬性，并設(shè)置好參數(shù)。屬性動(dòng)畫的參數(shù)animation參數(shù)說(shuō)明：參數(shù)名參數(shù)類型必填參數(shù)描述durationnumber否設(shè)置動(dòng)畫時(shí)長(zhǎng)。單位為毫秒，默認(rèn)動(dòng)畫時(shí)長(zhǎng)為1000毫秒。默認(rèn)值：1000temponumber否動(dòng)畫播放速度。數(shù)值越大，動(dòng)畫播放速度越快，數(shù)值越小，播放速度越慢值為0時(shí)，表示不存在動(dòng)畫。默認(rèn)值：1curveCurve否設(shè)置動(dòng)畫曲線。默認(rèn)曲線為線性。默認(rèn)值：Curve.Lineardelaynumber否設(shè)置動(dòng)畫延遲執(zhí)行的時(shí)長(zhǎng)。單位為毫秒，默認(rèn)不延時(shí)播放。默認(rèn)值：0iterationsnumber否設(shè)置播放次數(shù)。默認(rèn)播放一次，設(shè)置為-1時(shí)表示無(wú)限次播放。默認(rèn)值：1playModePlayMode否設(shè)置動(dòng)畫播放模式，默認(rèn)播放完成后重頭開(kāi)始播放。默認(rèn)值：PlayMode.NormalonFinish()=>void否狀態(tài)回調(diào)，動(dòng)畫播放完成時(shí)觸發(fā)。屬性動(dòng)畫的參數(shù)其中變化曲線curve枚舉值為：名稱描述名稱描述Linear表示動(dòng)畫從頭到尾的速度都是相同的。FastOutLinearIn加速曲線Ease表示動(dòng)畫以低速開(kāi)始，然后加快，在結(jié)束前變慢ExtremeDeceleration急緩曲線EaseIn表示動(dòng)畫以低速開(kāi)始Sharp銳利曲線EaseOut表示動(dòng)畫以低速結(jié)束Rhythm節(jié)奏曲線EaseInOut表示動(dòng)畫以低速開(kāi)始和結(jié)束Smooth平滑曲線FastOutSlowIn標(biāo)準(zhǔn)曲線Friction阻尼曲線屬性動(dòng)畫的參數(shù)播放模式playMode枚舉值為：名稱描述Normal動(dòng)畫按正常播放。Reverse動(dòng)畫反向播放。Alternate動(dòng)畫在奇數(shù)次（1、3、5...）正向播放，在偶數(shù)次（2、4、6...）反向播放。AlternateReverse動(dòng)畫在奇數(shù)次（1、3、5...）反向播放，在偶數(shù)次（2、4、6...）正向播放。屬性動(dòng)畫使用示例1-寬高變化

@State

widthSize:

number

=

250

@State

heightSize:

number

=

100

@State

flag:

boolean

=

true...省略代碼

Button('change

width

and

height')

.onClick(()

=>

{

if

(this.flag)

{

this.widthSize

=

100

this.heightSize

=

50

}

else

{

this.widthSize

=

250

this.heightSize

=

100

}

this.flag

=

!this.flag

})

.margin(30)

.width(this.widthSize)

.height(this.heightSize)

.animation({

duration:

2000,

curve:

Curve.EaseOut,

iterations:

3,

playMode:

PlayMode.Normal

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

rotateAngle:

number

=

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

rotate

angle')

.onClick(()

=>

{

this.rotateAngle

=

90

})

.margin(50)

.rotate({

angle:

this.rotateAngle

})

.animation({

duration:

1200,

curve:

Curve.Friction,