#鸿蒙通关秘籍#如何使用animateTo接口在ArkTS卡片中实现显式动画？

在ArkTS卡片中使用animateTo接口来实现显式动画需要在API version 9或以上。在构建UI时，可以通过animateTo函数定义动画的参数和状态变化的逻辑。下面是一个示例，演示如何根据按钮点击事件使用animateTo接口来改变组件的大小：

@Entry
@Component
struct AnimateToExample {
  @State widthSize: number = 250
  @State heightSize: number = 100
  private flag: boolean = true

  build() {
    Column() {
      Button('change size')
        .width(this.widthSize)
        .height(this.heightSize)
        .margin(30)
        .onClick(() => {
          if (this.flag) {
            animateTo({
              duration: 2000,
              curve: Curve.EaseOut,
              iterations: 3,
              playMode: PlayMode.Normal,
              onFinish: () => {
                console.info('play end')
              }
            }, () => {
              this.widthSize = 150
              this.heightSize = 60
            })
          } else {
            animateTo({}, () => {
              this.widthSize = 250
              this.heightSize = 100
            })
          }
          this.flag = !this.flag
        })
    }
  }
}

这个示例中，通过animateTo接口设置了动画的duration、curve等参数，并在event回调中定义具体的状态变化。