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

transition(TransitionEffect.asymmetric( 
  TransitionEffect.IDENTITY, 
  TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.EaseInOut }).combine( 
    TransitionEffect.scale({ x: 100, y: 100 }) 
  ) 
))
1.
2.
3.
4.
5.
6.

@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.