HarmonyOS 鸿蒙Next模仿酷狗音乐播放器文字跳动字幕特效

HarmonyOS 鸿蒙Next模仿酷狗音乐播放器文字跳动字幕特效

@Entry
@Component
struct Index {
  @State songName: string = '我和我的祖国';
  @State artistName: string = '王菲';
  @State currentCharIndex: number = 0;
  private animationTimer: number = 0;

  // 生命周期钩子，组件挂载后启动动画
  aboutToAppear() {
    this.startLyricsAnimation();
  }

  // 清理定时器
  aboutToDisappear() {
    if (this.animationTimer) {
      clearInterval(this.animationTimer);
    }
  }

  // 开始歌词动画
  startLyricsAnimation() {
    // 模拟音乐节奏，每300ms高亮一个字符
    this.animationTimer = setInterval(() => {
      // 高亮当前字符并添加跳动效果
      this.currentCharIndex = (this.currentCharIndex + 1) % this.songName.length;
    }, 300);
  }

  build() {
    Column() {
      // 歌曲名动画效果
      Row() {
        ForEach(this.songName.split(''), (char: string, index: number) => {
          Text(char)
            .fontSize(36)
            .fontWeight(500)
            // 根据索引判断是否为当前高亮字符
            .fontColor(this.currentCharIndex === index ? '#D93F30' : '#333333')
            // 添加跳动动画效果
            .translate({
              y: this.currentCharIndex === index ? -10 : 0
            })
            .animation({
              duration: 300
            })
        }, (index: number) => index.toString())
      }
      
      // 艺术家名字
      Text(this.artistName)
        .fontSize(24)
        .fontColor('#666666')
      
      // 播放控制按钮
      Row() {
        Text('⏮')
          .fontSize(40)
        Text('▶')
          .fontSize(40)
        Text('⏭')
          .fontSize(40)
      }
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .backgroundColor('#F5F5F5')
  }
}