@shijiu/jsview-vue-samples 2.2.373 → 2.3.0

package/SpringFestival/SpringFestivalScene/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;
+}

package/SpringFestival/SpringFestivalScene/LanternAnim.js

@@ -0,0 +1,60 @@
+import { getKeyFramesGroup } from "jsview";
+
+export const LANTERN_LEFT_ANIM = "FestivalScene_left_shake"
+export const LANTERN_RIGHT_ANIM = "FestivalScene_right_shake"
+
+const cStyleShell = getKeyFramesGroup();
+
+/* 传值样例:
+    buildZRotate("Claw_moveLeftShake", 2000, "center top", [
+        { deg: 0, timeStamp: 0 },
+        { deg: 14, timeStamp: 300 },
+        { deg: 15, timeStamp: 1600 },
+        { deg: -7, timeStamp: 1800 },
+        { deg: 3, timeStamp: 1900 },
+        { deg: 0, timeStamp: 2000 },
+    ])
+    总时长2000为2s, center top:前为横向，后为纵向
+*/
+function buildZRotate(name, totalTime, origin, frameList) {
+  let frameDefines = [];
+  for (let i = 0; i < frameList.length; i++) {
+    let frameItem = frameList[i];
+    frameDefines.push(
+      `${Math.floor((frameItem.timeStamp / totalTime) * 10000) / 100
+      }%{transform:rotate3d(0,0,1,${frameItem.deg
+      }deg);transform-origin:${origin}}`
+    );
+  }
+  let finalStr = `@keyframes ${name} {`;
+  for (let i = 0; i < frameDefines.length; i++) {
+    finalStr += frameDefines[i];
+  }
+  console.log("buildShake=" + finalStr);
+  return finalStr;
+}
+
+export function initLanternAnim() {
+  cStyleShell.insertRule(
+    buildZRotate(LANTERN_LEFT_ANIM, 3400, "center top", [
+      { deg: 0, timeStamp: 0 },
+      { deg: 12, timeStamp: 1200 },
+      { deg: -5, timeStamp: 2900 },
+      { deg: 0, timeStamp: 3400 },
+    ])
+  );
+
+  cStyleShell.insertRule(
+    buildZRotate(LANTERN_RIGHT_ANIM, 3400, "center top", [
+      { deg: 0, timeStamp: 0 },
+      { deg: -12, timeStamp: 1200 },
+      { deg: 5, timeStamp: 2900 },
+      { deg: 0, timeStamp: 3400 },
+    ])
+  );
+}
+
+export function releaseLanternAnim() {
+  cStyleShell.removeRule(LANTERN_LEFT_ANIM);
+  cStyleShell.removeRule(LANTERN_RIGHT_ANIM);
+}

package/SpringFestival/SpringFestivalScene/Rain.vue

