HarmonyOS鸿蒙Next中用animateTo实现按钮点击微动效

• onTouch是组件的通用事件，当手指触碰屏幕时会触发该回调。它有一个touchType类型的参数，当值为Down时表示手指按下时触发，当值为Up时表示手指抬起时触发。
• UIContext组件中的keyframeAnimateTo方法可以用来设置关键帧动画，以实现点击图标的动画效果。

@Entry
@Component
struct ClickAnimationPage {
  length: number = 60;
  @State nLength: number = 60;
  @State fontSizeInfoClick: number = 10;
  @State fontSizeInfoPerformance: number = 15;
  @State valueInfo: number = 0;
  @State count: number = 1;
  @State fontSizeInfoProgress: number = 18;
  uiContext: UIContext | undefined = undefined;

  aboutToAppear(): void {
    this.uiContext = this.getUIContext?.();
  }

  onPageShow(): void {
    this.length = 60;
    setTimeout(() => {
      this.length = 70;
    }, 50);
  }

  build() {
    Column() {
      Row() {
        Text('X')
          .fontColor(Color.Black).fontWeight(700).fontSize(13);
        Text(this.count.toString())
          .fontColor(Color.Black).fontWeight(700).fontSize(this.fontSizeInfoProgress);
      };
      Stack() {
        Column() {
          Text('点击').fontSize(this.fontSizeInfoPerformance).fontColor(Color.White);
        }
        .opacity(0.8)
        .width(this.nLength)
        .height(this.nLength)
        .borderRadius(this.nLength / 2)
        .backgroundColor(Color.Orange)
        .justifyContent(FlexAlign.Center);
        Column() {
          Progress({ value: this.valueInfo, total: 100, type: ProgressType.Ring })
            .width(this.nLength)
            .height(this.nLength)
            .color(Color.Blue)
            .style({ strokeWidth: 5 })
            .onTouch((event: TouchEvent) => {
              if (TouchType.Up === event.type) {
                // 用户可在这自定义实现动画效果
                this.nLength = 60;
                this.fontSizeInfoClick = 10;
                this.fontSizeInfoPerformance = 15;
                this.fontSizeInfoProgress = 15;
                this.valueInfo = 0;
                if (!this.uiContext) {
                  return;
                }
                this.uiContext.keyframeAnimateTo({ iterations: 3 }, [
                  {
                    duration: 100, event: () => {
                    this.valueInfo = 0;
                  }
                  },
                  {
                    duration: 100, event: () => {
                    this.valueInfo = 100;
                  }
                  }
                ]);
              }
              if (TouchType.Down === event.type) {
                // 用户可在这自定义实现动画效果
                this.nLength = 50;
                this.fontSizeInfoClick = 7;
                this.fontSizeInfoPerformance = 10;
                this.fontSizeInfoProgress = 18;
                this.valueInfo = 0;
                ++this.count;
                if (!this.uiContext) {
                  return;
                }
                this.uiContext.keyframeAnimateTo({ iterations: 3 }, [
                  {
                    duration: 100, event: () => {
                    this.valueInfo = 0;
                  }
                  },
                  {
                    duration: 100, event: () => {
                    this.valueInfo = 100;
                  }
                  }
                ]);
              }
            });
        }
        .width(60)
        .height(60)
        .justifyContent(FlexAlign.Center);
      };
    }
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .height('100%');
  }
}

参考地址

https://developer.huawei.com/consumer/cn/doc/architecture-guides/purchase-v1_2-ts_40-0000002383652610