@shijiu/jsview-vue-samples 2.1.340-test.0 → 2.1.362-test.0

package/CoupletsTest/App.vue

@@ -3,62 +3,12 @@
     <div class="bgStyle">
       <!-- 春联效果 -->
       <div v-if="myIndex == 1">
-        <div
-          :style="{
-            top: 100,
-            left: 200,
-            width: 150,
-            height: 500,
-            overflow: 'hidden',
-            animation: 'recovery-clip 1.5s linear',
-          }"
-        >
-          <div
-            :style="{
-              top: 0,
-              left: 0,
-              width: 150,
-              height: 500,
-              backgroundImage: Couplets,
-              animation: 'recovery-img 1.5s linear',
-            }"
-          ></div>
-        </div>
-        <!-- 滚轴动画 -->
-        <div
-          :style="{
-            left: 170,
-            top: 500 + 96,
-            transform: `scale3d(${210 / view_size.w},1,1)`,
-          }"
-        >
-          <div
-            :style="{
-              width: 280,
-              height: 118,
-              animation: 'recovery-clip 1.5s linear',
-            }"
-          >
-            <JsvSpriteAnim
-              :spriteInfo="sprite_info.info"
-              :loop="4"
-              autostart="true"
-              :duration="0.4"
-              :imageUrl="scrollPng"
-            >
-            </JsvSpriteAnim>
-          </div>
-        </div>
-        <!-- 滚轴图片 -->
-        <div
-          :style="{
-            top: 100,
-            left: 200 - 30,
-            width: 210,
-            height: 30,
-            backgroundImage: scroll,
-          }"
-        ></div>
+        <MyCouplets
+          :top="130"
+          :left="200"
+          :width="150"
+          :animTime="1.5"
+        ></MyCouplets>
         <!-- 素材1 滚轴图片 -->
         <div
           :style="{
@@ -116,15 +66,239 @@
         </div>
       </div>
       <!-- 鞭炮引线 第二页 -->
-      <div v-else-if="myIndex == 3">
-        <LeadWire :top="-580" :left="200"></LeadWire>
+      <div v-else-if="myIndex == 2">
+        <Banger
+          :top="100"
+          :left="200"
+          :num="16"
+          :leadWireTime="4"
+          :width="100"
+        ></Banger>
         <div
           class="text"
-          :style="{ top: 680, left: 980, width: 300, height: 60 }"
+          :style="{ top: 40, left: 130, width: 150, height: 100 }"
+        >
+          {{ "炮仗效果" }}
+        </div>
+        <!-- 素材1 火花精灵图-->
+        <div
+          :style="{
+            top: 100,
+            left: 600,
+            width: 210,
+            height: 120,
+            backgroundImage: sparkPng,
+          }"
+        ></div>
+        <!-- 素材2 炮仗精灵图 -->
+        <div
+          :style="{
+            top: 300,
+            left: 600,
+            width: 210,
+            height: 120,
+            backgroundImage: firecrackerPng,
+          }"
+        ></div>
+        <!-- 素材3 引线图 -->
+        <div
+          :style="{
+            top: 520,
+            left: 650,
+            width: 100,
+            height: 150,
+            backgroundImage: leadWire,
+          }"
+        ></div>
+        <!-- 素材4 红色星星 -->
+        <div
+          :style="{
+            top: 100,
+            left: 900,
+            width: 210,
+            height: 120,
+            backgroundImage: redStar,
+          }"
+        ></div>
+        <!-- 素材5 黄色星星 -->
+        <div
+          :style="{
+            top: 300,
+            left: 900,
+            width: 210,
+            height: 120,
+            backgroundImage: yellowStar,
+          }"
+        ></div>
+        <!-- 素材6 紫色星星 -->
+        <div
+          :style="{
+            top: 520,
+            left: 900,
+            width: 210,
+            height: 120,
+            backgroundImage: purpleStar,
+          }"
         ></div>