@@ -0,0 +1,137 @@
+<script setup>
+import { JsvSpray } from "jsview";
+import { ref, onBeforeUnmount, onMounted } from "vue";
+
+const props = defineProps({
+  urlList: {
+    type: Array,
+    required: true,
+  },
+  autoStart: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+//获取一个随机顺序
+function getRandomOrder(numbers) {
+  let currentIndex = numbers.length,
+    temporaryValue,
+    randomIndex;
+  // 从数组的最后一个元素开始，向前遍历
+  while (currentIndex !== 0) {
+    // 选取一个随机索引
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex -= 1;
+
+    // 交换当前索引和随机索引处的元素
+    temporaryValue = numbers[currentIndex];
+    numbers[currentIndex] = numbers[randomIndex];
+    numbers[randomIndex] = temporaryValue;
+  }
+
+  return numbers;
+}
+
+//目前版本的粒子生成有问题, 会在一开始就集中出现, 所以要随机拉开几个JsvSpray的位置
+const positionRange = [-50, -100];
+const step = (positionRange[1] - positionRange[0]) / props.urlList.length;
+const urls = getRandomOrder(props.urlList);
+const sprayInfos = [];
+for (let i = 0; i < urls.length; ++i) {
+  sprayInfos.push({
+    url: urls[i],
+    pos: positionRange[0] + step * i,
+    config: {
+      type: 1,
+      particleNum: 2,
+      deltaAngle: 0,
+      deltaWidth: 100,
+      deltaHeight: 1,
+      pointSizeMin: 90,
+      pointSizeMax: 120,
+      speedMin: -5,
+      speedMax: -10,
+      lifeMin: 3500 + i * 200,
+      lifeMax: 4000 + i * 200,
+      accelerateX: 0,
+      accelerateY: 0,
+      addNumSpeed: 0.0001,
+      angularVelocityMin: 10,
+      angularVelocityMax: 15,
+      enableFade: false,
+      enableShrink: false,
+    },
+  });
+}
+
+//粒子数量少的时候, 添加有bug, 为了规避此处分成三拨开始
+let showSceond = ref(false);
+let showThird = ref(false);
+
+let list1 = sprayInfos.slice(0, 1);
+let list2 = sprayInfos.slice(1, 3);
+let list3 = sprayInfos.slice(3);
+
+let show = ref(false);
+let timeoutHandler = -1;
+function start() {
+  show.value = true;
+  timeoutHandler = setTimeout(() => {
+    showSceond.value = true;
+    timeoutHandler = setTimeout(() => {
+      showThird.value = true;
+    }, 700);
+  }, 700);
+}
+
+onMounted(() => {
+  if (props.autoStart) {
+    start();
+  }
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(timeoutHandler);
+});
+
+defineExpose({
+  start,
+});
+</script>
+
+<template>
+  <div v-if="show">
+    <div
+      v-for="(item, index) in list1"
+      :key="`item_${index}`"
+      :style="{
+        top: item.pos,
+      }"
+    >
+      <jsv-spray :pointRes="`url(${item.url})`" :sprayStyle="item.config" />
+    </div>
+    <div v-if="showSceond">
+      <div
+        v-for="(item, index) in list2"
+        :key="`item_${index}`"
+        :style="{
+          top: item.pos,
+        }"
+      >
+        <jsv-spray :pointRes="`url(${item.url})`" :sprayStyle="item.config" />
+      </div>
+    </div>
+    <div v-if="showThird">
+      <div
+        v-for="(item, index) in list3"
+        :key="`item_${index}`"
+        :style="{
+          top: item.pos,
+        }"
+      >
+        <jsv-spray :pointRes="`url(${item.url})`" :sprayStyle="item.config" />
+      </div>
+    </div>
+  </div>
+</template>

package/SpringFestival/SpringFestivalScene/Scene.vue

