HarmonyOS 如何实现WaveView动画？

@Entry  
@Component  
struct Page240423185507109 {  
  private settings: RenderingContextSettings = new RenderingContextSettings(true)  
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)  
  waveSpeed: number = 0.03  
  phase: number = 0  
  
  drawWave() {  
    this.context?.clearRect(0, 0, this.context.width, this.context.height)  
  
    this.context?.beginPath()  
    for (let x = 0; x <= this.context.width; x += 10) {  
      const y = this.context.height / 2 + Math.sin(x * 0.01 + this.phase) * 20  
      this.context?.lineTo(x, y)  
    }  
    this.context?.lineTo(this.context.width, this.context.height)  
    this.context?.lineTo(0, this.context.height)  
    this.context?.closePath()  
  
    this.context.fillStyle = '#30007bff'  
    this.context?.fill()  
  
    this.context?.beginPath()  
    for (let x = 0; x <= this.context.width; x += 10) {  
      const y = this.context.height / 2 + Math.sin(x * 0.02 + this.phase) * 10  
      this.context?.lineTo(x, y)  
    }  
    this.context?.lineTo(this.context.width, this.context.height)  
    this.context?.lineTo(0, this.context.height)  
    this.context?.closePath()  
  
    this.context.fillStyle = '#50007bff'  
    this.context?.fill()  
  
    this.context?.beginPath()  
    for (let x = 0; x <= this.context.width; x += 10) {  
      const y = this.context.height / 2 + Math.sin(x * 0.015 + this.phase) * 30  
      this.context?.lineTo(x, y)  
    }  
    this.context?.lineTo(this.context.width, this.context.height)  
    this.context?.lineTo(0, this.context.height)  
    this.context?.closePath()  
  
    this.context.fillStyle = '#20007bff'  
    this.context?.fill()  
  
    this.phase += this.waveSpeed  
  }  
  
  build() {  
    Column() {  
      Canvas(this.context)  
        .width(200)  
        .height(100)  
        .backgroundColor(Color.Pink)  
        .onReady(() => {  
          setInterval(this.drawWave.bind(this), 20)  
        })  
    }.width("100%").height("100%").justifyContent(FlexAlign.Center)  
  }  
}
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.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.

this.context?.beginPath()  
for (let x = 0; x <= this.context.width; x += 10) {  
  const y = this.context.height / 2 + Math.sin(x * 0.01 + this.phase) * 20  
  this.context?.lineTo(x, y)  
}  
this.context?.lineTo(this.context.width, this.context.height)  
this.context?.lineTo(0, this.context.height)  
this.context?.closePath()  
  
this.context.fillStyle = '#30007bff'  
this.context?.fill()
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.