Просмотр исходного кода

播放页Button对点光源效果的适配

onecold 7 месяцев назад
Родитель
Сommit
dbd1a637d6

+ 6 - 0
entry/src/main/ets/pages/NewIndex.ets

@@ -346,6 +346,10 @@ struct NewIndex {
         PreferencesUtil.putSync('isShowHaoPingDialog179', true)
       },25000)
     }
+    this.initDefalutType()
+  }
+
+  private initDefalutType(){
     if(this.defalut_home_type==0){
       this.mType = 0
     }else if(this.defalut_home_type==1){
@@ -358,6 +362,7 @@ struct NewIndex {
           this.webDavAccounts[0].webType===RemoteDriveType.Jellyfin||
           this.webDavAccounts[0].webType===RemoteDriveType.Emby){
           this.mType = 7
+          this.selectedAccount = new WebDavAccount()
           this.selectWebDavAccount(this.webDavAccounts[0])
         }else{
           this.mType = 6
@@ -376,6 +381,7 @@ struct NewIndex {
     console.info('onecold 网盘 默认首页2 this.mType='+this.mType )
   }
 
+
   /**
    * 检查并显示更新日志
    */

+ 129 - 146
entry/src/main/ets/view/LocalMusic.ets

@@ -146,6 +146,8 @@ import {
 import { GlobalAlphabetIndexerModifier } from '../Styels/GlobalStyles'
 import { getFirstLetter } from '../Constants';
 import { audio } from '@kit.AudioKit';
+import { PointLightDefaultButton } from './PointLight/PointLightDeFaultButton';
+
 const TAG = 'LocalMusic';
 const HICAR_LOG_TAG = 'HiCarWindow';
 
@@ -1073,6 +1075,7 @@ export struct LocalMusic {
   }
   initSetting() {
     this.enablePointLight = PreferencesUtil.getBooleanSync('enablePointLight', true)
+    AppStorage.setOrCreate('EnablePointLight', this.enablePointLight);
     this.showSimple = PreferencesUtil.getBooleanSync('showSimple', true)
     this.showZMIndex = PreferencesUtil.getBooleanSync('showZMIndex', false)
     this.autoHideTitle = PreferencesUtil.getBooleanSync('autoHideTitle', true)
@@ -10402,14 +10405,15 @@ export struct LocalMusic {
       .width('65%')
 
       Column() {
-
-        Image($r('app.media.lyric'))
-          .width(28)
-          .aspectRatio(CommonConstants.ASPECT_RATIO)
-          .margin({ right: 30 })
-          .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
+        PointLightDefaultButton({
+          isSysBol:false,
+          pointColor:Color.White,
+          imageResource:$r('app.media.lyric'),
+          isPx: false,
+          builderHeight: 27,
+          builderWidth: 27,
+        })
           .onClick(() => {
-
             this.isLyricSetting = !this.isLyricSetting;
           })
           .bindSheet($$this.isLyricSetting, this.lyricSettingSheet(false), {
@@ -10422,7 +10426,6 @@ export struct LocalMusic {
             title: { title: $r('app.string.lyric_setting') }
           })
 
-
       }
       .width('18%')
 
@@ -10479,7 +10482,7 @@ export struct LocalMusic {
           Column() {
             this.playProgressView()
           }
-          .margin({ bottom: 34, right: this.currentLyricAlignMode == 0 ? 0 : 30 })
+          .margin({ bottom: 32, right: this.currentLyricAlignMode == 0 ? 0 : 30 })
         }
       }
       .position({
@@ -10553,8 +10556,8 @@ export struct LocalMusic {
           this.playMenuBuilder()
         },
         isPx: false,
-        builderHeight: 33,
-        builderWidth: 33,
+        builderHeight: 32,
+        builderWidth: 32,
       })
         .onClick(async () =>{
           this.isShowMoreView = !this.isShowMoreView;
@@ -10566,8 +10569,8 @@ export struct LocalMusic {
           this.playPreviousBuilder()
         },
         isPx: false,
-        builderHeight: 33,
-        builderWidth: 33,
+        builderHeight: 32,
+        builderWidth: 32,
       })
         .onClick(async () =>{
           await this.playPrevious()
@@ -10592,8 +10595,8 @@ export struct LocalMusic {
           this.playNextBuilder()
         },
         isPx: false,
-        builderHeight: 33,
-        builderWidth: 33,
+        builderHeight: 32,
+        builderWidth: 32,
       })
         .onClick(async () =>{
           await this.playNext()
@@ -10611,7 +10614,7 @@ export struct LocalMusic {
   @Builder
   playPreviousBuilder(){
     Image($r('app.media.ic_previous'))
-      .width(33)
+      .width(32)
       .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
       .aspectRatio(CommonConstants.ASPECT_RATIO)
   }
@@ -10619,7 +10622,7 @@ export struct LocalMusic {
   @Builder
   playNextBuilder(){
     Image($r('app.media.ic_next'))
-      .width(33)
+      .width(32)
       .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
       .aspectRatio(CommonConstants.ASPECT_RATIO)
   }
@@ -10630,7 +10633,7 @@ export struct LocalMusic {
         Image(this.CONTROL_PlayStatus === PlayStatus.PLAY ?
           (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()?45:55)
+          .width(this.isPhoneLan()?43:53)
           .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
           .fillColor(Color.White)
           .aspectRatio(CommonConstants.ASPECT_RATIO)
@@ -10639,14 +10642,14 @@ export struct LocalMusic {
       // 加载进度圈
       if (this.isPlayerLoading) {
         Progress({value:0,total:100,type:ProgressType.Ring })
-          .width(this.isPhoneLan()?48:57)
-          .height(this.isPhoneLan()?48:57)
+          .width(this.isPhoneLan()?46:55)
+          .height(this.isPhoneLan()?46:55)
           .color(Color.White)
           .style({ strokeWidth: 5, status: ProgressStatus.LOADING })
       }
     }
-    .width(this.isPhoneLan()?45:55)
-    .height(this.isPhoneLan()?45:55)
+    .width(this.isPhoneLan()?43:53)
+    .height(this.isPhoneLan()?43:53)
   }
 
 
@@ -10751,8 +10754,8 @@ export struct LocalMusic {
         this.playModeBuilder()
       },
       isPx: false,
-      builderHeight: 33,
-      builderWidth: 33,
+      builderHeight: 32,
+      builderWidth: 32,
     })
       .onClick(async () =>{
         this.setLoopMode()
@@ -10765,22 +10768,22 @@ export struct LocalMusic {
     Column() {
       if (this.playType === 0) {
         Image($r('app.media.loop'))
-          .width(27)
+          .width(26)
           .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
           .aspectRatio(CommonConstants.ASPECT_RATIO)
       } else if (this.playType === 1) {
         Image($r('app.media.single'))
-          .width(27)
+          .width(26)
           .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
           .aspectRatio(CommonConstants.ASPECT_RATIO)
       } else if (this.playType === 2) {
         Image($r('app.media.normal_play'))
           .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-          .width(27)
+          .width(26)
           .aspectRatio(CommonConstants.ASPECT_RATIO)
       } else if (this.playType === 3) {
         Image($r('app.media.random'))
-          .width(27)
+          .width(26)
           .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
           .aspectRatio(CommonConstants.ASPECT_RATIO)
       }
@@ -10791,18 +10794,32 @@ export struct LocalMusic {
   @Builder
   BottomView(){
     Row() {
+      PointLightDefaultButton({
+        isSysBol:true,
+        pointColor:Color.White,
+        imageResource:$r('sys.symbol.rectangle_portrait_rotate'),
+        isPx: false,
+        builderHeight: 26,
+        builderWidth: 26,
+      })
+        .onClick(async () =>{
+          if (this.isLandscape) {
+            this.setOrientation(window.Orientation.USER_ROTATION_PORTRAIT);
+          } else {
+            this.setOrientation(window.Orientation.USER_ROTATION_LANDSCAPE);
+          }
+        })
 
-      this.fullButton()
 
       if(this.currentSong){
-        Button({type:ButtonType.Circle,stateEffect:true}){
-          Column() {
-            Image($r('app.media.rename2'))
-              .width(21)
-              .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-              .aspectRatio(CommonConstants.ASPECT_RATIO)
-          }
-        }
+        PointLightDefaultButton({
+          isSysBol:true,
+          pointColor:Color.White,
+          imageResource:$r('sys.symbol.rename'),
+          isPx: false,
+          builderHeight: 26,
+          builderWidth: 26,
+        })
         .bindSheet($$this.isShowEdit, this.editSheet(this.currentSong), {
           height:  '99%',
           dragBar: true,
@@ -10810,10 +10827,6 @@ export struct LocalMusic {
           preferType:  SheetType.BOTTOM,
           title: { title: '编辑标签' }
         })
-        .height(45)
-        .width(45)
-        .layoutWeight(1)
-        .backgroundColor(Color.Transparent)
         .onClick(async () => {
           this.initEditFields(this.currentSong)
           this.tempLyricContent = this.lyricContent
@@ -10825,59 +10838,20 @@ export struct LocalMusic {
       }
 
 
-
-      Button({type:ButtonType.Circle,stateEffect:true}){
-        Column() {
-          Image($r('app.media.lyric'))
-            .width(26)
-            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-            .aspectRatio(CommonConstants.ASPECT_RATIO)
-        }
-      }
-      .height(45)
-      .width(45)
-      .layoutWeight(1)
-      .backgroundColor(Color.Transparent)
-      .onClick(async () => {
-        this.isLyricSetting = !this.isLyricSetting;
-
+      PointLightDefaultButton({
+        isSysBol:false,
+        pointColor:Color.White,
+        imageResource:$r('app.media.lyric'),
+        isPx: false,
+        builderHeight: 26,
+        builderWidth: 26,
       })
+        .onClick(async () => {
+          this.isLyricSetting = !this.isLyricSetting;
 
+        })
 
-      //播放列表
-      Button({type:ButtonType.Circle,stateEffect:true}){
-        Image($r('app.media.hm_playlist'))
-          .width(24)
-          .fillColor(Color.White)
-          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-          .aspectRatio(CommonConstants.ASPECT_RATIO)
-          .bindSheet($$this.isShowSheetView, this.PlayListSheet(), {
-            height: '95%',
-            dragBar: true,
-            showClose: true,
-            preferType: this.currentBreakpoint !== BreakpointTypeEnum.SM ? SheetType.CENTER : SheetType.BOTTOM,
-            blurStyle: BlurStyle.Thin,
-            backgroundColor: this.isPlayListBgGrass?Color.Transparent:$r('app.color.silvery'),
-            title: {
-              title: Utility.resourceToString(this.context, $r('app.string.current_play_list'))
-                + `(${this.getPlayListDisplayCount()}首)`
-            }
-          })
-      }
-      .layoutWeight(1)
-      .height(45)
-      .width(45)
-      .backgroundColor(Color.Transparent)
-      .onClick(() => {
-        this.isShowSheetView = !this.isShowSheetView;
-        if(this.isPlayListBgGrass){
-          this.isFrontWhite = true
-        }else{
-          this.isFrontWhite = false
-        }
-        this.scrollIndex()
-        void this.hydrateFullMediaPlayListIfNeeded();
-      })
+      this.playListBuilder()
 
     }
     .width(this.isLandscape?'88%':'95%')
@@ -10892,36 +10866,72 @@ export struct LocalMusic {
 
   @Builder
   fullButton(){
-    Button({type:ButtonType.Circle,stateEffect:true}){
-      Column() {
-        Image($r('app.media.full_4'))
-          .width(25)
-          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-          .aspectRatio(CommonConstants.ASPECT_RATIO)
-      }
+    Column() {
+      Image($r('app.media.full_4'))
+        .width(25)
+        .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+        .aspectRatio(CommonConstants.ASPECT_RATIO)
     }
-    .layoutWeight(1)
-    .backgroundColor(Color.Transparent)
-    .height(45)
-    .width(45)
-    .onClick(async () => {
-      if (this.isLandscape) {
-        this.setOrientation(window.Orientation.USER_ROTATION_PORTRAIT);
-      } else {
-        this.setOrientation(window.Orientation.USER_ROTATION_LANDSCAPE);
-      }
+  }
 
+  @Builder
+  playListBuilder(){
+    PointLightDefaultButton({
+      isSysBol:true,
+      pointColor:Color.White,
+      imageResource:$r('sys.symbol.music_note_list'),
+      isPx: false,
+      builderHeight: 26,
+      builderWidth: 26,
     })
+      .bindSheet($$this.isShowSheetView, this.PlayListSheet(), {
+        height: '95%',
+        dragBar: true,
+        showClose: true,
+        preferType: this.currentBreakpoint !== BreakpointTypeEnum.SM ? SheetType.CENTER : SheetType.BOTTOM,
+        blurStyle: BlurStyle.Thin,
+        backgroundColor: this.isPlayListBgGrass?Color.Transparent:$r('app.color.silvery'),
+        title: {
+          title: Utility.resourceToString(this.context, $r('app.string.current_play_list'))
+            + `(${this.getPlayListDisplayCount()}首)`
+        }
+      })
+      .onClick(() => {
+        this.isShowSheetView = !this.isShowSheetView;
+        if(this.isPlayListBgGrass){
+          this.isFrontWhite = true
+        }else{
+          this.isFrontWhite = false
+        }
+        this.scrollIndex()
+        void this.hydrateFullMediaPlayListIfNeeded();
+      })
   }
 
   //旧版本播放进度条(现在是手机横屏的播放条)
   @Builder
   playProgressView() {
     Row() {
+
+
       Column(){
-        this.fullButton()
+        PointLightDefaultButton({
+          isSysBol:true,
+          pointColor:Color.White,
+          imageResource:$r('sys.symbol.rectangle_portrait_rotate'),
+          isPx: false,
+          builderHeight: 26,
+          builderWidth: 26,
+        })
+          .onClick(async () =>{
+            if (this.isLandscape) {
+              this.setOrientation(window.Orientation.USER_ROTATION_PORTRAIT);
+            } else {
+              this.setOrientation(window.Orientation.USER_ROTATION_LANDSCAPE);
+            }
+          })
       }
-      .margin({ right: 10})
+      .margin({ right: 10,bottom:6})
       .visibility( this.is_auto_hide_progress ? Visibility.None : Visibility.Visible)
       .animation({
           duration: 666,
@@ -10937,15 +10947,15 @@ export struct LocalMusic {
         min: 0,
         max: this.PROGRESS_MAX_VALUE,
         step: 1,
-        style: SliderStyle.OutSet
+        style: SliderStyle.InSet
       })
         .width('600px')
         .blockColor('rgba(255,255,255,1)')
         .trackColor('rgba(255,255,255,0.3)')
         .selectedColor(Color.White)
-        .trackThickness(PlayConstants.PROGRESS_TRACK_THICKNESS)
+        .trackThickness(5)
         .layoutWeight(1)
-        .margin({ left: PlayConstants.PROGRESS_MARGIN_LEFT })
+        .margin({top:4, left: PlayConstants.PROGRESS_MARGIN_LEFT })
         .showSteps(false)
         .showTips(true)
         .enabled(this.slideEnable)
@@ -10967,52 +10977,26 @@ export struct LocalMusic {
         .fontSize($r('app.float.slider_font_size'))
         .fontColor(Color.White)
         .margin(3)
-        .margin({ left: PlayConstants.PROGRESS_MARGIN_LEFT })
 
 
       //播放列表
-      Button({ type: ButtonType.Circle, stateEffect: true }) {
-        Image($r('app.media.hm_playlist'))
-          .width($r('app.float.control_image_width'))
-          .fillColor(Color.White)
-          .aspectRatio(CommonConstants.ASPECT_RATIO)
-          .bindSheet($$this.isShowSheetView, this.PlayListSheet(), {
-            height: '95%',
-            dragBar: true,
-            showClose: true,
-            preferType: this.currentBreakpoint !== BreakpointTypeEnum.SM ? SheetType.CENTER : SheetType.BOTTOM,
-            blurStyle: BlurStyle.Thin,
-            backgroundColor: this.isPlayListBgGrass ? Color.Transparent : $r('app.color.silvery'),
-            title: {
-              title: Utility.resourceToString(this.context, $r('app.string.current_play_list'))
-                + `(${this.getPlayListDisplayCount()}首)`
-            }
-          })
+      Column(){
+        this.playListBuilder()
       }
+      .margin({ left: 10,bottom:6})
       .visibility( this.is_auto_hide_progress ? Visibility.None : Visibility.Visible)
       .animation({
         duration: 666,
         curve: 'ease-in-out' // 可选动画曲线
       })
-      .backgroundColor(Color.Transparent)
-      .margin({ right: 20, left: 10 })
-      .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
-      .onClick(() => {
-        this.isShowSheetView = !this.isShowSheetView;
-        if (this.isPlayListBgGrass) {
-          this.isFrontWhite = true
-        } else {
-          this.isFrontWhite = false
-        }
-        this.scrollIndex()
-        void this.hydrateFullMediaPlayListIfNeeded();
-      })
+
 
     }
     //x5的竖屏模式需要99%
     .width(this.isPhonePortrait() ? '93.4%'
       : this.currentHeightBreakpoint == 1 && this.currentWidthBreakpoint == 2 ? '99%' : '82%')
     .height(this.isPhoneLan() ? 25 : 33)
+    .alignItems(VerticalAlign.Bottom)
     .animation({
       duration: 666,
       curve: 'ease-in-out' // 可选动画曲线
@@ -11107,7 +11091,6 @@ export struct LocalMusic {
       if (this.isPhoneLan()) {
         Column() {
           this.playCenterView()
-          // this.playProgressView()
         }
         .position({ left: 28, bottom: 38 })
 
@@ -11279,7 +11262,6 @@ export struct LocalMusic {
             .fontSize(22)
             .fontColor([Color.White])
             .alignSelf(ItemAlign.Center)
-            // .width(24)
             .clickEffect({level:ClickEffectLevel.MIDDLE})
             .aspectRatio(CommonConstants.ASPECT_RATIO)
             .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
@@ -12626,6 +12608,7 @@ export struct LocalMusic {
                     if (more.id == 23) {
                       this.enablePointLight = checked;
                       PreferencesUtil.put('enablePointLight', this.enablePointLight)
+                      AppStorage.setOrCreate('EnablePointLight', this.enablePointLight);
                     }
 
                   })

+ 0 - 1
entry/src/main/ets/view/PointLight/PointLightButton.ets

@@ -28,7 +28,6 @@ export struct PointLightButton{
   }
 
   setButtonSize(){
-    this.enablePointLight = PreferencesUtil.getBooleanSync('enablePointLight', true)
     this.sdkApiVersion = deviceInfo.sdkApiVersion
     let buttonHeight = this.builderHeight * this.buttonScale
     let buttonWidth = this.builderWidth * this.buttonScale

+ 99 - 0
entry/src/main/ets/view/PointLight/PointLightDeFaultButton.ets

@@ -0,0 +1,99 @@
+import { hdsEffect } from "@kit.UIDesignKit"
+import { deviceInfo } from "@kit.BasicServicesKit"
+
+@Component
+export struct PointLightDefaultButton{
+  @Require isPx: boolean
+  @Require isSysBol: boolean
+  @Require pointColor: ResourceColor
+  @Require imageResource: ResourceStr|Resource
+  @Require@Prop@Watch('setButtonSize') builderHeight: number
+  @Require@Prop@Watch('setButtonSize') builderWidth: number
+  // 可选
+  public buttonScale: number = 1.3
+  @State pointLightHeight: number = 100
+  public canShadow: boolean = true
+  public canPointLight: boolean = true
+
+
+  @StorageProp("EnablePointLight") enablePointLight: boolean = true
+  @StorageProp("EnableShadow") enableShadow: boolean = true
+
+  @StorageProp("SdkApiVersion") sdkApiVersion: number = 17
+  @State pointLightOptions: hdsEffect.PointLightOptions | undefined = undefined
+  @State buttonHeight: Length = 0
+  @State buttonWidth: Length = 0
+
+  aboutToAppear(): void {
+    this.setButtonSize()
+  }
+
+  setButtonSize(){
+    this.sdkApiVersion = deviceInfo.sdkApiVersion
+    let buttonHeight = this.builderHeight * this.buttonScale
+    let buttonWidth = this.builderWidth * this.buttonScale
+    if(this.isPx){
+      this.buttonHeight = `${buttonHeight}px`
+      this.buttonWidth = `${buttonWidth}px`
+    }else{
+      this.buttonHeight = buttonHeight
+      this.buttonWidth = buttonWidth
+    }
+  }
+
+  build() {
+    if(this.enablePointLight){
+      Button(){
+        this.imageBuilder()
+
+      }
+      .hitTestBehavior(HitTestMode.Transparent)
+      .height(this.buttonHeight)
+      .width(this.buttonWidth)
+      .stateEffect(false)
+      .clickEffect({level:ClickEffectLevel.LIGHT,scale: 0.9})
+      .backgroundColor(Color.Transparent)
+      .type(ButtonType.Circle)
+      .onTouch((event: TouchEvent) => {
+        if (event.type === TouchType.Down) {
+          this.pointLightOptions = {
+            color: Color.White,
+            intensity: 1,
+            height: this.pointLightHeight
+          }
+        } else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
+          this.pointLightOptions = undefined
+        }
+      })
+      .shadow(this.canShadow && this.enableShadow ? ShadowStyle.OUTER_DEFAULT_XS : undefined)
+      .visualEffect(this.canPointLight && this.sdkApiVersion >= 20 ?
+        new hdsEffect.HdsEffectBuilder()
+          .pointLight({
+            options: this.pointLightOptions,
+            illuminatedType: hdsEffect.PointLightIlluminatedType.BORDER_CONTENT
+          })
+          .buildEffect()
+        : undefined
+      )
+    }else{
+      this.imageBuilder()
+    }
+  }
+
+  @Builder
+  imageBuilder(){
+    if(this.isSysBol){
+      SymbolGlyph(this.imageResource as Resource)
+        .fontSize(20)
+        .fontColor([this.pointColor])
+        .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
+        .alignSelf(ItemAlign.Center)
+    }else{
+      Image(this.imageResource)
+        .width(20)
+        .fillColor(this.pointColor)
+        .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+        .aspectRatio(1)
+    }
+  }
+}

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

@@ -198,19 +198,6 @@ 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
-                        .scale({ x: 0.9, y: 0.9 })
-                        .combine(TransitionEffect
-                            .opacity(0.1)
-                        )
-                        .animation({
-                            duration: 150,
-                            curve: Curve.EaseInOut,
-                        })
-                )
                 .border({ radius: 12 })
                 // .backgroundColor(this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
                 //     && this.enableSeek && this.isUserTouching ? '#80a9a9a9' : '#00000000')
@@ -291,7 +278,6 @@ export struct LyricView2 {
                     duration: 150,
                     curve: Curve.Linear
                 })
-                .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST)
                 .padding(this.isSingleLine?0:{ top:5,bottom:5 })
                 .blendMode(
                     index == this.currentIndex ? BlendMode.DST_IN : undefined,
@@ -460,12 +446,8 @@ export struct LyricView2 {
                             colors: this.getWordByWordLyricLyricItemLinearGradient(item, word, index)
                         }:undefined)
                         .animation({
-                            // 动画播放速度
-                            tempo: 0.8,
-                            // 动画持续时间,单位是毫秒
-                            duration: 777,
-                            // 动画缓动函数
-                            curve: Curve.FastOutSlowIn
+                            duration: 150,
+                            curve: Curve.Linear
                         })
                 })
             }
@@ -485,6 +467,10 @@ export struct LyricView2 {
                         .visibility(this.isSingleLine?
                             (index >= this.currentIndex && index <= this.currentIndex + 1 ? Visibility.Visible : Visibility.None)
                             : Visibility.Visible)
+                        .animation({
+                            duration: 150,
+                            curve: Curve.Linear
+                        })
                 }
                 .justifyContent(this.alignMode === 'center' ? FlexAlign.Center : FlexAlign.Start)
                 .width(this.alignMode == 'center' ? '100%' :index == this.currentIndex ?'95%': '85%')