Explorar o código

歌词显示的优化

onecold hai 1 ano
pai
achega
7a4505806a
Modificáronse 2 ficheiros con 52 adicións e 32 borrados
  1. 43 26
      entry/src/main/ets/view/LocalMusic.ets
  2. 9 6
      lib/src/main/ets/view/LyricView2.ets

+ 43 - 26
entry/src/main/ets/view/LocalMusic.ets

@@ -5959,15 +5959,21 @@ export struct LocalMusic {
         Button({ type: ButtonType.Capsule, stateEffect: true }) {
           Row() {
             SymbolGlyph($r('sys.symbol.paintbrush'))
-              .fontColor([Color.White, Color.Green, Color.Black])
+              .fontColor([Color.White])
+              .effectStrategy(1)
             Text(`选择颜色`)
               .fontSize(13)
               .margin({ left: 10 })
-              .fontColor($r('app.color.text_color'))
+              .fontColor(Color.White)
 
           }
         }
-        .backgroundColor($r('app.color.bottom_control_background'))
+        .backgroundColor(Color.Transparent)
+        .border({
+          color: '#FFFFFF',
+          radius: 20,
+          width: 1.8
+        })
         .height(36)
         .width(110)
         .onClick(()=>{
@@ -6011,16 +6017,22 @@ export struct LocalMusic {
         Button({ type: ButtonType.Capsule, stateEffect: true }) {
           Row() {
             SymbolGlyph($r('sys.symbol.paintbrush'))
-              .fontColor([Color.White, Color.Green, Color.Black])
+              .fontColor([Color.White])
+              .effectStrategy(1)
             Text(`选择颜色`)
               .fontSize(13)
               .margin({ left: 10 })
-              .fontColor($r('app.color.text_color'))
+              .fontColor(Color.White)
 
           }
         }
-        .backgroundColor($r('app.color.bottom_control_background'))
-        .height(38)
+        .backgroundColor(Color.Transparent)
+        .border({
+          color: '#FFFFFF',
+          radius: 20,
+          width: 1.8
+        })
+        .height(36)
         .width(110)
         .onClick(()=>{
           this.isShowHLSelectColor = !this.isShowHLSelectColor
@@ -6282,7 +6294,7 @@ export struct LocalMusic {
 
       Row() {
         this.PrecisionTimeButton($r('app.media.ic_previous'), -0.5, ' -0.5s ')
-        this.PrecisionTimeButton($r('app.media.loop'), 0, 'RESET')
+        this.PrecisionTimeButton($r('app.media.loop'), 0, '重置')
         this.PrecisionTimeButton($r('app.media.ic_next'), 0.5, ' +0.5s ')
       }
       .justifyContent(FlexAlign.Center)
@@ -6293,25 +6305,27 @@ export struct LocalMusic {
   // 精度按钮组件
   @Builder
   PrecisionTimeButton(icon: Resource, step: number, label: string) {
-    Column() {
-      Image(icon)
-        .width(28)
-        .margin({ bottom: 5 })
-        .opacity(this.isButtonDisabled(step) ? 0.5 : 1)
+    Button({ type: ButtonType.Capsule, stateEffect: true }) {
+      Column() {
+        Image(icon)
+          .width(28)
+          .margin({ bottom: 5 })
+          .opacity(this.isButtonDisabled(step) ? 0.5 : 1)
 
-      Text(label)
-        .fontSize(12)
-        .fontColor('#FFFFFF')
+        Text(label)
+          .fontSize(12)
+          .fontColor('#FFFFFF')
+      }
     }
+    .backgroundColor(Color.Transparent)
     .enabled(!this.isButtonDisabled(step))
     .onClick(() => this.handlePrecisionAdjust(step))
     .padding(5)
-    .width(60)
-    .height(60)
+    .width(66)
+    .height(66)
     .margin({ left: 18, right: 18 })
     .border({
       color: '#FFFFFF',
-      radius: 20,
       width: 1.8
     })
   }
@@ -6350,17 +6364,19 @@ export struct LocalMusic {
   // 导入  本地歌词 搜索歌词
   @Builder
   pushLyricButton(icon: Resource, step: number, label: string) {
-    Row() {
-      Image(icon)
+    Button({ type: ButtonType.Capsule, stateEffect: true }) {
+      Row() {
+        Image(icon)
         .width(14)
         .margin({ left: 13 })
 
-      Text(label)
-        .fontSize(12)
-        .margin({ left: 6 })
-        .fontColor('#FFFFFF')
+        Text(label)
+          .fontSize(12)
+          .margin({ left: 6 })
+          .fontColor('#FFFFFF')}
+
     }
-    // .visibility(step === 1 ? (Utility.isNoble() ? Visibility.Visible : Visibility.None) : Visibility.Visible)
+
     .onClick(() => {
       switch (step) {
         case 0:
@@ -6400,6 +6416,7 @@ export struct LocalMusic {
     })
     .padding(5)
     .width(110)
+    .backgroundColor(Color.Transparent)
     .height(40)
     .margin({ left: 6, right: 6 })
     .border({

+ 9 - 6
lib/src/main/ets/view/LyricView2.ets

@@ -171,7 +171,7 @@ export struct LyricView2 {
 
     private calculateOpacityFactor(index: number, currentIndex: number): number {
         const distance = Math.abs(index - currentIndex);
-        return Math.max(0.5, 1 - distance * 0.18); // 透明度随着距离增加而减小
+        return Math.max(0.15, 1 - distance * 0.18); // 透明度随着距离增加而减小
     }
 
 
@@ -287,14 +287,17 @@ export struct LyricView2 {
     WordByWordLyric(item: LyricLine, index: number) {
         Row({ space: 0 }) {
             ForEach(item.words, (word: LyricWord, wordIndex: number) => {
-                // 计算逐字歌词是否高亮
-                // const isHighlighted = this.currentMediaPosition >= word.startTime
+
 
                 Text(word.word)
-                    .fontSize(index == this.currentIndex ?this.textSize*1.2:this.textSize)
-                    .fontColor(this.currentMediaPosition >= word.startTime ? this.textHighlightColor : this.textColor)
-                    .fontWeight(this.currentMediaPosition >= word.startTime && this.isHighlightBold ? FontWeight.Bold : this.textWeight)
+                    .fontSize(index == this.currentIndex ?this.textSize*this.controller.getHighlightScale():this.textSize)
+                    .fontColor(this.currentMediaPosition >= word.startTime ?
+                        index == this.currentIndex ? this.textHighlightColor : this.textColor : this.textColor)
+                    .fontWeight(this.currentMediaPosition >= word.startTime && this.isHighlightBold ?
+                        index == this.currentIndex? FontWeight.Bold : this.textWeight: this.textWeight)
                     .margin(0)
+                    .opacity(this.calculateOpacityFactor(index, this.currentIndex))
+                    .blur(this.calculateBlurFactor(index, this.currentIndex))
                     .animation({
                         // 动画播放速度
                         tempo: 0.8,