10.3：属性动画

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

10.3.1：属性动画的定义

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

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

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

  简单样例如下所示：

  @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)
    }
  }
  

  运行结果如下图所示：

  

10.2.2：小结

本节简单介绍了属性动画 animation 的使用，在应用开发过程中适当的添加动画，可以有效提升用户体验，需要注意的是该方法只对通用属性有效。

(adsbygoogle = window.adsbygoogle || []).push({});