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

package/CoupletsTest/App.vue

@@ -0,0 +1,212 @@
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
+    <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>
+        <!-- 素材1 滚轴图片 -->
+        <div
+          :style="{
+            top: 100,
+            left: 800,
+            width: 210,
+            height: 30,
+            backgroundImage: scroll,
+          }"
+        ></div>
+        <!-- 素材2 精灵图 -->
+        <div
+          :style="{
+            top: 260,
+            left: 800,
+            width: 210,
+            height: 120,
+            backgroundImage: scrollPng,
+          }"
+        ></div>
+        <!-- 素材3 春联图 -->
+        <div
+          :style="{
+            top: 500,
+            left: 880,
+            width: 50,
+            height: 200,
+            backgroundImage: Couplets,
+          }"
+        ></div>
+        <!-- 提示 -->
+        <div
+          class="text"
+          :style="{ top: 40, left: 200, width: 150, height: 100 }"
+        >
+          {{ "春联效果" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 40, left: 800, width: 210, height: 100 }"
+        >
+          {{ "素材1" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 200, left: 800, width: 210, height: 100 }"
+        >
+          {{ "素材2" }}
+        </div>
+        <div
+          class="text"
+          :style="{ top: 440, left: 800, width: 210, height: 100 }"
+        >
+          {{ "素材3" }}
+        </div>
+      </div>
+      <!-- 鞭炮引线 第二页 -->
+      <div v-else-if="myIndex == 3">
+        <LeadWire :top="-580" :left="200"></LeadWire>
+        <div
+          class="text"
+          :style="{ top: 680, left: 980, width: 300, height: 60 }"
+        ></div>
+      </div>
+      <div v-else>
+        <Salvo></Salvo>
+      </div>
+      <!-- 翻页提示 -->
+      <div
+        class="text"
+        :style="{ top: 680, left: 980, width: 300, height: 60 }"
+      >
+        {{ `当前 ${myIndex}/3 页` }}
+      </div>
+    </div>
+  </jsv-focus-block>
+</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,
+};
+
+//页码
+let myIndex = shallowRef(1);
+
+//按键事件
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37:
+      myIndex.value--;
+      if (myIndex.value <= 1) {
+        myIndex.value = 1;
+      }
+      break;
+    case 39:
+      myIndex.value++;
+      if (myIndex.value >= 3) {
+        myIndex.value = 3;
+      }
+      break;
+    default:
+      break;
+  }
+};
+</script>
+
+<style scoped>
+.bgStyle {
+  width: 1280;
+  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;
+  font-weight: bold;
+  text-align: center;
+  line-height: 32;
+}
+</style>

package/CoupletsTest/Common/SpriteDeal.js

@@ -0,0 +1,30 @@
+//精灵图信息函数
+const _formatInfo = (action_json) => {
+    const info = {
+      frames: [],
+      meta: {
+        size: action_json.meta.size,
+      },
+    };
+    let frames_ref = info.frames;
+    let max_width = 0;
+    let max_height = 0;
+  
+    for (let i = 0; i < action_json.frames.length; i++) {
+      const target = action_json.frames[i].spriteSourceSize;
+      frames_ref.push({
+        target,
+        source: action_json.frames[i].frame,
+      });
+      const sprite_with = target.x + target.w;
+      const sprite_height = target.y + target.h;
+      if (sprite_with > max_width) {
+        max_width = sprite_with;
+      }
+      if (sprite_height > max_height) {
+        max_height = sprite_height;
+      }
+    }
+    return { info, maxW: max_width, maxH: max_height };
+  };
+  export { _formatInfo }

package/CoupletsTest/LeadWire.vue

