组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
duration 设置动画时长。
默认值:1000
单位:毫秒
curve 设置动画曲线
默认值:Curve.EaseInOut
delay 设置动画延迟执行的时长。
默认值:0,不延迟播放。
单位:毫秒
iterations 设置播放次数。
默认值:1
设置为-1时表示无限次播放。设置为0时表示无动画效果。
@Entry
@Component
struct Index {
@State message: string = '点我';
build() {
Button(`${this.message}`)
.width(100)
.stateStyles({
normal:{
.height(200)
},
pressed:{
.width(200)
.height(400)
}
})
.animation({
duration:2000, //动画速度持续两秒
curve:Curve.Ease,//动画曲线
delay:2000, //动画将在2000毫秒后执行
iterations:3 //动画播放次数
})
}
}