双指缩放的字体跟着一起变大小

一些动画的调整
歌词透明度优化
增加播放页的圆形播放按钮切换

entry/src/main/ets/pages/SettingPage.ets

@@ -48,6 +48,7 @@ export struct SettingPage {
   static readonly BG_BRIGHTNESS: string = 'bg_brightness';
   static readonly IS_SHOW_ALLBAR: string = 'IS_SHOW_ALLBAR';
   static readonly IS_SHOW_TITLTBAR: string = 'IS_SHOW_TITLTBAR';
+  static readonly IS_CIRCLE_BTN: string = 'isCircleBtn';
   public static THEME_COLOR_KEY: string = 'THEME_COLOR';
   public static TWO_FINGER_TYPE: string = 'twoFingerType';
   public static THEME_COLOR_LIST: Array<ThemeColorItem> = [
@@ -92,6 +93,7 @@ export struct SettingPage {
   @State blurValue: number = 0 //背景模糊
   @State bgBrightness: number = 0 //背景亮度
   @State isGridMusic: boolean = true //是否网格布局
+  @State isCircleBtn: boolean = false //是否圆形播放按钮
   @State twoFingerType: number = 3 //双指放大瘦小Grid或list的大小
   @State isScrollHide: boolean = false //是否滚动隐藏
   @State isSameTimePlay: boolean = false //是否和其他app同时播放
@@ -200,7 +202,7 @@ export struct SettingPage {
     this.isStartAutoPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_START_AUTO_PLAY, false)
     this.isMemoryLastPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MEMORY_LAST_PLAY, false)
     this.twoFingerType = PreferencesUtil.getNumberSync(SettingPage.TWO_FINGER_TYPE, 3)
-
+    this.isCircleBtn = PreferencesUtil.getBooleanSync(SettingPage.IS_CIRCLE_BTN, false)
 
     this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
     this.isShowAllBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_ALLBAR, true)
@@ -653,18 +655,6 @@ export struct SettingPage {
                 .fontColor(Color.Gray)
                 .fontWeight(480)
                 .layoutWeight(1)
-              // Toggle({ type: ToggleType.Switch, isOn: this.isGridCoverBig })
-              //   .selectedColor(this.themeColor)
-              //   .switchPointColor(Color.White)
-              //   .margin({ right: 18 })
-              //   .onChange((checked: boolean) => {
-              //     this.isGridCoverBig = checked;
-              //     PreferencesUtil.put(SettingPage.IS_GRID_COVERBIG, this.isGridCoverBig)
-              //     this.sendChangeEvent()
-              //   })
-              //   .width(50)
-              //   .height(30);
-
               Select([
                 { value: CommonConstants.TWO_FINGER_TYPE[0] },
                 { value:CommonConstants.TWO_FINGER_TYPE[1]},
@@ -672,7 +662,7 @@ export struct SettingPage {
                 .font({ size: 15, weight: FontWeight.Medium })
                 .fontColor(Color.Gray)
                 .margin({ right: 18 })
-                .selected(this.twoFingerType)
+                .selected(this.twoFingerType-1)
                 .value(CommonConstants.TWO_FINGER_TYPE[this.twoFingerType-1])
                 .onSelect(async (_index: number, text?: string | undefined) => {
                   _index ++;
@@ -684,6 +674,32 @@ export struct SettingPage {
             .height(55)
             .clickEffect({level:ClickEffectLevel.HEAVY})
 
+
+            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+
+            // 圆形播放按钮
+            Row() {
+              Text('圆形播放按钮')
+                .margin({ left: 18 })
+                .fontSize(15)
+                .fontColor(Color.Gray)
+                .fontWeight(480)
+                .layoutWeight(1)
+              Toggle({ type: ToggleType.Switch, isOn: this.isCircleBtn })
+                .selectedColor(this.themeColor)
+                .switchPointColor(Color.White)
+                .margin({ right: 18 })
+                .onChange((checked: boolean) => {
+                  this.isCircleBtn = checked;
+                  PreferencesUtil.put(SettingPage.IS_CIRCLE_BTN, this.isCircleBtn)
+                  this.sendChangeEvent()
+                })
+                .width(50)
+                .height(30);
+            }
+            .height(55)
+            .clickEffect({level:ClickEffectLevel.HEAVY})
+
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 
           }

entry/src/main/ets/view/LocalMusic.ets

@@ -179,6 +179,7 @@ export struct LocalMusic {
   @State isShowHistory:boolean = true //是否显示最近播放
   @State isCustomizeBg: boolean = false //自定义背景界面
   @State isGridMusic: boolean = false //是否网格布局
+  @State isCircleBtn: boolean = false //是否圆形播放按钮
   @State twoFingerType: number = 3 //双支放大缩小的类型
   @State isScrollHide: boolean = false //是否滚动隐藏
   @State isSameTimePlay: boolean = false //是否和其他app同时播放
@@ -548,6 +549,7 @@ export struct LocalMusic {
     this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
     this.isShowAllBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_ALLBAR, true)
     this.twoFingerType = PreferencesUtil.getNumberSync(SettingPage.TWO_FINGER_TYPE, 3)
+    this.isCircleBtn = PreferencesUtil.getBooleanSync(SettingPage.IS_CIRCLE_BTN, false)
     if (this.isSavePlayMode) {
       this.playType = PreferencesUtil.getNumberSync('musicPlayType', 0)
     }
@@ -2298,8 +2300,8 @@ export struct LocalMusic {
       Row() {
         Image(this.modeType !== 0 && StrUtil.isNotEmpty(item.pixelMapPath) ? item.pixelMapPath :
         $r('app.media.music_group'))
-          .height(this.twoFingerType==3?48:35)
-          .width(this.twoFingerType==3?48:35)
+          .height(this.twoFingerType==3?55:this.twoFingerType==2?35:30)
+          .width(this.twoFingerType==3?55:this.twoFingerType==2?35:30)
           .fillColor(this.themeColor)
             // .fontSize(33)
           .alt($r('app.media.music_group'))
@@ -2308,7 +2310,7 @@ export struct LocalMusic {
           .margin({ left: 20, top: 8, bottom: 8 })
         Column() {
           Text(item.name.startsWith('.') ? item.name.replace(/\./g, '') : item.name)
-            .fontSize(16)
+            .fontSize(this.twoFingerType==1?12:this.twoFingerType==2?15:18)
             .maxLines(1)// .width('88%')
             .animation({
               duration: 555,
@@ -2323,13 +2325,13 @@ export struct LocalMusic {
             .fontColor($r('app.color.text_color'))
           Row() {
             Text(`${this.artistMap.get(item.name)?.length ?? 0}首`)
-              .fontSize(11)
+              .fontSize(this.twoFingerType==1?11:this.twoFingerType==2?12:14)
               .padding({ top: 8 })
               .visibility(this.modeType === 2 ? Visibility.Visible : Visibility.None)
               .fontColor($r('app.color.text_color'))
               .margin({ left: 10 })
             Text(`${this.albumMap.get(item.name)?.length ?? 0}首`)
-              .fontSize(11)
+              .fontSize(this.twoFingerType==1?11:this.twoFingerType==2?12:14)
               .padding({ top: 8 })
               .visibility(this.modeType === 3 ? Visibility.Visible : Visibility.None)
               .fontColor($r('app.color.text_color'))
@@ -2390,8 +2392,8 @@ export struct LocalMusic {
 
           Image(StrUtil.isEmpty(item.pixelMapPath) ? $r('app.media.music_red') : item.pixelMapPath)
             .fillColor(this.themeColor)
-            .height(this.twoFingerType==3?48:this.twoFingerType==2?35:30)
-            .width(this.twoFingerType==3?48:this.twoFingerType==2?35:30)
+            .height(this.twoFingerType==3?55:this.twoFingerType==2?35:30)
+            .width(this.twoFingerType==3?55:this.twoFingerType==2?35:30)
             .alt($r('app.media.music_red'))
             .borderRadius('100%')
             .clip(true)
@@ -2403,7 +2405,7 @@ export struct LocalMusic {
         Column() {
           Column() {
             Text(item.name)
-              .fontSize(14)
+              .fontSize(this.twoFingerType==1?12:this.twoFingerType==2?15:18)
               .maxLines(1)
               .animation({
                 duration: 555,
@@ -2411,17 +2413,17 @@ export struct LocalMusic {
               })
               .fontColor(this.currentSong?.filePath === item.filePath ? this.themeColor :
               $r('app.color.text_color'))
-              .margin({ left: 10 })
+              .margin({ left:this.twoFingerType==3?18: 10 })
             Row() {
               Text(StrUtil.isEmpty(item.artist) ? item.cTime : item.artist + '  ' + item?.album)
-                .fontSize(11)
+                .fontSize(this.twoFingerType==1?11:this.twoFingerType==2?12:14)
                 .padding({ top: 8 })
                 .fontColor(this.currentSong?.filePath === item.filePath ? this.themeColor :
                 $r('app.color.text_color'))
-                .margin({ left: 10 })
+                .margin({ left:this.twoFingerType==3?18: 10})
               Blank()
               Text(item.size)
-                .fontSize(11)
+                .fontSize(this.twoFingerType==1?11:this.twoFingerType==2?12:14)
                 .padding({ top: 8 })
                 .visibility(StrUtil.isEmpty(item.artist) ? Visibility.Visible : Visibility.None)
                 .fontColor(this.currentSong?.filePath === item.filePath ? this.themeColor :
@@ -3158,7 +3160,7 @@ export struct LocalMusic {
               right: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20})
           Column() {
             Text(item.name.startsWith('.')?item.name.replace(/\./g, ''):item.name)
-              .fontSize(14)
+              .fontSize(this.twoFingerType==1?14:this.twoFingerType==2?16:18)
               .maxLines(1)
               .fontWeight(FontWeight.Bold)
               .textOverflow({overflow: TextOverflow.MARQUEE}) //超长滚动
@@ -3172,14 +3174,17 @@ export struct LocalMusic {
             Column(){
               Text(`${this.artistMap.get(item.name)?.length ?? 0}首`)
                 .fontSize(11)
+                .fontSize(this.twoFingerType==1?10:this.twoFingerType==2?12:14)
                 .visibility(this.modeType===2&&!this.isCanBack?Visibility.Visible:Visibility.None)
                 .fontColor($r('app.color.text_color'))
               Text(`${this.albumMap.get(item.name)?.length ?? 0}首`)
                 .fontSize(11)
+                .fontSize(this.twoFingerType==1?10:this.twoFingerType==2?12:14)
                 .visibility(this.modeType===3&&!this.isCanBack?Visibility.Visible:Visibility.None)
                 .fontColor($r('app.color.text_color'))
               Text(StrUtil.isEmpty(item.artist) ? 'Unknown' : item.artist )
                 .fontSize(11)
+                .fontSize(this.twoFingerType==1?10:this.twoFingerType==2?12:14)
                 .maxLines(1)
                 .margin({top:2})
                 .visibility(item.type==CommonConstants.TYPE_IS_ARTIST
@@ -3227,7 +3232,7 @@ export struct LocalMusic {
 
             })
           )
-          .height(this.twoFingerType==3?50:40)
+          .height(this.twoFingerType==3?60:this.twoFingerType==2?55:42)
           .width(this.getGridWight())
           .justifyContent(FlexAlign.Center)
           .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20 ,
@@ -3272,16 +3277,16 @@ export struct LocalMusic {
   }
 
   getGridAllHeight(){
-    let heightG = 205
+    let heightG = 210
     switch (this.twoFingerType){
       case 1:
-        heightG = 120
+        heightG = 105
         break;
       case 2:
-        heightG = 150
+        heightG = 155
         break;
       case 3:
-        heightG = 205
+        heightG = 210
         break;
     }
     return heightG
@@ -3291,7 +3296,7 @@ export struct LocalMusic {
     let heightG = 150
     switch (this.twoFingerType){
       case 1:
-        heightG = 80
+        heightG = 55
       break;
       case 2:
         heightG = 100
@@ -3304,7 +3309,7 @@ export struct LocalMusic {
   }
 
   getGridWight(){
-    let wightG = 150
+    let wightG = 158
     switch (this.twoFingerType){
       case 1:
         wightG = 80
@@ -3313,7 +3318,7 @@ export struct LocalMusic {
         wightG = 110
         break;
       case 3:
-        wightG = 150
+        wightG = 158
         break;
     }
     return wightG
@@ -4815,7 +4820,8 @@ export struct LocalMusic {
           duration: 666,
           curve: 'ease-in-out' // 可选动画曲线
         })
-        .transition(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }))
+        .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 600 }),
+          TransitionEffect.scale({ x: 0, y: 0 })  ))
         .clickEffect({level:ClickEffectLevel.MIDDLE})
         //拖动List关键代码开始
         .scale({ x: this.scaleSelect(index), y: this.scaleSelect(index) })
@@ -4912,10 +4918,20 @@ export struct LocalMusic {
     }
     .width('100%')
     .height('100%')
-    .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
-      .animation({ duration: 500, curve: Curve.Ease }))
+    // .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
+    //   .animation({ duration: 500, curve: Curve.Ease }))
     .cachedCount(10)
+    .scale({x:this.scaleValue,y:this.scaleValue,z:1})
+    .gesture(PinchGesture({ fingers: 2 })
+      .onActionEnd((event: GestureEvent)=>{
+        this.setlistTwoFingers()
+      })
+      .onActionUpdate(e=>{
+        this.scaleValue = this.pinchValue*e.scale
+      })
+      .onActionStart(e => {
 
+      }))
     .padding({
       bottom: 0
     })
@@ -4929,8 +4945,8 @@ export struct LocalMusic {
         Stack() {
 
           Image(StrUtil.isEmpty(item.pixelMapPath) ? $r('app.media.music_red') : item.pixelMapPath)
-            .height(33)
-            .width(33)
+            .height(this.twoFingerType==3?55:this.twoFingerType==2?35:30)
+            .width(this.twoFingerType==3?55:this.twoFingerType==2?35:30)
             .alt($r('app.media.music_red'))
             .fillColor(this.themeColor)
             .borderRadius('100%')
@@ -4943,21 +4959,21 @@ export struct LocalMusic {
           Column() {
 
             Text(item.name)
-              .fontSize(14)
+              .fontSize(this.twoFingerType==1?12:this.twoFingerType==2?15:18)
               .fontColor(this.curIndex === index ?  this.themeColor :
                 this.isFrontWhite ? Color.White : $r('app.color.text_color'))
               .maxLines(1)
-              .margin({ left: 10 })
+              .margin({ left:this.twoFingerType==3?18: 10 })
             Row() {
               Text(StrUtil.isEmpty(item.artist) ? item.cTime : item.artist + '  ' + item?.album)
-                .fontSize(11)
+                .fontSize(this.twoFingerType==1?11:this.twoFingerType==2?12:14)
                 .padding({ top: 8 })
                 .fontColor(this.curIndex === index ? this.themeColor :
                   this.isFrontWhite ? $r('app.color.playlistText_color') : $r('app.color.text_color'))
-                .margin({ left: 10 })
+                .margin({ left:this.twoFingerType==3?18: 10 })
               Blank()
               Text(item.size)
-                .fontSize(11)
+                .fontSize(this.twoFingerType==1?11:this.twoFingerType==2?12:14)
                 .padding({ top: 8 })
                 .visibility(StrUtil.isEmpty(item.artist) ? Visibility.Visible : Visibility.None)
                 .fontColor(this.curIndex === index ? $r('app.color.title_bar_bg_text') :
@@ -4993,7 +5009,7 @@ export struct LocalMusic {
     }
     .backgroundColor(Color.Transparent)
     .width('100%')
-    .height(58)
+    .height(this.twoFingerType==3?ITEM_HEIGHT_BIG:this.twoFingerType==2?ITEM_HEIGHT:ITEM_HEIGHT_SMALL)
     .shadow(this.scaleItem === index ? {
       radius: 70,
       color: '#15000000',
@@ -5956,9 +5972,11 @@ export struct LocalMusic {
         Button({type:ButtonType.Circle,stateEffect:true}){
           Column() {
             Image(this.CONTROL_PlayStatus === PlayStatus.PLAY ?
-            $r('app.media.ic_public_play') : $r('app.media.ic_public_pause'))
+              (this.isCircleBtn?$r('app.media.hm_pause'):$r('app.media.ic_public_play'))
+            : (this.isCircleBtn?$r('app.media.hm_play2'):$r('app.media.ic_public_pause')))
               .width(this.isPhoneLan()?48:60)
               .clickEffect({level:ClickEffectLevel.HEAVY})
+              .fillColor(Color.White)
               .aspectRatio(CommonConstants.ASPECT_RATIO)
               .onClick(async () => {
                 this.playOrPause()
@@ -9763,7 +9781,10 @@ function customPopupBuilder(dataBu: BubbleBean) {
         .backgroundColor($r('app.color.settings_background_main'))
         .margin({ top: 6, bottom: 6 })
       }
-      .transition(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }))
+      .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 500,curve: Curve.Ease, delay: 100*index  }),
+        TransitionEffect.scale({ x: 0, y: 0 })  ))
+      // .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
+      //   TransitionEffect.scale({ x: 0, y: 0 })  ))
       .onClick(() => {
         dataBu.onItemClick?.(index)
       })
@@ -9839,7 +9860,12 @@ function cutPopupBuilder(dataBu: BubbleBean) {
 
           .margin({ top: 7, bottom: 7 })
 
-        }.onClick(() => {
+        }
+        .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 500 }),
+          TransitionEffect.scale({ x: 0, y: 0 })  ))
+        // .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
+        //   TransitionEffect.scale({ x: 0, y: 0 })  ))
+        .onClick(() => {
           dataBu.onItemClick?.(index)
         })
       })

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.15, 1 - distance * 0.18); // 透明度随着距离增加而减小
+        return Math.max(0.26, 1 - distance * 0.11); // 透明度随着距离增加而减小
     }
 
 
@@ -206,6 +206,10 @@ export struct LyricView2 {
 
                 }
                 .padding(8)
+                // .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
+                //     TransitionEffect.scale({ x: 0, y: 0 })  ))
+                .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 500,curve: Curve.Ease, delay: 100*index  }),
+                    TransitionEffect.scale({ x: 0, y: 0 })  ))
                 .border({ radius: 4 })
                 .backgroundColor(this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
                     && this.enableSeek && this.isUserTouching ? '#80a9a9a9' : '#00000000')