#鸿蒙通关秘籍#如何在ArkTS卡片中使用动画属性实现渐变过渡效果？

从API Version 9开始，ArkTS卡片支持动画属性，实现组件属性变化时的渐变过渡。可以通过animation接口设置动画参数，如动画时长、播放速度、曲线、延迟、播放次数等，增强用户体验。以下是一个关于如何在ArkTS卡片中使用动画的示例：

@Entry
@Component
struct AttrAnimationExample {
  @State widthSize: number = 250
  @State heightSize: number = 100

  build() {
    Column() {
      Button('change size')
        .onClick(() => {
          if (this.widthSize === 250) {
            this.widthSize = 150
            this.heightSize = 60
          } else {
            this.widthSize = 250
            this.heightSize = 100
          }
        })
        .margin(30)
        .width(this.widthSize)
        .height(this.heightSize)
        .animation({
          duration: 2000,
          curve: Curve.EaseOut,
          iterations: 3
        })
    }.width('100%').margin({ top: 20 })
  }
}

核心步骤：

1. 通过 @State 装饰器定义可变属性。
2. 使用 animation 方法配置动画的duration、curve等参数。
3. 在按钮点击时通过onClick事件切换属性值以呈现动画效果。