@@ -0,0 +1,221 @@
+<template>
+  <div
+    :style="{
+      top: props.top,
+      left: props.left,
+      width: 300,
+      height: 600,
+      overflow: 'hidden',
+      animation: 'recovery-clip 5s linear',
+    }"
+  >
+    <div
+      :style="{
+        top: 600,
+        left: 0,
+        width: 80,
+        height: 600,
+        backgroundImage: leadWire,
+        animation: 'recovery-img 5s linear',
+      }"
+    ></div>
+  </div>
+  <!-- 燃烧特效 -->
+  <div
+    v-if="isSpark"
+    :style="{
+      top: props.top + 590,
+      left: props.left + 31,
+      animation: 'recovery-clip 5s linear',
+    }"
+    @animationend="closeSpark"
+  >
+  <div :style="{
+      transform: `scale3d(${20 / view_size.w},${20 / view_size.h},1)`,}">
+     <JsvSpriteAnim
+      :spriteInfo="sprite_info.info"
+      :loop="'infinite'"
+      autostart="true"
+      :duration="0.1"
+      :imageUrl="sparkPng"
+    >
+    </JsvSpriteAnim>
+  </div>
+   
+  </div>
+  <Maroon
+    v-for="(item, index) in spriteArray"
+    :top="index == spriteArray.length - 1 ? -10 : props.top + 1100 - index * 50"
+    :left="props.left + 10"
+    :deg="index % 2 == 0 ? 30 : -30"
+    :ref="(el) => (RefArray[index] = el)"
+    :myRef="spriteArray[index]"
+  ></Maroon>
+  <!-- 素材展示 -->
+  <!-- 素材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>
+</template>
+
+<script setup>
+import Maroon from "./Maroon.vue";
+import { shallowRef, onMounted } from "vue";
+import leadWire from "./images/leadWire.png";
+import { JsvSpriteAnim } from "jsview";
+import { _formatInfo } from "./Common/SpriteDeal";
+import sparkPng from "./Sprite/spark.png";
+import sparkJson from "./Sprite/spark.json";
+import firecrackerPng from "./Sprite/firecracker.png";
+import redStar from "./images/redStar.png";
+import yellowStar from "./images/yellowStar.png";
+import purpleStar from "./images/purpleStar.png";
+const props = defineProps({
+  top: Number,
+  left: Number,
+});
+let sprite_info = shallowRef(_formatInfo(sparkJson));
+const view_size = {
+  w: sprite_info.value.maxW,
+  h: sprite_info.value.maxH,
+};
+//控制燃烧特效
+let isSpark = shallowRef(true);
+const closeSpark = () => {
+  isSpark.value = false;
+};
+//ref数组
+const spriteArray = new Array(12);
+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方法
+  setTimeout(() => {
+    callFireMethod(index + 1);
+  }, 400);
+};
+
+onMounted(() => {
+  setTimeout(() => {
+    // 调用递归函数，传入初始索引0
+    callFireMethod(0);
+  }, 500);
+});
+</script>
+
+<style scoped>
+@keyframes recovery-clip {
+  0% {
+    transform: translate3d(0, 600, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes recovery-img {
+  0% {
+    transform: translate3d(0, -600, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+.text {
+  font-size: 24;
+  color: #ffffff;
+  font-weight: bold;
+  text-align: center;
+  line-height: 32;
+}
+</style>

package/CoupletsTest/Maroon.vue

@@ -0,0 +1,112 @@
+<template>
+  <div
+    :style="{
+      top: myTop,
+      left: props.left,
+      width: 30,
+      height: 60,
+      transition: 'top 1.5s',
+    }"
+    @transitionend="myTransitionEnd"
+  >
+    <div
+      :style="{
+        width: 30,
+        height: 60,
+        transform: `rotate3d(0,0,1,${deg}deg) scale3d(${40 / view_size.w},${
+          40 / view_size.w
+        },1)`,
+        transformOrigin:'center center',
+      }"
+    >
+      <!-- 炮仗图 -->
+      <JsvSpriteAnim
+        :spriteInfo="sprite_info.info"
+        :loop="1"
+        :duration="0.8"
+        :imageUrl="firecrackerPng"
+        :controller="props.controller"
+        :onAnimEnd="onAnimEnd"
+        :ref="props.myRef"
+      >
+      </JsvSpriteAnim>
+          <!-- 喷射粒子 -->
+      <div
+        v-if="isSpray"
+        :style="{
+          top: view_size.h/2,
+          left: view_size.w/2,
+          width:view_size.w,
+          height:view_size.h,
+        }"
+      >
+        <jsv-spray
+          v-for="item in ImgData"
+          :pointRes="`url(${item})`"
+          :sprayStyle="sprayOk"
+          :ignoreClip="true"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { shallowRef } from "vue";
+import { JsvSpriteAnim, JsvSpray } from "jsview";
+import firecrackerJson from "./Sprite/firecracker.json";
+import firecrackerPng from "./Sprite/firecracker.png";
+import { _formatInfo } from "./Common/SpriteDeal";
+import redStar from "./images/redStar.png";
+import yellowStar from "./images/yellowStar.png";
+import purpleStar from "./images/purpleStar.png";
+const props = defineProps({
+  top: Number,
+  left: Number,
+  deg: Number,
+  controller: Object,
+  myRef: Object,
+});
+let myTop = shallowRef(props.top);
+let sprite_info = shallowRef(_formatInfo(firecrackerJson));
+const view_size = {
+  w: sprite_info.value.maxW,
+  h: sprite_info.value.maxH,
+};
+let isShow = shallowRef(true);
+let isSpray = shallowRef(false);
+let deg = shallowRef(props.deg);
+//动画处理
+const fire = () => {
+  myTop.value += 300;
+  props.myRef.value.start();
+};
+//粒子效果
+const ImgData = [redStar, yellowStar, purpleStar];
+const sprayOk = {
+  type: 0,
+  particleNum: 100,
+  deltaAngle: 360,
+  deltaWidth: 20,
+  deltaHeight: 20,
+  pointSizeMin: 20,
+  pointSizeMax: 30,
+  speedMin: 1,
+  speedMax: 7,
+  lifeMin: 1000,
+  lifeMax: 2000,
+  accelerateX: 0,
+  accelerateY: 0,
+  addNumSpeed: 0.001,
+  enableFade: true,
+  enableShrink: true,
+};
+//动画结束播放粒子效果
+const onAnimEnd = () => {
+  isShow.value = false;
+  isSpray.value = true;
+};
+defineExpose({ fire });
+</script>
+
+<style scoped></style>