526互联

二十、属性动画（animation）

发布时间 2024-01-02 12:54:49作者: 创客未来

使用属性动画产生布局更新动画

属性动画：动画设置简单，属性变化时自动触发动画。

显示动画把要执行动画的属性的修改放在闭包函数中触发动画，而属性动画则无需要使用闭包，把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})
  }
}