《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識點2-14-1 屬性動畫

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

})屬性動畫使用示例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,