实现切换封面动画效果

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

@@ -138,6 +138,8 @@ const ITEM_HEIGHT_BIG: number = 78; // 列表项大高度
 @Preview
 @Component
 export struct LocalMusic {
+  @State opacityValueImage: number = 1;
+  @State isAnimating: boolean = false;
   @State tipPopup:boolean = false
   @Consume mType: number;
   @StorageProp('themeColor') themeColor: string =
@@ -1959,11 +1961,6 @@ export struct LocalMusic {
               controller: this.xcomponentController
 
             })
-              .onLoad((event?: object) => {
-                if (!!event) {
-                  this.initDelayPlay(event);
-                }
-              })
               .onLoad((event?: object) => {
                 if (!!event) {
                   this.initDelayPlay(event);
@@ -2177,7 +2174,6 @@ export struct LocalMusic {
       .backdropBlur(this.blurValue)
       .backgroundBrightness({ rate: this.isCustomizeBg ? 0.1 : 0, lightUpDegree: this.bgBrightness })
       .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
-
     }
 
   }
@@ -4480,12 +4476,12 @@ export struct LocalMusic {
           let globalVideoList = Utility.getGlobalList(this.videoLocalList, CommonConstants.TYPE_LOCAL) as VideoItem[];
           this.curIndex = Utility.getCurIndexFromGlobalList(globalVideoList, item.filePath)
           this.songList = globalVideoList
-          AppStorage.setOrCreate('currentSong',this.currentSong) ;
+
           this.sonDataSource.pushArrayData(this.songList)
           this.currentSong = globalVideoList[this.curIndex]
         }
 
-
+        AppStorage.setOrCreate('currentSong',this.currentSong) ;
         this.videoUrl = this.currentSong.filePath
         this.name = this.currentSong.name
         this.cover = this.currentSong.pixelMapPath
@@ -6696,8 +6692,9 @@ export struct LocalMusic {
       return;
     }
     let bg = Utility.getMusisBg()
-
     this.imageLabel = bg
+
+
     ColorConversion.setSysBarLightBackground(true);
     this.context.resourceManager.getMediaContent(bg)
       .then((value: Uint8Array) => {
@@ -7266,7 +7263,8 @@ export struct LocalMusic {
   @State is_auto_hide_progress: boolean = false //手机横屏自动隐藏播放进退条，点击屏幕可以显示，倒计时4秒后又自动隐藏
   @State isCoverRectangle: boolean = false
   @State isCoverTop: boolean = true
-
+  // 添加控制缩放的状态变量
+  @State scaleValueImage: number = 1
   @Builder
   CoverInfo() {
     Column() {
@@ -7284,8 +7282,8 @@ export struct LocalMusic {
       Stack() {
         // 唱片旋转效果
         Image($r('app.media.ic_music_disc'))
-          .width(250)
-          .height(250)
+          .width(245)
+          .height(245)
           .margin({ right: 20, left: 20 })
           .aspectRatio(1)
           .opacity(this.isCoverOpacity() || this.isCoverRectangle ? 0 : 1)
@@ -7309,19 +7307,17 @@ export struct LocalMusic {
 
         Column() {
           if (this.isCoverTop && !this.isCoverOpacity() && this.isCoverRectangle) {
-            Image(StrUtil.isEmpty(this.cover) ? this.imageLabel :
-            this.cover)// .height(this.isCoverOpacity() ? 250 : this.isCoverRectangle ? 320 : 162)
+            Image(StrUtil.isEmpty(this.cover) ? this.imageLabel : this.cover)// .height(this.isCoverOpacity() ? 250 : this.isCoverRectangle ? 320 : 162)
               .width(this.isBigScreen() ? '72%' : this.isCoverTopBig ? '100%' : '86%')
               .objectFit(this.isCoverRectangle ? ImageFit.Contain : ImageFit.Auto)
               .alt(this.imageLabel)
               .margin({ right: 8, left: 8, top: 8 })
               .aspectRatio(1)
+              .opacity(this.opacityValueImage)
+              .scale({ x: this.scaleValueImage, y: this.scaleValueImage }) // 添加缩放效果
               .visibility(this.isPuraWP() ? Visibility.None : Visibility.Visible)
               .borderRadius(this.isCoverRectangle ? 20 : '100%')
-              .clickEffect({ level: ClickEffectLevel.MIDDLE })
-              .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 })
-                .animation({ duration: 500 }),
-                TransitionEffect.scale({ x: 0, y: 0 })))
+              .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.8 })
               .align(Alignment.Center)//
               .clip(true)
               .rotate({
@@ -7342,12 +7338,11 @@ export struct LocalMusic {
               .alt(this.imageLabel)
               .margin({ right: 20, left: 20 })
               .aspectRatio(1)
+              .opacity(this.opacityValueImage)
+              .scale({ x: this.scaleValueImage, y: this.scaleValueImage }) // 添加缩放效果
               .visibility(this.isPuraWP() ? Visibility.None : Visibility.Visible)
               .borderRadius(this.isCoverRectangle ? 20 : '100%')
-              .clickEffect({ level: ClickEffectLevel.MIDDLE })
-              .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 })
-                .animation({ duration: 500 }),
-                TransitionEffect.scale({ x: 0, y: 0 })))
+              .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.8 })
               .align(Alignment.Center)//
               .clip(true)
               .rotate({
@@ -7452,11 +7447,14 @@ export struct LocalMusic {
         .textOverflow({ overflow: TextOverflow.MARQUEE })//超长滚动
         .fontColor(Color.White)
         .textAlign(TextAlign.Center)
+        .visibility(StrUtil.isEmpty(this.artist)?Visibility.None:Visibility.Visible)
         .width('99%')
         .maxLines(1)
     }
     .margin({ top: this.isCoverOpacity() ? 20 : isHidden ? 40 : 20 })
     .zIndex(1)
+    // .opacity(this.opacityValueImage)
+    .scale({ x: this.scaleValueImage, y: this.scaleValueImage }) // 添加缩放效果
     .visibility(this.isCoverOpacity() || isHidden ? Visibility.None : Visibility.Visible)
   }
 
@@ -10432,7 +10430,9 @@ export struct LocalMusic {
       this.stop();
       this.currentSong = this.songList[this.curIndex]
       this.videoUrl = this.songList[this.curIndex].filePath;
-      this.cover = this.songList[this.curIndex].pixelMapPath
+
+      //this.cover = this.songList[this.curIndex].pixelMapPath
+      this.changeImageAnimation()
       this.artist = this.songList[this.curIndex].artist
       this.name = this.songList[this.curIndex].name
       this.startPlayOrResumePlay()
@@ -10441,6 +10441,32 @@ export struct LocalMusic {
 
   }
 
+  changeImageAnimation() {
+    // 第一步：淡出动画
+    this.getUIContext()?.animateTo({
+      duration: 500,
+      curve: Curve.EaseOut,
+    }, () => {
+      this.opacityValueImage = 0.3;
+      if(this.isCoverRectangle){
+        this.scaleValueImage = 0.88
+      }
+
+    });
+
+    // 第二步：切换图片后淡入
+    setTimeout(() => {
+      this.cover = this.songList[this.curIndex].pixelMapPath
+      this.getUIContext()?.animateTo({
+        duration: 500,
+        curve: Curve.EaseIn,
+      }, () => {
+        this.opacityValueImage = 1;
+        this.scaleValueImage = 1 // 图标恢复到原始大小
+      });
+    }, 500);
+  }
+
   // 存储已播放的歌曲索引
   private playedIndices: Set<number> = new Set();
 
@@ -10488,7 +10514,8 @@ export struct LocalMusic {
       this.currentSong = this.songList[this.curIndex];
       this.videoUrl = this.songList[this.curIndex].filePath;
       this.name = this.songList[this.curIndex].name;
-      this.cover = this.songList[this.curIndex].pixelMapPath
+      // this.cover = this.songList[this.curIndex].pixelMapPath
+      this.changeImageAnimation()
       this.artist = this.songList[this.curIndex].artist
       this.startPlayOrResumePlay();
     }
@@ -10505,7 +10532,7 @@ export struct LocalMusic {
       this.currentSong = this.songList[this.curIndex]
       this.videoUrl = this.songList[index].filePath;
       this.name = this.songList[index].name
-      this.cover = this.songList[this.curIndex].pixelMapPath
+      this.changeImageAnimation()
       this.artist = this.songList[this.curIndex].artist
       this.curIndex = index;
       this.startPlayOrResumePlay()
@@ -10513,6 +10540,7 @@ export struct LocalMusic {
 
   }
 
+
   //上一个
   private playPrevious() {
     if (!this.debounce()) {
@@ -10533,7 +10561,8 @@ export struct LocalMusic {
     this.currentSong = this.songList[this.curIndex]
     this.videoUrl = this.songList[this.curIndex].filePath;
     this.name = this.songList[this.curIndex].name
-    this.cover = this.songList[this.curIndex].pixelMapPath
+    this.changeImageAnimation()
+    // this.cover = this.songList[this.curIndex].pixelMapPath
     this.artist = this.songList[this.curIndex].artist
     this.startPlayOrResumePlay()
   }
@@ -10563,7 +10592,8 @@ export struct LocalMusic {
       this.stop();
       this.currentSong = this.songList[this.curIndex];
       this.videoUrl = this.songList[this.curIndex].filePath;
-      this.cover = this.songList[this.curIndex].pixelMapPath
+      this.changeImageAnimation()
+      // this.cover = this.songList[this.curIndex].pixelMapPath
       this.artist = this.songList[this.curIndex].artist
       this.name = this.songList[this.curIndex].name;