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

package/CoupletsTest/LeadWire.vue

@@ -1,221 +0,0 @@
-<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

@@ -1,112 +0,0 @@
-<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>

package/CoupletsTest/Salvo.vue

@@ -1,251 +0,0 @@
-<template>
-  <div
-    :style="{
-      top: 500,
-      left: 200,
-      transform: `scale3d(${80 / view_size.w},${160 / view_size.h},1)`,
-    }"
-  >
-    <JsvSpriteAnim
-      :spriteInfo="sprite_info.info"
-      :loop="1"
-      autostart="true"
-      :duration="1"
-      :imageUrl="fireworksPng"
-    >
-    </JsvSpriteAnim>
-  </div>
-  <!-- FreeMove -->
-  <jsv-free-move-actor
-    v-if="isShow"
-    :top="508 + 100"
-    :left="236"
-    ref="actorRef"
-    :width="10"
-    :height="10"
-  >
-    <div
-      :style="{
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        backgroundColor: '#FF1213',
-      }"
-    ></div>
-  </jsv-free-move-actor>
-  <!-- 粒子效果 -->
-  <div
-    v-if="isSpray"
-    :style="{
-      top: 188,
-      left: 220,
-      width: 50,
-      height: 50,
-    }"
-  >
-    <jsv-spray
-      v-for="item in ImgData"
-      :pointRes="`url(${item})`"
-      :sprayStyle="sprayOk"
-      :ignoreClip="true"
-    />
-  </div>
-  <div
-    v-if="isSpray2"
-    :style="{
-      top: 188,
-      left: 220,
-      width: 50,
-      height: 50,
-    }"
-  >
-    <jsv-spray
-      v-for="item in ImgData"
-      :pointRes="`url(${item})`"
-      :sprayStyle="sprayOk"
-      :ignoreClip="true"
-    />
-  </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>
-</template>
-
-<script setup>
-import {
-  JsvFreeMoveActor,
-  JsvSpriteAnim,
-  JsvSpray,
-} from "jsview";
-import fireworksPng from "./Sprite/fireworks.png";
-import fireworksJson from "./Sprite/fireworks.json";
-import { _formatInfo } from "./Common/SpriteDeal";
-import GoldenCoin1 from "./images/goldencoin1.png";
-import GoldenCoin2 from "./images/goldencoin2.png";
-import star1 from "./images/star1.png";
-import star2 from "./images/star2.png";
-import star3 from "./images/star3.png";
-import star4 from "./images/star4.png";
-import { shallowRef, onMounted, onBeforeUnmount } from "vue";
-let sprite_info = shallowRef(_formatInfo(fireworksJson));
-const view_size = {
-  w: sprite_info.value.maxW,
-  h: sprite_info.value.maxH,
-};
-let isSpray = shallowRef(false);
-let isSpray2 = shallowRef(false);
-let isShow = shallowRef(true);
-let actorRef = shallowRef(null);
-
-let actorControl;
-//定时器
-let timer = { id: -1 };
-const ImgData = [GoldenCoin1, GoldenCoin2, star1, star2, star3, star4];
-// 建议：做粒子效果的图的像素尽量不超过 40 * 40
-const sprayOk = {
-  type: 0,
-  particleNum: 60,
-  deltaAngle: 360,
-  deltaWidth: 20,
-  deltaHeight: 20,
-  pointSizeMin: 30,
-  pointSizeMax: 50,
-  speedMin: 1,
-  speedMax: 7,
-  lifeMin: 1000,
-  lifeMax: 2000,
-  accelerateX: 0,
-  accelerateY: 0,
-  addNumSpeed: 0.001,
-  enableFade: true,
-  enableShrink: true,
-};
-onMounted(() => {
-  actorControl = actorRef.value.control;
-  actorControl.run([
-    actorControl
-      .condition()
-      .onNextTick(2)
-      .then([
-        actorControl.action().setSpeed(undefined, -12),
-        actorControl.action(3).setAccel(undefined, 0.13),
-      ]),
-    actorControl
-      .condition()
-      .reachPosition(undefined, -400)
-      .then([
-        actorControl.action().stopMoving(),
-        () => {
-          isSpray.value = true;
-          isShow.value = false;
-          timer.id = setTimeout(() => {
-            isSpray2.value = true;
-          }, 400);
-        },
-      ]),
-  ]);
-});
-onBeforeUnmount(() => {
-  clearTimeout(timer.id);
-  timer.id = -1;
-});
-</script>
-
-<style scoped>
-.text {
-  font-size: 24;
-  color: #ffffff;
-  font-weight: bold;
-  text-align: center;
-  line-height: 32;
-}
-</style>