HarmonyOS 鸿蒙Next如何做一个波浪线的动画？

可以参考以下demo：

import { promptAction } from '[@kit](/user/kit).ArkUI'

[@Entry](/user/Entry)

[@Component](/user/Component)

struct Index {

private settings: RenderingContextSettings = new RenderingContextSettings(true)

private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

private path2Db: Path2D = new Path2D()

[@State](/user/State) xoffset: number = 0

[@State](/user/State) viewY: number = 200 / 2;

[@State](/user/State) widths: number = 360

[@State](/user/State) yoffset: number = 20;

[@State](/user/State) total: number = 0;

[@State](/user/State) intervalID: number = 10086



startOnReady(){

this.context.save();

this.context.beginPath();

this.context.lineWidth = 3

//屏幕内波浪线

this.context.moveTo(this.xoffset, this.viewY)

this.context.quadraticCurveTo(this.widths / 4 + this.xoffset, this.viewY - this.yoffset, this.widths / 2 + this.xoffset, this.viewY)

this.context.moveTo(this.widths / 2 + this.xoffset, this.viewY)

this.context.quadraticCurveTo(this.widths / 4 * 3 + this.xoffset, this.viewY + this.yoffset, this.widths + this.xoffset, this.viewY)

//屏幕外波浪线

this.context.moveTo(this.xoffset - this.widths, this.viewY)

this.context.quadraticCurveTo(this.widths / 4 + this.xoffset - this.widths, this.viewY - this.yoffset, this.widths / 2 + this.xoffset - this.widths, this.viewY)

this.context.moveTo(this.widths / 2 + this.xoffset - this.widths, this.viewY)

this.context.quadraticCurveTo(this.widths / 4 * 3 + this.xoffset - this.widths, this.viewY + this.yoffset, this.widths + this.xoffset - this.widths, this.viewY)

//抗锯齿的设置

this.context.imageSmoothingEnabled = true;

this.context.imageSmoothingQuality = 'medium'

this.context.stroke()

}

build() {

Column() {

Canvas(this.context)

.width(360)

.height(220)

.backgroundColor('#ffff00')

.onReady(() => {

this.startOnReady()

})Button("开始波浪线动画(" + this.xoffset + ")")

.onClick(() => {

this.intervalID = setInterval(() => {

this.context.clearRect(0,0,360,250)

this.xoffset = this.xoffset + 10

this.startOnReady()

promptAction.showToast({

message: this.xoffset + ""

})

if (this.xoffset === 360) {

this.xoffset=0

// clearInterval(this.intervalID)

}

let s= this.widths/4+this.xoffset

let ss=this.viewY-this.yoffset

let sss=this.widths/2+this.xoffset

console.log(s+'-'+ss+'-'+sss+'-'+this.viewY)

}, 100);

this.xoffset = this.xoffset + 10

})

.margin({ top: 40 })

Button("停止波浪线动画")

.onClick(() => {

clearInterval(this.intervalID)

})

.margin({ top: 40 })

}

.width('100%')

.height('100%')

}

}