动画修改

src/views/creation/index-share.tsx

@@ -48,6 +48,8 @@ import "plyr/dist/plyr.css";
 import Plyr from "plyr";
 import { Vue3Lottie } from "vue3-lottie";
 import audioBga from "./images/audioBga.json";
+import audioBga1 from "./images/leftCloud.json";
+import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
 import audioVisualDraw from "./audioVisualDraw"
 
@@ -58,6 +60,8 @@ export default defineComponent({
     const router = useRouter();
     const isScreenScroll = ref(false)
     const lottieDom = ref()
+    const lottieDom1 = ref()
+    const lottieDom2 = ref()
     const state = reactive({
       id: route.query.id,
       isEmpty:false,
@@ -219,10 +223,14 @@ export default defineComponent({
         const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
         player.on('play', () => {
           lottieDom.value.play()
+          lottieDom1.value.play()
+          lottieDom2.value.play()
           playVisualDraw()
         });
         player.on('pause', () => {
           lottieDom.value.pause()
+          lottieDom1.value.pause()
+          lottieDom2.value.pause()
           pauseVisualDraw()
         });
       }
@@ -334,8 +342,8 @@ export default defineComponent({
     });
     // 初始化五线谱
     function initStaff(){
-      //const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
-      const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      //const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;
@@ -479,6 +487,8 @@ export default defineComponent({
                       <div class={styles.audioBox}>
                         <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
                         <Vue3Lottie ref={lottieDom} class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
+                        <Vue3Lottie ref={lottieDom1} class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
+                        <Vue3Lottie ref={lottieDom2} class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
                         <audio
                           crossorigin="anonymous"
                           id="audioMediaSrc"

src/views/creation/index.module.less

@@ -79,12 +79,26 @@
       background: url("./images/audioBg.png") no-repeat;
       background-size: 100% 100%;
       position: relative;
-      .audioBga{
+      .audioBga {
         position: absolute;
         left: 0;
-        bottom: 0;
+        top: 0;
         width: 100%;
-        height: 100%;
+        height: 82%;
+      }
+
+      .audioBga1 {
+          position: absolute;
+          left: 0;
+          top: 16px;
+          width: 94px;
+      }
+
+      .audioBga2 {
+          width: 192px;
+          position: absolute;
+          right: -24px;
+          top: 0;
       }
       :global {
           .plyr {

src/views/creation/index.tsx

@@ -53,6 +53,8 @@ import "plyr/dist/plyr.css";
 import Plyr from "plyr";
 import { Vue3Lottie } from "vue3-lottie";
 import audioBga from "./images/audioBga.json";
+import audioBga1 from "./images/leftCloud.json";
+import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
 
 export default defineComponent({
@@ -62,6 +64,8 @@ export default defineComponent({
     const router = useRouter();
     const isScreenScroll = ref(false)
     const lottieDom = ref()
+    const lottieDom1 = ref()
+    const lottieDom2 = ref()
     const state = reactive({
       id: route.query.id,
       deleteStatus: false,
@@ -195,10 +199,14 @@ export default defineComponent({
         const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
         player.on('play', () => {
           lottieDom.value.play()
+          lottieDom1.value.play()
+          lottieDom2.value.play()
           playVisualDraw()
         });
         player.on('pause', () => {
           lottieDom.value.pause()
+          lottieDom1.value.pause()
+          lottieDom2.value.pause()
           pauseVisualDraw()
         });
       }
@@ -360,8 +368,8 @@ export default defineComponent({
     }
     // 初始化五线谱
     function initStaff(){
-      //const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
-      const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      //const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;
@@ -523,6 +531,8 @@ export default defineComponent({
               <div class={styles.audioBox}>
                 <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
                 <Vue3Lottie ref={lottieDom} class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
+                <Vue3Lottie ref={lottieDom1} class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
+                <Vue3Lottie ref={lottieDom2} class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
                 <audio
                   crossorigin="anonymous"
                   id="audioMediaSrc"

src/views/creation/playCreation/index.module.less

@@ -108,11 +108,27 @@
       background: url("../images/audioBg.png") no-repeat;
       background-size: 100% 100%;
       position: relative;
-      .audioBga{
-          width: 100%;
-          height: 100%;
-          overflow: hidden;
-      }
+      .audioBga {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 82%;
+    }
+
+    .audioBga1 {
+        position: absolute;
+        left: 0;
+        top: 60px;
+        width: 146px;
+    }
+
+    .audioBga2 {
+        width: 268px;
+        position: absolute;
+        right: -24px;
+        top: 0;
+    }
       :global {
           .plyr {
               position: absolute;

src/views/creation/playCreation/index.tsx

@@ -6,6 +6,8 @@ import "plyr/dist/plyr.css";
 import Plyr from "plyr";
 import { Vue3Lottie } from "vue3-lottie";
 import audioBga from "../images/audioBga.json";
+import audioBga1 from "../images/leftCloud.json";
+import audioBga2 from "../images/rightCloud.json";
 import videobg from "../images/videobg.png";
 import backImg from "../images/back.png";
 import {
@@ -26,6 +28,8 @@ export default defineComponent({
     const videoBgUrl = decodeURIComponent(route.query.videoBgUrl as string || '');
     const playType = resourceUrl.lastIndexOf('mp4') !== -1 ? 'Video' : 'Audio'
     const lottieDom = ref()
+    const lottieDom1 = ref()
+    const lottieDom2 = ref()
     const landscapeScreen = ref(false)
     let _plrl:any
     const playIngShow = ref(true)
@@ -246,10 +250,14 @@ export default defineComponent({
         const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
         _plrl.on('play', () => {
           lottieDom.value.play()
+          lottieDom1.value.play()
+          lottieDom2.value.play()
           playVisualDraw()
         });
         _plrl.on('pause', () => {
           lottieDom.value.pause()
+          lottieDom1.value.pause()
+          lottieDom2.value.pause()
           pauseVisualDraw()
         });
       }
@@ -297,8 +305,8 @@ export default defineComponent({
     });
     // 初始化五线谱
     function initStaff(){
-      //const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
-      const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      const src = `${vaildMusicScoreUrl()}/instrument/#/simple-detail?id=${musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+      //const src = `http://192.168.3.122:3000/instrument.html#/simple-detail?id=${musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
       staffState.staffSrc = src
       window.addEventListener('message', (event) => {
         const { api, height } = event.data;
@@ -404,6 +412,8 @@ export default defineComponent({
           <div class={styles.audioBox}>
             <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
             <Vue3Lottie ref={lottieDom} class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
+            <Vue3Lottie ref={lottieDom1} class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
+            <Vue3Lottie ref={lottieDom2} class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
             <audio
               crossorigin="anonymous"
               id="audioMediaSrc"