二十、属性动画(animation)
使用属性动画产生布局更新动画
属性动画:动画设置简单,属性变化时自动触发动画。
显示动画把要执行动画的属性的修改放在闭包函数中触发动画,而属性动画则无需要使用闭包,把animation属性加在要做属性动画的组件的属性后即可。
animation(value:AnimateParam)
其入参为动画参数。想要组件随某个属性值的变化而产生动画,此属性需要加在animation属性之前。有的属性变化不希望通过animation产生属性动画,可以放在animation之后。上面显示动画的示例很容易改为用属性动画来实现。
重要:
1.使用属性动画时,会按照指定的属性动画参数执行动画。每个组件可为自己的属性配置不同参数的属性动画。
2.显示动画会对动画闭包前后造成的所有界面差异执行动画,且使用同一动画参数,适用于统一执行的场景。此外,显示动画也可以用于一些非属性变量造成的动画,如if/else的条件,ForEach使用的数组元素的删减。
3.如果一个属性配置了属性动画,且在显示动画闭包中改变该属性值,属性动画优先生效,会使用属性动画的动画参数。
案例代码:
@Entry @Component struct AttrAnimation { @State widthSize:number = 250 @State heightSize: number = 100 @State rotateAngle: number = 0 @State flag: boolean = true build() { Column() { Button('change size') .onClick(() => { if(this.flag){ this.widthSize = 250 this.heightSize = 100 }else { this.widthSize = 150 this.heightSize =50 } this.flag = !this.flag }) .margin(30) .width(this.widthSize) .height(this.heightSize) // 写在属性后边,这里是让width和height属性进行改变,所以animation应该在width和height属性后使用。 .animation({ duration:2000, iterations:3, curve:Curve.Linear, playMode:PlayMode.Alternate }) Button('change rotate angle') .onClick(() => { this.rotateAngle = 90 }) .margin(50) .rotate({angle:this.rotateAngle}) .animation({ duration:1000, iterations:-1, curve:Curve.Linear, playMode:PlayMode.Alternate }) }.width('100%').margin({top:20}) } }