HarmonyOS 控件点击水波纹特效的实现方案

参考示例如下：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State flag: boolean = false
  @State ballX: number = 0
  @State ballY: number = 0

  build() {
    Column() {
      Column() {

      }.layoutWeight(1).backgroundColor(Color.Pink).width("100%")

      Stack() {
        Button("按钮").width("100%").height("100%").stateEffect(false)
        if (this.flag) {
          Row()
            .width(5)
            .height(5)
            .position({
              x: this.ballX,
              y: this.ballY
            })
            .backgroundColor("rgba(0,0,0,0.7)")
            .transition(TransitionEffect.asymmetric(
              TransitionEffect.IDENTITY,
              TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.EaseInOut }).combine(
                TransitionEffect.scale({ x: 100, y: 100 })
              )
            ))
            .borderRadius(15)
        }
      }.width("100%").height(60).clip(true)
      .onClick((e) => {
        this.ballX = e.x - 3
        this.ballY = e.y - 3
        this.flag = !this.flag;
        setTimeout(() => {
          this.flag = !this.flag;
        }, 100)
      })

      Column() {

      }.layoutWeight(1).backgroundColor(Color.Pink).width("100%")
    }
    .width('100%')
    .height('100%')
  }
}
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.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.