HarmonyOS 鸿蒙Next如何实现组件点击的水波纹效果

@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%')

  }

}