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

package/CoupletsTest/widget/Banger/Maroon.vue

@@ -0,0 +1,130 @@
+<template>
+  <jsv-free-move-actor
+    :top="props.top"
+    :left="props.left"
+    :width="30"
+    :height="60"
+    ref="actorRef"
+  >
+    <div
+      :style="{
+        width: 30,
+        height: 60,
+      }"
+    >
+      <div
+        :style="{
+          width: 30,
+          height: 40,
+          transform: `rotate3d(0,0,1,${deg}deg) scale3d(${40 / view_size.w},${
+            40 / view_size.w
+          },1)`,
+          transformOrigin: 'center center',
+        }"
+      >
+        <!-- 炮仗图 -->
+        <JsvSpriteAnim
+          :spriteInfo="maroonResource.firecrackerSet.info.value"
+          :loop="1"
+          :duration="0.8"
+          :imageUrl="maroonResource.firecrackerPng"
+          :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>
+  </jsv-free-move-actor>
+</template>
+
+<script setup>
+import { shallowRef, watch, inject, onMounted } from "vue";
+import { JsvSpriteAnim, JsvSpray, JsvFreeMoveActor } from "jsview";
+import { _formatInfo } from "../Common/SpriteDeal";
+const props = defineProps({
+  top: Number,
+  left: Number,
+  deg: Number,
+  controller: Object,
+  myRef: Object,
+});
+
+let maroonResource = inject("maroonResource");
+
+let view_size = maroonResource.firecrackerSet.viewSize;
+
+//FreeMove
+let actorRef = shallowRef(null);
+let actorControl;
+
+let isShow = shallowRef(true);
+let isSpray = shallowRef(false);
+let deg = shallowRef(props.deg);
+
+//动画处理
+const fire = () => {
+  props.myRef.value.start();
+  actorControl.run([
+    actorControl
+      .action()
+      .setSpdAndAccel(undefined, 0, undefined, 0.15, null, null),
+    actorControl
+      .condition()
+      .reachPosition(undefined, 280)
+      .then([actorControl.action().stopMoving()]),
+  ]);
+};
+
+//粒子效果
+const ImgData = [
+  maroonResource.star1,
+  maroonResource.star2,
+  maroonResource.star3,
+];
+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;
+};
+onMounted(() => {
+  actorControl = actorRef.value.control;
+});
+defineExpose({ fire });
+</script>
+
+<style scoped></style>

package/CoupletsTest/widget/Banger/MaroonLoader.vue

@@ -0,0 +1,81 @@
+<template>
+  <JsvPreload
+    :preloadList="preload_info"
+    :onPreloadDone="loadDone"
+  ></JsvPreload>
+  <JsvSpriteLoader
+    :imageUrl="maroonResource.firecrackerPng"
+    :configUrl="maroonResource.firecrackerJson"
+    :onConfigReady="preloadCallback"
+    :noNeedResource="false"
+  >
+    <slot v-if="sonFlag" />
+  </JsvSpriteLoader>
+</template>
+
+<script setup>
+import { shallowRef, watch, inject, provide } from "vue";
+import { JsvPreload, buildPreloadInfo, JsvSpriteLoader } from "jsview";
+import { _formatInfo } from "../Common/SpriteDeal";
+const props = defineProps({
+  top: Number,
+  left: Number,
+  deg: Number,
+  controller: Object,
+  myRef: Object,
+});
+
+const maroonResource = {
+  star1:
+    "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/redStar.png",
+  star2:
+    "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/yellowStar.png",
+  star3:
+    "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/purpleStar.png",
+  firecrackerPng:
+    "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/firecracker.png",
+  firecrackerJson:
+    "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/firecracker.json",
+  firecrackerSet: {
+    info: shallowRef(null),
+    viewSize: shallowRef(null),
+  },
+};
+
+//预加载
+const preload_info = [
+  buildPreloadInfo(maroonResource.start1),
+  buildPreloadInfo(maroonResource.start2),
+  buildPreloadInfo(maroonResource.start3),
+  buildPreloadInfo(maroonResource.firecrackerPng),
+];
+let sonFlag = inject("sonFlag");
+
+provide("maroonResource", maroonResource);
+
+let readyNum = shallowRef(0);
+
+const loadDone = (a) => {
+  readyNum.value++;
+};
+
+const preloadCallback = (config_json, resolve_set) => {
+  let sprite_info = _formatInfo(config_json);
+  maroonResource.firecrackerSet.info.value = sprite_info.info;
+  maroonResource.firecrackerSet.viewSize.value = {
+    w: sprite_info.maxW,
+    h: sprite_info.maxH,
+  };
+  resolve_set(); // 通知loader数组设置完成
+  readyNum.value++;
+};
+
+//ref
+watch(readyNum, (n, o) => {
+  if (o != 2 && n == 2) {
+    sonFlag.value = true;
+  }
+});
+</script>
+
+<style scoped></style>

