HarmonyOS鸿蒙Next中如何使用animateTo和.animation实现UI动画效果？

实现思路：

1. 使用 animateTo 显式动画，在回调中修改状态触发动画：

@State scale: number = 1;

Button('缩放')
  .scale({ x: this.scale, y: this.scale })
  .onClick(() => {
    animateTo({
      duration: 300,
      curve: Curve.EaseInOut
    }, () => {
      this.scale = this.scale === 1 ? 1.5 : 1;
    });
  })

1. 使用 .animation 属性动画，自动对属性变化添加动画：

@State opacity: number = 1;

Button('透明度')
  .opacity(this.opacity)
  .animation({ duration: 500, curve: Curve.Linear })
  .onClick(() => {
    this.opacity = this.opacity === 1 ? 0.3 : 1;
  })

1. 实现旋转动画：

@State angle: number = 0;

Image($r('app.media.icon'))
  .rotate({ angle: this.angle })
  .onClick(() => {
    animateTo({ duration: 500 }, () => {
      this.angle += 360;
    });
  })

1. 完整示例代码：

@Entry
@Component
struct AnimationExample {
  @State scale: number = 1;
  @State opacity: number = 1;
  @State angle: number = 0;
  @State translateX: number = 0;
  @State isExpanded: boolean = false;

  build() {
    Column({ space: 20 }) {
      // animateTo 缩放动画
      Button('缩放动画')
        .scale({ x: this.scale, y: this.scale })
        .onClick(() => {
          animateTo({
            duration: 300,
            curve: Curve.EaseInOut,
            onFinish: () => console.info('Animation finished')
          }, () => {
            this.scale = this.scale === 1 ? 1.5 : 1;
          });
        })

      // .animation 透明度动画
      Button('透明度动画')
        .opacity(this.opacity)
        .animation({ duration: 500, curve: Curve.Linear })
        .onClick(() => {
          this.opacity = this.opacity === 1 ? 0.3 : 1;
        })

      // 旋转动画
      Image($r('app.media.icon'))
        .width(60)
        .height(60)
        .rotate({ angle: this.angle })
        .onClick(() => {
          animateTo({ duration: 500, curve: Curve.EaseOut }, () => {
            this.angle += 360;
          });
        })

      // 位移动画
      Text('滑动我')
        .padding(12)
        .backgroundColor('#007AFF')
        .fontColor(Color.White)
        .borderRadius(8)
        .translate({ x: this.translateX })
        .animation({ duration: 300, curve: Curve.Spring })
        .onClick(() => {
          this.translateX = this.translateX === 0 ? 100 : 0;
        })

      // 展开/收起动画
      Column() {
        Row() {
          Text('点击展开')
          Blank()
          Image($r('app.media.arrow'))
            .width(16)
            .rotate({ angle: this.isExpanded ? 90 : 0 })
            .animation({ duration: 200 })
        }
        .width('100%')
        .padding(12)
        .onClick(() => {
          animateTo({ duration: 300 }, () => {
            this.isExpanded = !this.isExpanded;
          });
        })

        if (this.isExpanded) {
          Text('展开的内容')
            .padding(12)
        }
      }
      .backgroundColor('#F5F5F5')
      .borderRadius(8)
    }
    .width('100%')
    .padding(20)
  }
}