@shijiu/jsview-vue-samples 2.2.373 → 2.3.0

package/DemoForOperator/Banger/Banger/Banger.vue

@@ -0,0 +1,252 @@
+<!--
+ * 【模块 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 :starSrcs="starSrcs" :bangerSpriteSrc="bangerSpriteSrc">
+      <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 "./SpriteDeal";
+
+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 },
+  starSrcs: { type: Array },
+  bangerSpriteSrc: { type: String },
+  sparkSpriteSrc: { type: String },
+  leadWireSrc: { type: String },
+});
+
+const leadWire = props.leadWireSrc;
+const sparkPng = props.sparkSpriteSrc;
+const sparkJson = props.sparkSpriteSrc + ".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 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>

package/DemoForOperator/Banger/Banger/Maroon.vue

@@ -0,0 +1,123 @@
+<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 "./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((cmds) => [
+    cmds.action().setSpdAndAccel(undefined, 0, undefined, 0.15, null, null),
+    cmds
+      .condition()
+      .reachPosition(undefined, 280)
+      .then([cmds.action().stopMoving()]),
+  ]);
+};
+
+//粒子效果
+const ImgData = maroonResource.stars;
+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,
+  enableFade: true,
+  enableShrink: true,
+};
+//动画结束播放粒子效果
+const onAnimEnd = () => {
+  isShow.value = false;
+  isSpray.value = true;
+};
+onMounted(() => {
+  actorControl = actorRef.value.control;
+});
+defineExpose({ fire });
+</script>
+
+<style scoped></style>

package/DemoForOperator/Banger/Banger/MaroonLoader.vue

@@ -0,0 +1,78 @@
+<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 "./SpriteDeal";
+const props = defineProps({
+  top: Number,
+  left: Number,
+  deg: Number,
+  controller: Object,
+  myRef: Object,
+  starSrcs: {
+    type: Array,
+  },
+  bangerSpriteSrc: {
+    type: String,
+  },
+});
+
+const maroonResource = {
+  stars: props.starSrcs,
+  firecrackerPng: props.bangerSpriteSrc,
+  firecrackerJson: props.bangerSpriteSrc + ".json",
+  firecrackerSet: {
+    info: shallowRef(null),
+    viewSize: shallowRef(null),
+  },
+};
+
+//预加载
+const preload_info = [
+  ...props.starSrcs.map((i) => buildPreloadInfo(i)),
+  buildPreloadInfo(props.bangerSpriteSrc),
+];
+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/DemoForOperator/Banger/Banger/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/DemoForOperator/Bounce/App.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#F5F5DC' }"></div>
+  <jsv-focus-block autoFocus :onAction="{ onKeyDown }"></jsv-focus-block>
+  <div
+    :style="{
+      width: 1280,
+      height: 100,
+      lineHeight: 100,
+      textAlign: 'center',
+      fontSize: 40,
+      color: '#000000',
+    }"
+  >
+    按OK键触发动画
+  </div>
+  <bounce
+    ref="bounceRef"
+    :src="iLeftSnake"
+    :layout="{
+      width: 320,
+      height: 320,
+      top: 400,
+      left: 400,
+    }"
+  />
+</template>
+
+<script setup>
+import Bounce from "./Bounce.vue";
+import { shallowRef } from "vue";
+
+const bounceRef = shallowRef(null);
+let iLeftSnake =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Bounce/App/snake_left.png?md5=e0310d4ba1c74899899ca365a8b16385";
+
+function onKeyDown(ev) {
+  if (ev.keyCode == 13) {
+    bounceRef.value.start(-400, -400, 7);
+    return true;
+  }
+  return false;
+}
+</script>

package/DemoForOperator/Bounce/Bounce.vue

@@ -0,0 +1,49 @@
+<template>
+  <JsvFreeMoveActor
+    :top="layout.top"
+    :left="layout.left"
+    :width="layout.width"
+    :height="layout.height"
+    ref="actorRef"
+  >
+    <img
+      :src="src"
+      :style="{
+        width: layout.width,
+        height: layout.height,
+      }"
+    />
+  </JsvFreeMoveActor>
+</template>
+
+<script setup>
+import { JsvFreeMoveActor } from "jsview";
+import { shallowRef } from "vue";
+import { buildBounce } from "./FreeMoveBuilder";
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  layout: {
+    type: Object,
+    required: true,
+  },
+});
+
+let actorRef = shallowRef(null);
+let vLeftSnakeControl = null;
+
+function startSnakeAnim(left, top, bounceTimes) {
+  // showSnake.value = true;
+  vLeftSnakeControl = actorRef.value.control;
+  vLeftSnakeControl.run((cmds) => [
+    ...buildBounce(cmds, 1, left, top, bounceTimes, 2.0, (state) => {}),
+  ]);
+}
+
+defineExpose({
+  start: startSnakeAnim,
+});
+</script>

