如何实现组件水波纹动画案例

transition(TransitionEffect.asymmetric( 
  TransitionEffect.IDENTITY, 
  TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.EaseInOut }).combine( 
    TransitionEffect.scale({ x: 100, y: 100 }) 
  ) 
))

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