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

package/CoupletsTest/Salvo.vue

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

package/CoupletsTest/Sprite/firecracker.json

@@ -0,0 +1,212 @@
+{"frames": [
+
+{
+	"filename": "爆竹000.png",
+	"frame": {"x":0,"y":0,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹001.png",
+	"frame": {"x":188,"y":0,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹002.png",
+	"frame": {"x":376,"y":0,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹003.png",
+	"frame": {"x":564,"y":0,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹004.png",
+	"frame": {"x":752,"y":0,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹005.png",
+	"frame": {"x":940,"y":0,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹006.png",
+	"frame": {"x":1128,"y":0,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹007.png",
+	"frame": {"x":1316,"y":0,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹008.png",
+	"frame": {"x":1504,"y":0,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹009.png",
+	"frame": {"x":1692,"y":0,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹010.png",
+	"frame": {"x":1880,"y":0,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹011.png",
+	"frame": {"x":2068,"y":0,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹012.png",
+	"frame": {"x":2256,"y":0,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹013.png",
+	"frame": {"x":0,"y":400,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹014.png",
+	"frame": {"x":188,"y":400,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹015.png",
+	"frame": {"x":376,"y":400,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹016.png",
+	"frame": {"x":564,"y":400,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹017.png",
+	"frame": {"x":752,"y":400,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹018.png",
+	"frame": {"x":940,"y":400,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹019.png",
+	"frame": {"x":1128,"y":400,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹020.png",
+	"frame": {"x":1316,"y":400,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹021.png",
+	"frame": {"x":1504,"y":400,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹022.png",
+	"frame": {"x":1692,"y":400,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹023.png",
+	"frame": {"x":1880,"y":400,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+},
+{
+	"filename": "爆竹024.png",
+	"frame": {"x":2068,"y":400,"w":188,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":400},
+	"sourceSize": {"w":188,"h":400}
+}],
+"meta": {
+	"app": "https://www.codeandweb.com/texturepacker",
+	"version": "1.0",
+	"image": "爆竹1.png",
+	"format": "RGBA8888",
+	"size": {"w":2444,"h":800},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:4653c3180ae1dfd88e2cdad4a90a475f:4528ea7e82284125b8973036a69273f2:a1db6f7b64874b6c5df40cc799d39b99$"
+}
+}

package/CoupletsTest/Sprite/fireworks.json

@@ -0,0 +1,220 @@
+{"frames": [
+
+{
+	"filename": "烟花000.png",
+	"frame": {"x":0,"y":0,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花001.png",
+	"frame": {"x":167,"y":0,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花002.png",
+	"frame": {"x":334,"y":0,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花003.png",
+	"frame": {"x":501,"y":0,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花004.png",
+	"frame": {"x":668,"y":0,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花005.png",
+	"frame": {"x":835,"y":0,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花006.png",
+	"frame": {"x":1002,"y":0,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花007.png",
+	"frame": {"x":1169,"y":0,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花008.png",
+	"frame": {"x":1336,"y":0,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花009.png",
+	"frame": {"x":0,"y":335,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花010.png",
+	"frame": {"x":167,"y":335,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花011.png",
+	"frame": {"x":334,"y":335,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花012.png",
+	"frame": {"x":501,"y":335,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花013.png",
+	"frame": {"x":668,"y":335,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花014.png",
+	"frame": {"x":835,"y":335,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花015.png",
+	"frame": {"x":1002,"y":335,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花016.png",
+	"frame": {"x":1169,"y":335,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花017.png",
+	"frame": {"x":1336,"y":335,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花018.png",
+	"frame": {"x":0,"y":670,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花019.png",
+	"frame": {"x":167,"y":670,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花020.png",
+	"frame": {"x":334,"y":670,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花021.png",
+	"frame": {"x":501,"y":670,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花022.png",
+	"frame": {"x":668,"y":670,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花023.png",
+	"frame": {"x":835,"y":670,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花024.png",
+	"frame": {"x":1002,"y":670,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+},
+{
+	"filename": "烟花025.png",
+	"frame": {"x":1169,"y":670,"w":167,"h":335},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":167,"h":335},
+	"sourceSize": {"w":167,"h":335}
+}],
+"meta": {
+	"app": "https://www.codeandweb.com/texturepacker",
+	"version": "1.0",
+	"image": "烟花1.png",
+	"format": "RGBA8888",
+	"size": {"w":1503,"h":1005},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:ab4059baa1390f7f5674ee9b2d6c6e5c:37f1b138367ce6c6c2fac6c308dd40e5:056a74f1740b57b1437fc76fdd6a9c2d$"
+}
+}