HarmonyOS 如何实现音频声浪动画

const CANVAS_POS_X1: number = 0; 
const CANVAS_POS_Y1: number = 0; 
const CANVAS_POS_X2: number = 119; 
const CANVAS_POS_Y2: number = 18; 
const START_POS_X: number = 117; 
const OFFSET_X: number = 4.5; 
const RECT_WIDTH: number = 1.5; 
const TWO: number = 2; 
 
@Entry 
@Component 
struct Index { 
 @State message: string = 'Hello World'; 
 @State volumeList: number[] = new Array(27).fill(0); 
 canvasTimer: number = -1; 
 renderingContextSettings: RenderingContextSettings = new RenderingContextSettings(true); 
 canvasRenderingContext2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingContextSettings); 
 
 build() { 
  Row() { 
   Canvas(this.canvasRenderingContext2D) 
    .width(CANVAS_POS_X2) 
    .height(18) 
    .backgroundColor(Color.White) 
    .onReady(() => { 
     this.canvasRenderingContext2D.strokeStyle = 
      getContext().resourceManager.getColorSync($r('sys.color.ohos_id_color_text_primary_contrary')); 
     this.canvasRenderingContext2D.lineWidth = RECT_WIDTH; 
     this.canvasRenderingContext2D.lineCap = 'round'; 
     this.refreshVolumeList(); 
    }) 
 
  } 
  .backgroundColor('#4d5e55') 
  .justifyContent(FlexAlign.Center) 
  .alignItems(VerticalAlign.Center) 
  .width('100%') 
  .height(80) 
 } 
 
 refreshVolumeList() { 
  this.canvasTimer = setInterval(() => { 
   this.volumeList.shift(); 
   this.volumeList.push(8  + 10 * Math.random()); 
   this.draw(); 
  }, 70); 
 } 
 
 draw() { 
  this.canvasRenderingContext2D.clearRect(CANVAS_POS_X1, CANVAS_POS_Y1, CANVAS_POS_X2, CANVAS_POS_Y2); 
  for (let index = 0; index < this.volumeList.length; index++) { 
   const element = this.volumeList[index]; 
   if(element === 0) {      continue;    } 
   const posX = START_POS_X - (OFFSET_X * index); 
   const posY = (18 - element) / TWO; 
   this.canvasRenderingContext2D.beginPath(); 
   this.canvasRenderingContext2D.moveTo(posX, posY); 
   this.canvasRenderingContext2D.lineTo(posX, posY + element); 
   this.canvasRenderingContext2D.stroke(); 
  } 
 } 
 
 aboutToAppear() { 
  clearInterval(this.canvasTimer) 
 } 
}
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.
63.
64.
65.
66.

@Entry 
@Component 
struct Index { 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
  @State xoffset: number = 0 
  @State viewY: number = 220 / 2; 
  @State widths: number = 360 
  @State yoffset: number = 40; 
  @State intervalID: number = 0 
 
  startOnReady() { 
    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() 
          if (this.xoffset === 360) { 
            this.xoffset = 0 
          } 
          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) 
        }, 20); 
        this.xoffset = this.xoffset + 10 
      }).margin({ top: 40 }) 
      Button("停止波浪线动画").onClick(() => { 
        this.context.clearRect(0, 0, 360, 250) 
        clearInterval(this.intervalID) 
        this.xoffset = 0 
        this.startOnReady() 
      }).margin({ top: 40 }) 
    }.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.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.