升级大屏组件

project/dvui/layout/AiDvWrapper/AiDvWrapper.vue

@@ -23,7 +23,7 @@
           </div>
           <div class="headerCenter">
             <div class="headerZone">
-              <div ref="fly" class="fly"/>
+              <div id="fly" class="fly"/>
               <span>{{ title }}</span>
             </div>
           </div>
@@ -55,10 +55,9 @@
 
 <script>
 import {fullScreenContainer} from '@jiaminghi/data-view'
-import {gsap} from 'gsap'
-import {MotionPathPlugin} from "gsap/MotionPathPlugin.js"
 import Vue from "vue";
 import RightTopBorder from "./rightTopBorder";
+import {Arc, Scene} from 'spritejs'
 
 Vue.use(fullScreenContainer)
 
@@ -126,43 +125,44 @@ export default {
       }
     },
     initFly() {
-      gsap.registerPlugin(MotionPathPlugin);
-      const rand = (min, max) => min + (max - min) * Math.random(),
-          startFly = (p) => {
-            gsap.timeline()
-            .fromTo(p, {
-              x: rand(0, 600),
-              y: 90 - rand(8, 50),
-              scale: rand(1, 3),
-            }, {
-              y: 0,
-              ease: 'elastic.easeInOut',
-              duration: rand(2, 6),
-              onComplete: () => {
-                startFly(p, true);
-              }
-            }, 0)
-            .fromTo(p, {
-              opacity: 1
-            }, {
+      const rand = (min, max) => min + (max - min) * Math.random()
+      const initScene = (count = 0) => {
+        const container = document.querySelector('#fly')
+        if (container) {
+          const scene = new Scene({container, width: 600, height: 90}),
+              layer = scene.layer()
+          const startFly = (p) => {
+            let scaleNum = rand(1, 3)
+            const pos = [rand(0, 600), 90 - rand(8, 50)]
+            p.attr({
+              pos,
+              scale: [scaleNum, scaleNum],
+              radius: 1,
+              fillColor: '#0aa5ff',
+              filter: 'drop-shadow( 0, 2px, 2px, #0aa5ff)'
+            })
+            p.animate([
+              pos,
+              {y: 0}
+            ], {
               opacity: 0,
-              duration: rand(1, 1.5),
-              yoyo: true,
-              repeat: -1,
-              ease: 'power4.in'
-            }, 0)
+              duration: rand(1, 1.5) * 1000,
+              iterations: Infinity,
+              easing: 'ease-out'
+            })
+            setTimeout(() => layer.append(p), rand(1, 5) * 1000)
           }
+          //初始化标题萤火效果
+          let numP = 70;
+          for (let i = 0; i <= numP; i++) {
+            const p = new Arc()
+            startFly(p)
+          }
+        } else if (count == 20) {
 
-      setTimeout(() => {
-        //初始化标题萤火效果
-        let numP = 70;
-        for (let i = 0; i <= numP; i++) {
-          let p = document.createElement('div');
-          p.id = "p" + i;
-          this.$refs.fly?.appendChild(p)
-          setTimeout(() => startFly(p), 1000)
-        }
-      }, 1000)
+        } else setTimeout(() => initScene(++count), 500)
+      }
+      initScene()
     },
     handleSetting() {
       if (this.setting.timer) clearInterval(this.setting.timer)
@@ -533,6 +533,7 @@ export default {
         display: none;
       }
     }
+
     .headerPane {
       align-items: initial;
       z-index: 11;
@@ -542,8 +543,9 @@ export default {
       // background-size: 100% 88px;
       background-position-x: -8px;
     }
+
     .breatheLights {
-      display: none!important;
+      display: none !important;
     }
 
     .headerPane .headerCenter {
@@ -561,10 +563,8 @@ export default {
 
         span {
           top: 45%;
-          line-height: 1;
           font-size: 32px;
           font-family: FZZZHONGJW--GB1-0, FZZZHONGJW--GB1;
-          font-weight: normal;
           color: #CEE1FF;
           font-weight: 600;
           line-height: 38px;
@@ -580,13 +580,13 @@ export default {
         display: none;
       }
     }
-    
+
     .rightTopBorder {
       background: none;
       box-shadow: none;
 
       ::v-deep .corner {
-        display: none!important;
+        display: none !important;
       }
     }
 
@@ -603,14 +603,14 @@ export default {
 
     .setting {
       cursor: pointer;
-      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/setting.svg")!important;
+      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/setting.svg") !important;
       background-repeat: no-repeat;
       background-position: center center;
     }
 
     .fullscreen {
       cursor: pointer;
-      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/fullscreen.svg")!important;
+      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/fullscreen.svg") !important;
       background-repeat: no-repeat;
       background-position: center center;
     }