package/DemoForOperator/Bounce/FreeMoveBuilder.js

@@ -0,0 +1,139 @@
+const SQRT2VAL = Math.sqrt(2)
+
+
+// 获取原地起跳抛物的处理
+function getParabola(
+    cmds,
+    condGroupId, // 后续改为specName
+    xSpeed,
+    ySpeed,
+    gravity,
+    times,
+    onLandCmds
+) {
+    let actCmds;
+    if (times > 0) {
+        actCmds = getParabola(
+            cmds,
+            condGroupId,
+            xSpeed,
+            ySpeed / SQRT2VAL,
+            gravity,
+            times - 1,
+            onLandCmds
+        );
+    } else {
+        actCmds = onLandCmds;
+    }
+
+    return [
+        cmds.state().removeConditionByName(sFloorConditionName),
+        // (state: any) => {
+        //     console.log(`State on t=${Date.now()} land y=${ySpeed} setStartOffsetPos times=${times}`,
+        //         JSON.stringify(state))
+        // },
+        cmds.state().setStartPos(undefined, -1), // 离开接触点
+        cmds.action().setSpdAndAccel(xSpeed, ySpeed, 0, gravity),
+
+        // 下一帧再重启condition，避免当前帧的判断循环中仍然激活condition
+        cmds
+            .condition(condGroupId)
+            .onNextTick()
+            .then([
+                cmds
+                    .condition(condGroupId, false, sFloorConditionName)
+                    .reachPosition(undefined, 0)
+                    .then([
+                        ...actCmds,
+                    ]),
+            ]),
+    ];
+}
+
+const sFloorConditionName = "floorCond";
+const sWallConditionName = "wallCond";
+
+/* 
+    弹跳处理
+*/
+export function buildBounce(
+    cmds,// FreeMove的cmds句柄
+    condGroupId,
+    startX, // 起始位置和目标位置的偏差, 单位px
+    startY, // 起始位置和目标位置的偏差, 单位px
+    times, // 整数，落点数(弹起次数-1)
+    gravity, // y轴的加速度, 建议设置成0.8
+    onEnd,
+) {
+    let xDistance = startX - 0;
+    let yDistance = startY - 0;
+
+    if (times < 1) {
+        times = 1;
+        console.log("at least 1 times");
+    }
+
+    // 每个碰撞点之间的x的距离为
+    // sx * (1 + 1/sqrt(2) + 1/sqrt(2)^2 + ...) (=次数的数列)
+    // sx 为第一次下落过程x轴走过的距离
+    let sqrt2 = 1 / SQRT2VAL;
+    let sxSubBase = 2;
+    let sxSub = sxSubBase / 2;
+    for (let i = 0; i < times - 1; i++) {
+        sxSubBase = sxSubBase * sqrt2;
+        sxSub += sxSubBase;
+    }
+    let sx = -(xDistance / sxSub);
+
+    // 求首次下落使用的时间， 按照 s = 1/2*a*t^2的公式求解
+    let t1st = Math.sqrt(Math.abs(yDistance) * 2 / gravity);
+
+    // 求x的速度
+    let vx = sx / t1st;
+
+    // 求第一次落点的y速度
+    let vy1st = gravity * t1st;
+
+    let onLandCmds = [
+        cmds.action().teleportTo(0, 0),
+        // cmds.action().stopMoving(true),
+        cmds.state().removeConditionByGroup(condGroupId),
+        (...args) => {
+            onEnd?.(...args);
+        }
+    ];
+
+    let parabolaCmds;
+    if (times > 1) {
+        // 递归创建所有运动处理
+        parabolaCmds = getParabola(cmds, condGroupId, vx, -vy1st / SQRT2VAL, gravity, times - 2, onLandCmds);
+    } else {
+        parabolaCmds = onLandCmds;
+    }
+
+    let wallname = xDistance > 0 ? "left" : "right";
+
+    let cmdsArray = [
+        // 清理掉所有condition，除了group的外，还有wallposition
+        // 但后续specName的bug修正后，可以用specName来控制动画，只清理group即可
+        cmds.state().removeConditionByGroup(condGroupId),
+
+        // wallPosition用于规避运动路程计算超出(times越大超出越多)时，解决动画结尾的回弹问题
+        cmds.condition(condGroupId, true, sWallConditionName).wallPosition(wallname, 0, undefined).then([
+            cmds.action().teleportTo(0, undefined),
+            cmds.action().setSpdAndAccel(0, undefined, undefined, undefined),
+        ]),
+
+        // 启动从起始点的抛物下落动画
+        cmds.state().setStartPos(startX, startY),
+        cmds.action().setSpdAndAccel(vx, 0, 0, gravity),
+        cmds
+            .condition(condGroupId, false, sFloorConditionName)
+            .reachPosition(undefined, 0)
+            .then([
+                ...parabolaCmds
+            ])
+    ];
+
+    return cmdsArray;
+}