属性动画

属性动画也是动画的一种，当组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验，本节将介绍一下属性动画的基本使用。

属性动画的定义

bash


declare class CommonMethod<T> {
  animation(value: AnimateParam): T;
}

animation：

开启组件的属性动画，该方法在 CommonMethod 中定义，这就说明组件只要继承了 CommonMethod ，那么它将具有属性动画的能力，该方法一个 AnimateParam 参数，参数说明如下：

duration：动画的执行时间，单位为毫秒，默认 1000 毫秒。
curve：动画插值器，默认曲线为线性。
delay：动画延迟执行的时长，单位为毫秒，默认为 0 毫秒。
iterations：动画的执行次数，默认为 1 次，当设置为 -1 时表示循环执行。
playMode：动画的播放模式，默认播放完成后重头开始播放。

简单样式如下:

bash


@Entry @Component struct ComponentTest {

  @State btnWidth: number = 160;
  @State btnHeight: number = 60;

  build() {
    Column({space: 10}) {
      Button({type: ButtonType.Normal}) {
        Text("Anim")
          .fontSize(20)
      }
      .width(this.btnWidth)
      .height(this.btnHeight)
      .borderRadius(8)
      .backgroundColor('#aabbcc')
      .animation({
        duration: 1300,           // 设置动画指定时长
        curve: Curve.Friction,    // 设置动画曲线样式
        iterations: 2,            // 设置动画执行2遍
        playMode: PlayMode.Normal // 设置播放模式
      })
      .onClick(() => {            // 点击Button的时候执行动画
        this.btnWidth = 80;       // 对Button的宽进行属性动画
        this.btnHeight = 40;      // 对Button的高进行属性动画
      })
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

运行结果如下图所示：

属性动画 ​

属性动画的定义 ​

animation： ​

属性动画

属性动画的定义

animation：