@@ -0,0 +1,218 @@
+<script setup>
+import { sourceMap } from "./imageConfig";
+
+import ChunLian, {
+  initChunLianAnim,
+  releaseChunLianAnim,
+} from "./ChunLian.vue";
+import Rain from "./Rain.vue";
+import {
+  LANTERN_LEFT_ANIM,
+  LANTERN_RIGHT_ANIM,
+  initLanternAnim,
+  releaseLanternAnim,
+} from "./LanternAnim";
+import { buildBounce } from "./FreeMoveBuilder";
+
+import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";
+
+import { JsvPreload, buildPreloadInfo, JsvFreeMoveActor } from "jsview";
+
+const sprayImageList = [
+  sourceMap.particleCoin1,
+  sourceMap.particleCoin2,
+  sourceMap.particleCoin3,
+  sourceMap.particleRedBag1,
+  sourceMap.particleRedBag2,
+];
+
+const scrollImage = [sourceMap.scrollTop, sourceMap.scrollBottom];
+
+const chunLianLeftRef = shallowRef();
+const chunLianRightRef = shallowRef();
+const rain1 = shallowRef();
+const rain2 = shallowRef();
+
+//初始化动画
+initChunLianAnim();
+initLanternAnim();
+
+function chunLianOnAnimEnd() {
+  startSnakeAnim();
+}
+
+//preload 逻辑
+const keyPreloadInfo = [
+  buildPreloadInfo(sourceMap.background),
+  buildPreloadInfo(sourceMap.scrollTop),
+  buildPreloadInfo(sourceMap.scrollBottom),
+  buildPreloadInfo(sourceMap.textLeft),
+  buildPreloadInfo(sourceMap.textRight),
+];
+let keyResourceLoaded = ref(false);
+function onKeyPreloadDone() {
+  keyResourceLoaded.value = true;
+}
+
+const rainPreloadInfo = [];
+sprayImageList.forEach((item) => {
+  rainPreloadInfo.push(buildPreloadInfo(item));
+});
+let rainLoaded = ref(false);
+function onRainPreloadDone() {
+  rainLoaded.value = true;
+}
+
+const showSnake = ref(false);
+let rLeftSnakeRef = shallowRef(null);
+let rRightSnakeRef = shallowRef(null);
+let vLeftSnakeControl = null;
+let vRightSnakeControl = null;
+function startSnakeAnim() {
+  showSnake.value = true;
+  vLeftSnakeControl = rLeftSnakeRef.value.control;
+  vLeftSnakeControl.run((cmds) => [
+    ...buildBounce(cmds, 1, -400, -400, 7, 2.0, (state) => {}),
+  ]);
+  vRightSnakeControl = rRightSnakeRef.value.control;
+  vRightSnakeControl.run((cmds) => [
+    ...buildBounce(cmds, 1, 400, -400, 7, 2.0, (state) => {}),
+  ]);
+}
+onMounted(() => {});
+
+onBeforeUnmount(() => {
+  releaseChunLianAnim();
+  releaseLanternAnim();
+});
+</script>
+<template>
+  <jsv-preload
+    :preloadList="keyPreloadInfo"
+    :onPreloadDone="onKeyPreloadDone"
+  ></jsv-preload>
+  <jsv-preload
+    v-if="keyResourceLoaded"
+    :preloadList="rainPreloadInfo"
+    :onPreloadDone="onRainPreloadDone"
+  ></jsv-preload>
+
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundImage: `url(${sourceMap.background})`,
+    }"
+  ></div>
+
+  <div v-if="rainLoaded">
+    <rain ref="rain1" :url-list="sprayImageList" />
+    <div
+      :style="{
+        left: 1740,
+      }"
+    >
+      <rain ref="rain2" :url-list="sprayImageList" />
+    </div>
+  </div>
+
+  <div v-if="keyResourceLoaded">
+    <div
+      :style="{
+        left: 180,
+        top: 50,
+      }"
+    >
+      <chun-lian
+        ref="chunLianLeftRef"
+        :is-left="true"
+        :content-image="`url(${sourceMap.textLeft})`"
+        :scroll-image="scrollImage"
+        :onAnimEnd="chunLianOnAnimEnd"
+      />
+      <img
+        :style="{
+          left: 150,
+          top: -30,
+        }"
+        :src="`url(${sourceMap.iconRedBag})`"
+      />
+    </div>
+    <div
+      :style="{
+        left: 1475,
+        top: 50,
+      }"
+    >
+      <chun-lian
+        ref="chunLianRightRef"
+        :is-left="false"
+        :content-image="`url(${sourceMap.textRight})`"
+        :scroll-image="scrollImage"
+      />
+      <img
+        :style="{
+          left: 25,
+          top: -10,
+        }"
+        :src="`url(${sourceMap.iconYuanBao})`"
+      />
+    </div>
+  </div>
+
+  <div v-if="keyResourceLoaded">
+    <img
+      :src="sourceMap.lanternLeft"
+      :style="{
+        top: 0,
+        left: 0,
+        width: 320,
+        height: 320,
+        animation: `${LANTERN_LEFT_ANIM} 12s infinite`,
+      }"
+    />
+    <img
+      :src="sourceMap.lanternRight"
+      :style="{
+        top: 0,
+        left: 1650,
+        width: 320,
+        height: 320,
+        animation: `${LANTERN_RIGHT_ANIM} 12s infinite`,
+      }"
+    />
+  </div>
+
+  <div v-show="showSnake">
+    <JsvFreeMoveActor
+      :top="690"
+      :left="145"
+      :width="320"
+      :height="320"
+      ref="rLeftSnakeRef"
+    >
+      <img
+        :src="sourceMap.snakeLeft"
+        :style="{
+          width: 320,
+          height: 320,
+        }"
+      />
+    </JsvFreeMoveActor>
+    <JsvFreeMoveActor
+      :top="690"
+      :left="1447"
+      :width="320"
+      :height="320"
+      ref="rRightSnakeRef"
+    >
+      <img
+        :src="sourceMap.snakeRight"
+        :style="{
+          width: 320,
+          height: 320,
+        }"
+      />
+    </JsvFreeMoveActor>
+  </div>
+</template>

