HarmonyOS鸿蒙Next中音乐实现波纹效果页面：点击按钮播放可变色，再次点击可暂停。（组件已封装可直接使用）

HarmonyOS鸿蒙Next中音乐实现波纹效果页面：点击按钮播放可变色，再次点击可暂停。（组件已封装可直接使用）

// LinesView.ets

@Component struct LinesView { @State linesArray: Array<Color> = new Array(100).fill(Color.White) // 存储每条线的颜色状态 @State isAnimating: boolean = false @State currentIndex: number = 0 // 记录当前应该变红的线索引 private timerId: number = -1

aboutToDisappear() { this.clearTimer() }

clearTimer() { if (this.timerId !== -1) { clearInterval(this.timerId) this.timerId = -1 } }

startAnimation() { this.clearTimer()

this.timerId = setInterval(() => {
  // 如果所有线都已经变红，停止动画
  if (this.currentIndex >= this.linesArray.length) {
    this.clearTimer()
    this.resetAnimation()
    this.isAnimating = false
    return
  }

  // 将当前线变为红色
  this.linesArray[this.currentIndex] = Color.Red
  this.currentIndex++
}, 30)

}

toggleAnimation() { this.isAnimating = !this.isAnimating if (this.isAnimating) { this.startAnimation() } else { this.clearTimer() } }

resetAnimation() { this.clearTimer() this.currentIndex = 0 this.linesArray = new Array(100).fill(Color.White) this.isAnimating = false }

build() { Column() { // 控制按钮 Row() { Button(this.isAnimating ? ‘Pause’ : ‘Start’) .onClick(() => { this.toggleAnimation() }) .margin(10) .width(100)

    Button('Reset')
      .onClick(() => {
        this.resetAnimation()
      })
      .margin(10)
      .width(100)
  }

  // 线条视图
  Row() {
    ForEach(this.linesArray, (item: Color, index: number) => {
      Column() {
        Stack()
          .width(1)
          .height(Math.random() * 30 + 15)
          .backgroundColor(item)
      }
      .margin({ right: 2 })
      .alignItems(HorizontalAlign.Center)
    })
  }
  .width('100%')
  .justifyContent(FlexAlign.SpaceAround)
}

} }

// 在页面中使用 @Entry @Component struct LinesPage { build() { Column() { LinesView() .height(300) .margin({ top: 20 }) } .backgroundColor(Color.Black) .width(‘100%’) .height(‘100%’) } }


更多关于HarmonyOS鸿蒙Next中音乐实现波纹效果页面：点击按钮播放可变色，再次点击可暂停。（组件已封装可直接使用）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中实现音乐波纹效果页面，可以通过使用<canvas>组件绘制波纹动画，并结合<button>组件控制音乐的播放与暂停。以下是一个简单的实现思路：

  1. 页面布局：在<div>或<stack>容器中放置<canvas>组件用于绘制波纹效果，以及<button>组件用于控制播放与暂停。

  2. 波纹绘制：在<canvas>组件中使用context对象绘制波纹动画。可以通过requestAnimationFrame实现动画的连续渲染，波纹的颜色和大小可以根据音乐播放状态动态变化。

  3. 音乐控制：使用<audio>组件或MediaPlayer API加载音乐文件。通过<button>的点击事件控制音乐的播放与暂停，同时更新波纹的颜色和动画状态。

  4. 状态管理：使用@State装饰器管理音乐播放状态（如isPlaying），并根据状态变化更新波纹效果和按钮样式。

  5. 组件封装：将上述功能封装为可复用的组件，方便在其他页面中直接使用。

示例代码片段：

@Entry
@Component
struct MusicWavePage {
  @State isPlaying: boolean = false;
  private audioPlayer: AudioPlayer = new AudioPlayer();

  build() {
    Column() {
      Canvas(this.drawWave.bind(this))
        .width('100%')
        .height('300px')
      Button(this.isPlaying ? 'Pause' : 'Play')
        .onClick(() => {
          this.isPlaying = !this.isPlaying;
          if (this.isPlaying) {
            this.audioPlayer.play();
          } else {
            this.audioPlayer.pause();
          }
        })
    }
  }

  drawWave(context: CanvasRenderingContext2D) {
    // 绘制波纹动画逻辑
  }
}

更多关于HarmonyOS鸿蒙Next中音乐实现波纹效果页面：点击按钮播放可变色，再次点击可暂停。（组件已封装可直接使用）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过Button组件控制音乐播放，并结合Canvas组件实现波纹效果。首先，使用AudioPlayer管理音乐播放状态。点击按钮时，调用AudioPlayer.play()或AudioPlayer.pause()控制播放与暂停，并通过Button的onClick事件切换按钮颜色。同时，在Canvas中绘制波纹动画，使用requestAnimationFrame实现动态效果。封装好的组件可直接调用，确保代码简洁高效。

回到顶部