HarmonyOS鸿蒙Next中使用ArkUI eTS实现仿网易云音乐播放器界面

介绍

学习鸿蒙eTS有一段时间了，最近仿照网易云音乐写了一个音乐播放器，感觉eTS学起来还是很容易上手的,有些地方可能写的不大好，请多多指教。效果图如下：

说明

目前仅仅完整了UI界面和动画效果，等有时间了搞一下音乐播放的功能。还有就是没真机，模拟器播放音乐听不到声音，等下次把播放音乐的功能完成了，希望哪个大佬能用真机帮我测试下，哈哈哈

Demo实现

我把界面划分成了四个部分来实现的：标题组件（TitleCpt）、转盘组件（DiskCpt）、互动组件（ActionCpt）以及音乐控制组件（CtrlCpt），代码如下：

@Entry
@Component
struct PlayPage {
  [@State](/user/State) diskAngle: number = 0
  [@State](/user/State) styliAngle: number = 30

  build() {

    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
      TitleCpt()
      DiskCpt({ diskAngle: $diskAngle, styliAngle: $styliAngle })
      ActionCpt()
      CtrlCpt({ diskAngle: $diskAngle, styliAngle: $styliAngle })
    }
    .width('100%')
    .height('100%')
    .padding({ left: 16, right: 16 })
    .backgroundImage('./common/bg.jpg')
    .backgroundImageSize({ width: 1280, height: 2340 })
  }
}

1、标题组件（TitleCpt）实现：

@Component
export default struct TitleCpt {
  build() {
    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
      Image($r('app.media.cyc')).height(50).width(50)
      Column() {
        Text('真的爱你').fontColor(Color.White).fontSize(20)
        Text('Beyond').fontColor(Color.White).fontSize(15)
      }

      Image($r("app.media.ic_share")).height(50).width(50)
    }
    .height(60)
  }
}

2、转盘组件（DiskCpt）实现：

@Component
export default struct DiskCpt {
  [@Link](/user/Link) diskAngle: number
  [@Link](/user/Link) styliAngle: number
  
  build() {
    Stack({ alignContent: Alignment.Top }) {
      Stack({ alignContent: Alignment.Center }) {
        Image($r('app.media.f63')).height(300).width(300)
        Image($r('app.media.dog')).height(200).width(200)
        Image($r('app.media.pic_disc')).height(300).width(300)
      }.margin({ top: 100 })
      .rotate({ x: 0, y: 0, z: 1, angle: this.diskAngle })

      Stack() {
        Image($r('app.media.pic_styli')).height(185).width(101).margin({ left: 70 })
      }
      .rotate({ x: 0, y: 0, z: 1,
        angle: -this.styliAngle,
        centerX: '50%',
        centerY: 0
      })
    }
    .layoutWeight(1)
    .padding({ top: 40 })
  }
}

3、互动组件（ActionCpt）实现：

@Component
export default struct ActionCpt {
  build() {
    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) {
      Image($r("app.media.ic_love")).height(50).width(50)
      Image($r("app.media.ic_download")).height(50).width(50)
      Image($r("app.media.ic_comment")).height(50).width(50)
      Image($r("app.media.ic_more")).height(50).width(50)
    }
  }
}

4、音乐控制组件（CtrlCpt）实现：

@Component
export default struct CtrlCpt {
  [@State](/user/State) sliderValue: number = 40
  [@State](/user/State) playImage: string= './common/ic_play.png'
  [@Link](/user/Link) diskAngle: number
  [@Link](/user/Link) styliAngle: number
  private interval: number = 0

  startDiskRotate() {
    this.interval = setInterval(() => {
      this.diskAngle += 1
    }, 10)
  }

  stopDiskRotate() {
    setTimeout(() => {
      clearInterval(this.interval)
    }, 600)
  }

  startStyli() {
    animateTo({
      duration: 600, // 动画时长
      curve: Curve.Smooth, // 动画曲线
    }, () => {
      this.styliAngle = 0
    })
  }

  stopStyli() {
    animateTo({
      duration: 600, // 动画时长
      tempo: 0.5, // 播放速率
      curve: Curve.Smooth, // 动画曲线
    }, () => {
      this.styliAngle = 30
    })
  }

  build() {
    Column() {
      Row() {
        Text('01:10').fontColor('#cccccc').fontSize(15)
        Slider({
          value: this.sliderValue, min: 0, max: 100, step: 1,
          style: SliderStyle.OutSet
        })
          .blockColor(Color.White)
          .trackColor('#cccccc')
          .selectedColor(Color.White)
          .showTips(false)
          .layoutWeight(1)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.sliderValue = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        Text('01:10').fontColor('#cccccc').fontSize(15)
      }

      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Image($r("app.media.ic_play_mode")).height(50).width(50)
        Row() {
          Image($r("app.media.ic_play_pre")).height(50).width(50)
          Image(this.playImage).height(50).width(50)
            .onClick(() => {
              if (this.playImage === './common/ic_play.png') {
                this.playImage = './common/ic_pause.png'
                this.startDiskRotate()
                this.startStyli()
              } else {
                this.playImage = './common/ic_play.png'
                this.stopDiskRotate()
                this.stopStyli()
              }
            })
          Image($r("app.media.ic_play_next")).height(50).width(50)
        }
        Image($r("app.media.ic_play_list")).height(50).width(50)
      }
      .padding({ bottom: 16 })
    }
  }
}

总结

开发过程中遇到的问题主要有两个：

1. 兄弟组件传值的问题，使用@State和@Link解决了兄弟组件之间数据的双向绑定问题
2. 动画问题，找了半天没找到那种可以手动开始和暂停的动画方案，最后参考Codela《基础组件Slider的使用（eTS）》，使用setInterval来实现的动画。