HarmonyOS 鸿蒙Next 有没有第三方库的水波纹效果组件

看看这个demo的水波纹是否符合

[@Entry](/user/Entry)
[@Component](/user/Component)
struct WaterPage2 {
 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)
 }
}