# 10.3:属性动画

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

# 10.3.1:属性动画的定义

declare class CommonMethod<T> {
  animation(value: AnimateParam): T;
}
1
2
3
  • 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)
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31

    运行结果如下图所示:

    10_3_1_1

# 10.2.2:小结

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

(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2