package/SpringFestival/SpringFestivalScene/imageConfig.js

@@ -0,0 +1,87 @@
+// import background from "./assets/background.png";
+// import hongBao from "./assets/hong_bao.png";
+// import yuanBao from "./assets/yuan_bao.png";
+
+// import coin1 from "./assets/coin1.png";
+// import coin2 from "./assets/coin2.png";
+// import coin3 from "./assets/coin3.png";
+// import redBag1 from "./assets/redBag1.png";
+// import redBag2 from "./assets/redBag2.png";
+
+// import juanZhou1 from "./assets/juan_zhou_1.png";
+// import juanZhou2 from "./assets/juan_zhou_2.png";
+// import chunLianLeft from "./assets/chun_lian_left.png";
+// import chunLianRight from "./assets/chun_lian_right.png";
+
+// import iLeftLantern from "./assets/left_lantern.png";
+// import iRightLantern from "./assets/right_lantern.png";
+
+// import iLeftSnake from "./assets/snake_left.png";
+// import iRightSnake from "./assets/snake_right.png";
+
+//建议1920x1080
+let background = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/background.png?md5=68b77fa35ed6d287c724d875bc00b545";
+
+// 左右栏目的下落内容
+//建议50x50
+let coin1 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/coin1.png?md5=14450466887cdf486a17e133501a70b3";
+let coin2 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/coin2.png?md5=df6b542c577e07a574fe64a1761755a2";
+let coin3 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/coin3.png?md5=4da163a113e51295f223e66e6f14d7a0";
+let redBag1 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/redBag1.png?md5=6a9be61b6919dd4f1a791a67b24c9b9a";
+let redBag2 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/redBag2.png?md5=38d4750b2dbbe6d1a5de173bd6481229";
+
+//建议265x55
+let juanZhou1 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/juan_zhou_1.png?md5=5129c12099fb3703972cfe5a35057385";
+let juanZhou2 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/juan_zhou_2.png?md5=4db0cd5ceadbfcbacfdf1a214a5e8a1e";
+
+//建议209x874
+let chunLianLeft = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/chun_lian_left.png?md5=10cf29941d3c66355f3e28133a641921";
+let chunLianRight = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/chun_lian_right.png?md5=b2e5f07c271d0dd3e6c57fa713dc814a";
+
+// 建议320x320
+let iLeftLantern = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/left_lantern.png?md5=10990059f7a98bfac1945407cf323c7d";
+let iRightLantern = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/right_lantern.png?md5=616378f545f0e1c93e3e0c226a4976a1";
+
+// 建议320x320
+let iLeftSnake = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/snake_left.png?md5=e0310d4ba1c74899899ca365a8b16385";
+let iRightSnake = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/snake_right.png?md5=70ca45f762bbc29b912abd010f02fb0c";
+
+// 春联顶栏的装饰
+//88x106
+let hongBao = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/hong_bao.png?md5=03a9ccf8f47af7d907b55be333a614f8";
+//99x71
+let yuanBao = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/yuan_bao.png?md5=33e38f8003113db016292345e4dbfcbe";
+
+//注意, 图片的尺寸要按注释的大小给
+export const sourceMap = {
+  //1920x1080
+  background: background,
+
+  //100x100
+  particleCoin1: coin1,
+  particleCoin2: coin2,
+  particleCoin3: coin3,
+  particleRedBag1: redBag1,
+  particleRedBag2: redBag2,
+
+  //265x55
+  scrollTop: juanZhou1,
+  scrollBottom: juanZhou2,
+
+  //209x874
+  textLeft: chunLianLeft,
+  textRight: chunLianRight,
+
+  //320x320
+  snakeLeft: iLeftSnake,
+  snakeRight: iRightSnake,
+
+  //320x320
+  lanternLeft: iLeftLantern,
+  lanternRight: iRightLantern,
+
+  //88x106
+  iconRedBag: hongBao,
+  //99x71
+  iconYuanBao: yuanBao
+}

package/SpringFestival/SpringFestivalScene/index.js

@@ -0,0 +1 @@
+export { default as SprFestivalScene } from "./Scene.vue"