package/CoupletsTest/widget/Couplets/Couplets.vue

@@ -0,0 +1,194 @@
+<!--
+ * 【模块 export 内容】
+ * JsvCouplets：春联组件
+ *      props说明:
+ *          width         {Number}   春联宽度
+ *          animTime      {Number}   春联滚动时间
+ *          left          {Number}   春联Left位置
+ *          top           {Number}   春联Top位置 
+ * 
+-->
+<template>
+  <JsvPreload
+    :preloadList="preload_info"
+    :onPreloadDone="loadDone"
+  ></JsvPreload>
+  <div
+    v-show="myShow"
+    :style="{
+      width: 180,
+      height: adaptedHeight,
+      top: props.top,
+      left: props.left,
+      transform: `scale3d(${props.width / 180},${props.width / 180},1)`,
+      transformOrigin: 'left top',
+    }"
+  >
+    <div
+      :style="{
+        top: 0,
+        left: 0,
+        width: 180,
+        height: adaptedHeight,
+        overflow: 'hidden',
+        animation: aniName1,
+      }"
+    >
+      <div
+        :style="{
+          top: 0,
+          left: 0,
+          width: 180,
+          height: adaptedHeight,
+          backgroundImage: Couplets,
+          animation: aniName2,
+        }"
+      ></div>
+    </div>
+    <!-- 滚轴动画 -->
+    <JsvSpriteLoader
+      :imageUrl="scrollPng"
+      :configUrl="scrollJson"
+      :onConfigReady="preloadCallback"
+      :noNeedResource="false"
+    >
+      <div
+        :style="{
+          left: -30,
+          top: adaptedHeight,
+          transform: `scale3d(${(180 + 60) / view_size.w},1,1)`,
+        }"
+      >
+        <div
+          :style="{
+            width: view_size.w,
+            height: view_size.h,
+            animation: aniName1,
+          }"
+        >
+          <JsvSpriteAnim
+            :spriteInfo="sprite_info.info"
+            :loop="4"
+            :duration="props.animTime / 4"
+            :imageUrl="scrollPng"
+            ref="myRef"
+          >
+          </JsvSpriteAnim>
+        </div>
+      </div>
+    </JsvSpriteLoader>
+    <!-- 滚轴图片 -->
+    <div
+      :style="{
+        top: -30,
+        left: -30,
+        width: 180 + 60,
+        height: 30,
+        backgroundImage: scroll,
+      }"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import {
+  JsvSpriteAnim,
+  getKeyFramesGroup,
+  JsvSpriteLoader,
+  JsvPreload,
+} from "jsview";
+import { shallowRef, onBeforeUnmount, watch } from "vue";
+import { _formatInfo } from "../Common/SpriteDeal";
+import { buildPreloadInfo } from "../../../../jsview-vue/utils";
+const props = defineProps({
+  width: { type: Number, require: true },
+  height: { type: Number, require: true },
+  animTime: { type: Number, require: true },
+  left: { type: Number, default: 0 },
+  top: { type: Number, default: 0 },
+});
+let myShow = shallowRef(false);
+const Couplets =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/Couplets.png";
+const scrollPng =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/scroll.png";
+const scrollJson =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/scroll.json";
+const scroll =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/scroll1.png";
+
+//预加载
+const preload_info = [
+  buildPreloadInfo(Couplets),
+  buildPreloadInfo(scrollPng),
+  buildPreloadInfo(scroll),
+];
+//春联高度（可修改适配）
+let adaptedHeight = 500;
+
+let readyNum = shallowRef(0);
+const loadDone = (a) => {
+  readyNum.value++;
+};
+let sprite_info = shallowRef(null);
+const view_size = shallowRef(null);
+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++;
+};
+//动画名字
+let aniName1 = shallowRef(null);
+let aniName2 = shallowRef(null);
+
+//插入动画
+const idRandom = Math.floor(Math.random() * 1000000);
+let name1 = "anim1-" + idRandom;
+let name2 = "anim2-" + idRandom;
+let styleShell = getKeyFramesGroup();
+let anim1 = `@keyframes ${name1} {
+        from {
+          transform: translate3d(0,${-adaptedHeight}, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+styleShell.insertRule(anim1);
+let anim2 = `@keyframes ${name2} {
+        from {
+          transform: translate3d(0,${adaptedHeight}, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+styleShell.insertRule(anim2);
+
+let timer = { id: -1 };
+//ref
+let myRef = shallowRef(null);
+watch(readyNum, (n, o) => {
+  if (o != 2 && n == 2) {
+    timer.id = setTimeout(() => {
+      myShow.value = true;
+      myRef.value.start();
+      aniName1.value = `${name1} ${props.animTime}s linear`;
+      aniName2.value = `${name2} ${props.animTime}s linear`;
+    }, 0);
+  }
+});
+
+onBeforeUnmount(() => {
+  styleShell.removeRule(name1);
+  styleShell.removeRule(name2);
+  clearTimeout(timer.id);
+  timer.id = -1;
+});
+</script>
+
+<style scoped></style>

package/CoupletsTest/widget/Fireworks/Fireworks.vue

@@ -0,0 +1,234 @@
+<!--
+ * 【模块 export 内容】
+ * Fireworks：放烟花组件
+ *      props说明:
+ *          left          {Number}   烟花Left位置
+ *          top           {Number}   烟花Top位置 
+ * 
+-->
+<template>
+  <JsvPreload
+    :preloadList="preload_info"
+    :onPreloadDone="loadDone"
+  ></JsvPreload>
+
+  <JsvSpriteLoader
+    :imageUrl="fireworksPng"
+    :configUrl="fireworksJson"
+    :onConfigReady="preloadCallback"
+    :noNeedResource="false"
+  >
+    <div
+    v-show="myShow"
+      :style="{
+        top: props.top,
+        left: props.left,
+        transform: `scale3d(${80 / view_size.w},${160 / view_size.h},1)`,
+      }"
+    >
+      <div
+        :style="{
+          top: -170,
+          left: -45,
+        }"
+      >
+        <JsvSpriteAnim
+          :spriteInfo="sprite_info.info"
+          :loop="1"
+          :duration="1"
+          :imageUrl="fireworksPng"
+          ref="myRef"
+        >
+        </JsvSpriteAnim>
+      </div>
+    </div>
+  </JsvSpriteLoader>
+  <!-- FreeMove -->
+  <jsv-free-move-actor
+    v-if="isShow"
+    :top="props.top + 40"
+    :left="props.left + 15"
+    ref="actorRef"
+    :width="10"
+    :height="10"
+  >
+    <div
+      :style="{
+        width: 8,
+        height: 8,
+        backgroundImage: star2,
+      }"
+    ></div>
+  </jsv-free-move-actor>
+  <!-- 粒子效果 -->
+  <div
+    v-if="isSpray"
+    :style="{
+      top: props.top - 400 + 20,
+      left: props.left,
+      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: props.top - 400 + 20,
+      left: props.left,
+      width: 50,
+      height: 50,
+    }"
+  >
+    <jsv-spray
+      v-for="item in ImgData"
+      :pointRes="`url(${item})`"
+      :sprayStyle="sprayOk"
+      :ignoreClip="true"
+    />
+  </div>
+</template>
+
+<script setup>
+import {
+  JsvFreeMoveActor,
+  JsvSpriteAnim,
+  JsvSpray,
+  JsvPreload,
+  buildPreloadInfo,
+  JsvSpriteLoader,
+} from "jsview";
+import { _formatInfo } from "../Common/SpriteDeal";
+import { shallowRef, onMounted, onBeforeUnmount, watch } from "vue";
+const props = defineProps({
+  top: { type: Number, require: true },
+  left: { type: Number, require: true },
+});
+
+const star1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/star1.png";
+const star2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/star2.png";
+const star3 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/star3.png";
+const star4 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/star4.png";
+const GoldenCoin1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/goldencoin1.png";
+const GoldenCoin2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/goldencoin2.png";
+
+const fireworksPng =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/fireworks.png";
+const fireworksJson =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/fireworks.json";
+
+let sprite_info = shallowRef(null);
+let view_size = shallowRef(null);
+let isSpray = shallowRef(false);
+let isSpray2 = shallowRef(false);
+let isShow = shallowRef(true);
+let actorRef = shallowRef(null);
+let myShow=shallowRef(false)
+let actorControl;
+
+//预加载
+const preload_info = [
+  buildPreloadInfo(star1),
+  buildPreloadInfo(star2),
+  buildPreloadInfo(star3),
+  buildPreloadInfo(star4),
+  buildPreloadInfo(GoldenCoin1),
+  buildPreloadInfo(GoldenCoin2),
+  buildPreloadInfo(fireworksPng),
+];
+let readyNum = shallowRef(0);
+const loadDone = (a) => {
+  readyNum.value++;
+};
+const preloadCallback = (config_json, resolve_set) => {
+  sprite_info.value = _formatInfo(config_json);
+  console.log(sprite_info.value);
+  view_size.value = {
+    w: sprite_info.value.maxW,
+    h: sprite_info.value.maxH,
+  };
+  console.log("view_size: " + view_size.value);
+  resolve_set(); // 通知loader数组设置完成
+  readyNum.value++;
+};
+//定时器
+let timer = { id: -1, id2: -1 };
+//ref
+let myRef = shallowRef(null);
+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,
+};
+
+watch(readyNum, (n, o) => {
+  if (o != 2 && n == 2) {
+    myShow.value=true
+    timer.id2 = setTimeout(() => {
+      myRef.value.start();
+
+      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;
+              }, 500);
+            },
+          ]),
+      ]);
+    }, 0);
+  }
+});
+
+onMounted(() => {
+  actorControl = actorRef.value.control;
+});
+onBeforeUnmount(() => {
+  clearTimeout(timer.id);
+  timer.id = -1;
+  clearTimeout(timer.id2);
+  timer.id2 = -1;
+});
+</script>
+
+<style scoped></style>

package/DemoHomepage/views/Homepage.vue

@@ -141,7 +141,7 @@ onDeactivated(() => {
     <div class="address">
       {{ address }}
     </div>
-    <div class="logo">{{ 'JsView-Vue3 (Vite5) [' + (isDevelopment ? 'Debug' : 'Release') + ']' }}</div>
+    <div class="logo">{{ 'JsView-Vue3 (Vite3) [' + (isDevelopment ? 'Debug' : 'Release') + ']' }}</div>
 
     <jsv-focus-block
       autoFocus

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.1.341-test.0",
+  "version": "2.1.363-test.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",