+        <!-- 说明  -->
+        <div
+          class="text"
+          :style="{ top: 40, left: 600, width: 210, height: 100 }"
+        >
+          {{ "素材1" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 240, left: 600, width: 210, height: 100 }"
+        >
+          {{ "素材2" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 460, left: 600, width: 210, height: 100 }"
+        >
+          {{ "素材3" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 40, left: 900, width: 210, height: 100 }"
+        >
+          {{ "素材4" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 240, left: 900, width: 210, height: 100 }"
+        >
+          {{ "素材5" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 460, left: 900, width: 210, height: 100 }"
+        >
+          {{ "素材6" }}
+        </div>
       </div>
       <div v-else>
-        <Salvo></Salvo>
+        <Fireworks :top="600" :left="200" />
+        <div
+          class="text"
+          :style="{ top: 40, left: 130, width: 150, height: 100 }"
+        >
+          {{ "烟花效果" }}
+        </div>
+        <!-- 素材1 精灵图-->
+        <div
+          :style="{
+            top: 100,
+            left: 600,
+            width: 210,
+            height: 120,
+            backgroundImage: fireworksPng,
+          }"
+        ></div>
+        <!-- 素材2 金币图1 -->
+        <div
+          :style="{
+            top: 340,
+            left: 670,
+            width: 50,
+            height: 50,
+            backgroundImage: GoldenCoin1,
+          }"
+        ></div>
+        <!-- 素材3 金币图2 -->
+        <div
+          :style="{
+            top: 550,
+            left: 670,
+            width: 50,
+            height: 50,
+            backgroundImage: GoldenCoin2,
+          }"
+        ></div>
+        <!-- 素材4 星星1 -->
+        <div
+          :style="{
+            top: 100,
+            left: 980,
+            width: 50,
+            height: 50,
+            backgroundImage: star1,
+          }"
+        ></div>
+        <!-- 素材5 星星2 -->
+        <div
+          :style="{
+            top: 260,
+            left: 980,
+            width: 50,
+            height: 50,
+            backgroundImage: star2,
+          }"
+        ></div>
+        <!-- 素材6 星星3 -->
+        <div
+          :style="{
+            top: 420,
+            left: 980,
+            width: 50,
+            height: 50,
+            backgroundImage: star3,
+          }"
+        ></div>
+        <!-- 素材7 星星4 -->
+        <div
+          :style="{
+            top: 580,
+            left: 980,
+            width: 50,
+            height: 50,
+            backgroundImage: star4,
+          }"
+        ></div>
+        <!-- 文字说明 -->
+        <div
+          class="text"
+          :style="{ top: 40, left: 600, width: 210, height: 100 }"
+        >
+          {{ "素材1" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 240, left: 600, width: 210, height: 100 }"
+        >
+          {{ "素材2" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 460, left: 600, width: 210, height: 100 }"
+        >
+          {{ "素材3" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 40, left: 900, width: 210, height: 100 }"
+        >
+          {{ "素材4" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 200, left: 900, width: 210, height: 100 }"
+        >
+          {{ "素材5" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 360, left: 900, width: 210, height: 100 }"
+        >
+          {{ "素材6" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 520, left: 900, width: 210, height: 100 }"
+        >
+          {{ "素材7" }}
+        </div>
       </div>
       <!-- 翻页提示 -->
       <div
@@ -138,22 +312,27 @@
 </template>
 
 <script setup>
-import { JsvSpriteAnim } from "jsview";
 import { shallowRef } from "vue";
-import LeadWire from "./LeadWire.vue";
-import Couplets from "./images/Couplets.png";
-import scrollPng from "./Sprite/scroll.png";
-import scrollJson from "./Sprite/scroll.json";
-import { _formatInfo } from "./Common/SpriteDeal";
-import scroll from "./images/scroll1.png";
-import Salvo from "./Salvo.vue";
-let sprite_info = shallowRef(_formatInfo(scrollJson));
-
-const view_size = {
-  w: sprite_info.value.maxW,
-  h: sprite_info.value.maxH,
-};
-
+import Couplets from "./widget/images/Couplets.png";
+import scrollPng from "./widget/Sprite/scroll.png";
+import { _formatInfo } from "./widget/Common/SpriteDeal";
+import scroll from "./widget/images/scroll1.png";
+import MyCouplets from "./widget/Couplets/Couplets.vue";
+import Fireworks from "./widget/Fireworks/Fireworks.vue";
+import Banger from "./widget/Banger/Banger.vue";
+import GoldenCoin1 from "./widget/images/goldencoin1.png";
+import GoldenCoin2 from "./widget/images/goldencoin2.png";
+import star1 from "./widget/images/star1.png";
+import star2 from "./widget/images/star2.png";
+import star3 from "./widget/images/star3.png";
+import star4 from "./widget/images/star4.png";
+import fireworksPng from "./widget/Sprite/fireworks.png";
+import redStar from "./widget/images/redStar.png";
+import yellowStar from "./widget/images/yellowStar.png";
+import purpleStar from "./widget/images/purpleStar.png";
+import firecrackerPng from "./widget/Sprite/firecracker.png";
+import leadWire from "./widget/images/leadWire.png";
+import sparkPng from "./widget/Sprite/spark.png";
 //页码
 let myIndex = shallowRef(1);
 
@@ -184,24 +363,6 @@ const onKeyDown = (ev) => {
   height: 720;
   background-color: #007788;
 }
-@keyframes recovery-clip {
-  0% {
-    transform: translate3d(0, -500, 0);
-  }
-
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes recovery-img {
-  0% {
-    transform: translate3d(0, 500, 0);
-  }
-
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-}
 .text {
   font-size: 24;
   color: #ffffff;

package/CoupletsTest/widget/Banger/Banger.vue

@@ -0,0 +1,249 @@
+<!--
+ * 【模块 export 内容】
+ * Banger：鞭炮组件
+ *      props说明:
+ *          left          {Number}   组件顶端中心Left位置
+ *          top           {Number}   组件顶端中心Top位置
+ *          num           {Number}   鞭炮个数(个数决定长度)
+ *          leadWireTime  {Number}   引线燃烧时间
+ *          width         {Number}   整个组件的宽度
+-->
+<template>
+  <!-- 预加载 -->
+  <JsvPreload
+    :preloadList="preload_info"
+    :onPreloadDone="loadDone"
+  ></JsvPreload>
+  <div
+    v-show="myShow"
+    :style="{
+      left: props.left - widgetWidth / 2,
+      top: props.top,
+      width: widgetWidth,
+      height: leadWireHeight,
+      transform: `scale3d(${props.width / widgetWidth},${
+        props.width / widgetWidth
+      },1)`,
+      transformOrigin: 'center top',
+    }"
+  >
+    <div
+      :style="{
+        top: -leadWireHeight,
+        left: 0,
+        width: 80,
+        height: leadWireHeight,
+        overflow: 'hidden',
+        animation: aniName1,
+      }"
+    >
+      <div
+        :style="{
+          top: leadWireHeight,
+          left: 0,
+          width: 80,
+          height: leadWireHeight,
+          backgroundImage: leadWire,
+          animation: aniName2,
+        }"
+      ></div>
+    </div>
+    <!-- 燃烧特效 -->
+    <div
+      v-if="isSpark"
+      :style="{
+        top: -10,
+        left: 31,
+        animation: aniName1,
+      }"
+      @animationend="closeSpark"
+    >
+      <JsvSpriteLoader
+        :imageUrl="sparkPng"
+        :configUrl="sparkJson"
+        :onConfigReady="preloadCallback"
+        :noNeedResource="false"
+      >
+        <div
+          :style="{
+            transform: `scale3d(${20 / view_size.w},${20 / view_size.h},1)`,
+          }"
+        >
+          <JsvSpriteAnim
+            :spriteInfo="sprite_info.info"
+            :loop="'infinite'"
+            :duration="0.1"
+            :imageUrl="sparkPng"
+            ref="controllerAnim"
+            autoStart="true"
+          >
+          </JsvSpriteAnim>
+        </div>
+      </JsvSpriteLoader>
+    </div>
+
+    <MaroonLoader>
+      <Maroon
+        v-for="(item, index) in spriteArray"
+        :top="leadWireHeight - 40 - index * 16"
+        :left="10"
+        :deg="index % 2 == 0 ? 30 : -30"
+        :ref="(el) => (RefArray[index] = el)"
+        :myRef="spriteArray[index]"
+      ></Maroon>
+    </MaroonLoader>
+  </div>
+</template>
+
+<script setup>
+import Maroon from "./Maroon.vue";
+import MaroonLoader from "./MaroonLoader.vue";
+import { shallowRef, onBeforeUnmount, watch, provide } from "vue";
+import {
+  JsvSpriteAnim,
+  getKeyFramesGroup,
+  JsvSpriteLoader,
+  JsvPreload,
+  buildPreloadInfo,
+} from "jsview";
+import { _formatInfo } from "../Common/SpriteDeal";
+
+const leadWire =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/leadWire.png";
+const sparkPng =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/spark.png";
+const sparkJson =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/spark.json";
+
+//预加载
+const preload_info = [buildPreloadInfo(leadWire), buildPreloadInfo(sparkPng)];
+//定义ref
+let controllerAnim = shallowRef(null);
+//设定变量控制动画的播放
+let readyNum = shallowRef(0);
+const loadDone = (a) => {
+  readyNum.value++;
+  myShow.value = true;
+};
+let myShow = shallowRef(false);
+const props = defineProps({
+  top: { type: Number, default: 0 },
+  left: { type: Number, default: 0 },
+  num: { type: Number, default: 12 },
+  width: { type: Number, require: true },
+  leadWireTime: { type: Number, require: true },
+});
+// 组件宽度
+const widgetWidth = 80;
+let sprite_info = shallowRef(null);
+let view_size = shallowRef(null);
+//计算引线长度
+let leadWireHeight = (props.num - 1) * 16 + 20;
+//插入动画
+const idRandom = Math.floor(Math.random() * 1000000);
+let styleShell = getKeyFramesGroup();
+let name1 = "animLw1-" + idRandom;
+let name2 = "animLw2-" + idRandom;
+let animLw1 = `@keyframes ${name1} {
+        from {
+          transform: translate3d(0,${leadWireHeight}, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+styleShell.insertRule(animLw1);
+let animLw2 = `@keyframes ${name2} {
+        from {
+          transform: translate3d(0,${-leadWireHeight}, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+styleShell.insertRule(animLw2);
+
+//预加载
+const preloadCallback = (config_json, resolve_set) => {
+  sprite_info.value = _formatInfo(config_json);
+  view_size.value = {
+    w: sprite_info.value.maxW,
+    h: sprite_info.value.maxH,
+  };
+  resolve_set(); // 通知loader数组设置完成
+  readyNum.value++;
+};
+//子组件加载完毕的flag
+let sonFlag = shallowRef(false);
+provide("sonFlag", sonFlag);
+//动画名字
+let aniName1 = shallowRef(null);
+let aniName2 = shallowRef(null);
+//控制燃烧特效
+let isSpark = shallowRef(true);
+const closeSpark = () => {
+  isSpark.value = false;
+};
+//ref数组
+const spriteArray = new Array(props.num);
+let RefArray = shallowRef([]);
+for (let i = 0; i < spriteArray.length; i++) {
+  spriteArray[i] = shallowRef(null);
+}
+
+const callFireMethod = (index) => {
+  // 检查索引是否超出范围，如果超出则停止递归
+  if (index >= spriteArray.length) {
+    return;
+  }
+
+  // 获取当前索引对应的Maroon组件的ref
+  const currentMaroonRef = RefArray.value[index];
+  // 调用当前Maroon组件的fire方法
+  if (currentMaroonRef) {
+    currentMaroonRef.fire();
+  }
+  // 延迟1秒后递归调用下一个Maroon组件的fire方法
+  timer.id2 = setTimeout(() => {
+    callFireMethod(index + 1);
+  }, (props.leadWireTime * 1000) / (props.num - 1));
+};
+
+//延时器
+let timer = { id: -1, id2: -1 };
+watch(readyNum, (n, o) => {
+  if (o != 3 && n == 3) {
+    timer.id = setTimeout(() => {
+      controllerAnim.value.start();
+      callFireMethod(0);
+      aniName1.value = `${name1} ${props.leadWireTime}s linear`;
+      aniName2.value = `${name2} ${props.leadWireTime}s linear`;
+    }, 0);
+  }
+});
+
+watch(sonFlag, (n) => {
+  if (n == true) {
+    readyNum.value++;
+  }
+});
+
+onBeforeUnmount(() => {
+  styleShell.removeRule(name1);
+  styleShell.removeRule(name2);
+  clearTimeout(timer.id);
+  clearTimeout(timer.id2);
+  timer.id = -1;
+  timer.id2 = -1;
+});
+</script>
+
+<style scoped>
+.text {
+  font-size: 24;
+  color: #ffffff;
+  font-weight: bold;
+  text-align: center;
+  line-height: 32;
+}
+</style>