《HarmonyOS应用开发基础》 课件知识点2-14-1 属性动画

属性动画属性动画概述属性动画是组件的通用属性发生改变时而产生的属性渐变效果。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。使用属性动画时，需要给组件（包括基础组件和容器组件）添加animation属性，并设置好参数。属性动画的参数animation参数说明：参数名参数类型必填参数描述durationnumber否设置动画时长。单位为毫秒，默认动画时长为1000毫秒。默认值：1000temponumber否动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢值为0时，表示不存在动画。默认值：1curveCurve否设置动画曲线。默认曲线为线性。默认值：Curve.Lineardelaynumber否设置动画延迟执行的时长。单位为毫秒，默认不延时播放。默认值：0iterationsnumber否设置播放次数。默认播放一次，设置为-1时表示无限次播放。默认值：1playModePlayMode否设置动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.NormalonFinish()=>void否状态回调，动画播放完成时触发。属性动画的参数其中变化曲线curve枚举值为：名称描述名称描述Linear表示动画从头到尾的速度都是相同的。FastOutLinearIn加速曲线Ease表示动画以低速开始，然后加快，在结束前变慢ExtremeDeceleration急缓曲线EaseIn表示动画以低速开始Sharp锐利曲线EaseOut表示动画以低速结束Rhythm节奏曲线EaseInOut表示动画以低速开始和结束Smooth平滑曲线FastOutSlowIn标准曲线Friction阻尼曲线属性动画的参数播放模式playMode枚举值为：名称描述Normal动画按正常播放。Reverse动画反向播放。Alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。AlternateReverse动画在奇数次（1、3、5...）反向播放，在偶数次（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-旋转@State

rotateAngle:

number

=

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

rotate

angle')

.onClick(()

=>

{

this.rotateAngle

=

90

})

.margin(50)

.rotate({

angle:

this.rotateAngle

})

.animation({

duration:

1200,

curve:

Curve.Friction,