添加动画效果

src/views/creation/edit/index.tsx

@@ -16,6 +16,7 @@ export default defineComponent({
       id: route.query.id,
       musicDetail: {} as any,
       desc: '',
+      videoImg: '', // 视频封面
       img: [] as any
     });
 
@@ -24,7 +25,8 @@ export default defineComponent({
         await api_userMusicSave({
           id: state.id,
           img: state.img.join(','),
-          desc: state.desc,
+          videoImg: state.videoImg,
+          desc: state.desc || '我发布了一首演奏作品，快来听听吧～',
           musicPracticeRecordId: state.musicDetail.musicPracticeRecordId,
           type: 'FORMAL'
         });
@@ -39,6 +41,7 @@ export default defineComponent({
         const { data } = await api_userMusicDetail(state.id);
         state.musicDetail = data;
         state.desc = data.desc;
+        state.videoImg = data.videoImg;
         state.img = data.img ? [data.img] : [];
       } catch {
         //

src/views/creation/index.module.less

@@ -2,18 +2,25 @@
   min-height: 175px;
 }
 
+@keyframes rotateImg {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .audioSection {
   position: relative;
   background: url('./images/audio-banner-bg.png') no-repeat top center;
-  background-size: contain;
+  background-size: cover;
   height: 175px;
 
   .audioContainer {
     position: absolute;
-    top: 60px;
+    top: 0;
+    left: 50%;
     width: 196px;
     height: 35px;
-    left: 85px;
+    transform: translate(-50%, 60px);
 
     .waveActive,
     .waveDefault {
@@ -73,6 +80,12 @@
       display: flex;
       align-items: center;
       justify-content: center;
+
+      animation: rotateImg 6s linear infinite;
+
+      &.imgRotate {
+        animation-play-state: paused;
+      }
     }
 
     .audioImg {
@@ -103,6 +116,12 @@
       height: 87px;
       background: url('./images/audio-zhen.png') no-repeat center;
       background-size: contain;
+      transition: transform .5s ease-in-out;
+
+      &.active {
+        transform: rotate(92deg) translate3d(0, 0, 3px);
+        transition: transform .5s ease-in-out;
+      }
     }
   }
 

src/views/creation/index.tsx

@@ -207,22 +207,12 @@ export default defineComponent({
 
     // 下载
     const onDownload = async () => {
-      //
-      // showLoadingToast({
-      //   message: '图片生成中...',
-      //   forbidClick: true
-      // });
-      const res = await promisefiyPostMessage({
+      await promisefiyPostMessage({
         api: 'saveFile',
         content: {
           url: state.musicDetail.videoUrl
         }
       });
-      // if (res?.content?.status) {
-      //   showSuccessToast('保存成功');
-      // } else {
-      //   showFailToast('保存失败');
-      // }
     };
 
     const pageVisibility = usePageVisibility();
@@ -238,7 +228,7 @@ export default defineComponent({
     onMounted(async () => {
       try {
         const res = await api_userMusicDetail(state.id);
-        console.log(res);
+        // console.log(res);
         if (res.code === 999) {
           showDialog({
             message: res.message,
@@ -311,11 +301,13 @@ export default defineComponent({
               </div>
 
               <div class={styles.audioBox}>
-                <div class={styles.audioPan}>
+                <div
+                  class={[styles.audioPan, state.paused && styles.imgRotate]}>
                   <Image class={styles.audioImg} src={state.musicDetail?.img} />
                 </div>
                 <i class={styles.audioPoint}></i>
-                <i class={styles.audioZhen}></i>
+                <i
+                  class={[styles.audioZhen, state.paused && styles.active]}></i>
               </div>
               <div
                 class={[styles.controls]}