@shijiu/jsview-vue-samples 2.2.426-test.0 → 2.3.0

package/SprayView/App.vue

@@ -18,7 +18,17 @@ import Star2 from "./assets/star2.png";
 import Star3 from "./assets/star3.png";
 import Star4 from "./assets/star4.png";
 //定义图片url列表
-const ImgData = [snow, GoldenCoin1, GoldenCoin2, RedPacket1, RedPacket2, Star1, Star2, Star3, Star4]
+const ImgData = [
+  snow,
+  GoldenCoin1,
+  GoldenCoin2,
+  RedPacket1,
+  RedPacket2,
+  Star1,
+  Star2,
+  Star3,
+  Star4,
+];
 const sprayOk = {
   type: 0,
   particleNum: 50,
@@ -39,7 +49,7 @@ const sprayOk = {
 
 const sprayRotate = {
   type: 1,
-  particleNum: 50,
+  particleNum: 100,
   deltaAngle: 0,
   deltaWidth: 0,
   deltaHeight: 50,
@@ -48,7 +58,7 @@ const sprayRotate = {
   speedMin: 5,
   speedMax: 10,
   lifeMin: 1000,
-  lifeMax: 3000,
+  lifeMax: 1500,
   accelerateX: 0,
   accelerateY: -100,
   particleAddSpeed: 0.1,
@@ -89,7 +99,7 @@ const sprayCycle = {
   lifeMax: 3000,
   accelerateX: 0,
   accelerateY: 0,
-  particleAddSpeed: 0.01,
+  particleAddSpeed: 0.1,
   enableFade: true,
   enableShrink: false,
   angularVelocityMin: 360,
@@ -122,11 +132,21 @@ const sprayFall = {
 };
 
 const okCount = ref(0);
+
+let stopped = false;
 const onKeyDown = (ev) => {
   switch (ev.keyCode) {
     case 13:
       okCount.value++;
       return true;
+    case 38:
+      if (window.JsView) {
+        // 目前先只有native支持
+        // TODO: wasm版本上线后放开此限制
+        stopped ? testRef.value.start() : testRef.value.stop();
+        stopped = !stopped;
+      }
+      return true;
   }
   return false;
 };
@@ -139,30 +159,39 @@ const s = {
   color: "#ffffff",
   fontSize: 20,
 };
+
+const testRef = ref();
 </script>
 
 <template>
   <div class="root">
-    <jsv-focus-block autoFocus :onAction="{
-      onKeyDown: onKeyDown,
-    }">
+    <jsv-focus-block
+      autoFocus
+      :onAction="{
+        onKeyDown: onKeyDown,
+      }"
+    >
       <div :style="{ top: 20, left: 400 }">
-        <div :style="{
-          width: 40,
-          height: 40,
-          animation: 'cycle 3s linear infinite',
-        }">
+        <div
+          :style="{
+            width: 40,
+            height: 40,
+            animation: 'cycle 3s linear infinite',
+          }"
+        >
           <jsv-spray :pointRes="`url(${snow})`" :sprayStyle="sprayCycle" />
         </div>
-        <div :style="{
-          top: 20,
-          width: 400,
-          height: 100,
-          lineHeight: 100,
-          textAlign: 'center',
-          fontSize: 50,
-          color: '#FFFFFF',
-        }">
+        <div
+          :style="{
+            top: 20,
+            width: 400,
+            height: 100,
+            lineHeight: 100,
+            textAlign: 'center',
+            fontSize: 50,
+            color: '#FFFFFF',
+          }"
+        >
           粒子效果
         </div>
         <div class="describe">
@@ -170,21 +199,25 @@ const s = {
         </div>
       </div>
 
-      <div :style="{
-        left: 0,
-        top: 200,
-        width: 400,
-        height: 600,
-        overflow: 'hidden',
-      }">
+      <div
+        :style="{
+          left: 0,
+          top: 200,
+          width: 400,
+          height: 600,
+          overflow: 'hidden',
+        }"
+      >
         <div :style="{ top: 150, left: 150 }">
           <div class="spray-ok">
             <div v-if="okCount > 0">
-              <jsv-spray v-for="item in ImgData" 
-              :key="okCount" 
-              :pointRes="`url(${item})`" 
-              :sprayStyle="sprayOk"
-              :ignoreClip="true" />
+              <jsv-spray
+                v-for="item in ImgData"
+                :key="okCount"
+                :pointRes="`url(${item})`"
+                :sprayStyle="sprayOk"
+                :ignoreClip="true"
+              />
             </div>
           </div>
           <div class="describe">
@@ -194,36 +227,48 @@ const s = {
           </div>
         </div>
       </div>
-      <div :style="{
-        left: 400,
-        top: 200,
-        width: 400,
-        height: 600,
-        overflow: 'hidden',
-      }">
+      <div
+        :style="{
+          left: 400,
+          top: 200,
+          width: 400,
+          height: 600,
+          overflow: 'hidden',
+        }"
+      >
         <div :style="{ top: 150, left: 195 }">
           <div class="spray-rotate">
-            <jsv-spray v-for="item in ImgData" :pointRes="`url(${item})`" :sprayStyle="sprayRotate" />
+            <jsv-spray
+              v-for="item in ImgData"
+              :pointRes="`url(${item})`"
+              :sprayStyle="sprayRotate"
+            />
           </div>
           <div class="describe">
             {{ `#粒子沿长边随机生成\n#初速度沿长边方向\n#受竖直方向的力作用` }}
           </div>
         </div>
       </div>
-      <div :style="{
-        left: 800,
-        top: 200,
-        width: 400,
-        height: 600,
-        overflow: 'hidden',
-      }">
+      <div
+        :style="{
+          left: 800,
+          top: 200,
+          width: 400,
+          height: 600,
+          overflow: 'hidden',
+        }"
+      >
         <div :style="{ top: 150, left: 150 }">
           <div class="spray-move">
-            <jsv-spray :pointRes="`url(${snow})`" :sprayStyle="sprayMove" />
+            <jsv-spray
+              ref="testRef"
+              :pointRes="`url(${snow})`"
+              :sprayStyle="sprayMove"
+            />
           </div>
           <div class="describe">
             {{
-              `#粒子在方形随机生成\n#初速度方向为竖直向上方向正负20度内随机\n#受水平方向和竖直方向的力作用`
+              `#粒子在方形随机生成\n#按上键停止/开始喷射\n#初速度方向为竖直向上方向正负20度内随机\n#受水平方向和竖直方向的力作用`
             }}
           </div>
         </div>
@@ -327,4 +372,4 @@ const s = {
   color: #ffffff;
   font-size: 20;
 }
-</style>
+</style>

package/SpringFestival/App.vue

@@ -0,0 +1,73 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-01-25 09:56:46
+ * @LastEditors: Please set LastEditors
+-->
+<script setup>
+import { DefaultKeyCodeMap, jJsvRuntimeBridge } from "jsview";
+import { useRouter } from "vue-router";
+import { SprFestivalScene } from "./SpringFestivalScene";
+import { onMounted } from "vue";
+
+const router = useRouter();
+
+const fncOnKeyDown = (ev) => {
+  if (
+    ev.keyCode == 8 ||
+    ev.keyCode == 27 ||
+    ev.keyCode == DefaultKeyCodeMap.Back
+  ) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+  switch (ev.keyCode) {
+    case DefaultKeyCodeMap.Up:
+    case DefaultKeyCodeMap.Down:
+    case DefaultKeyCodeMap.left:
+    case DefaultKeyCodeMap.Right:
+    case DefaultKeyCodeMap.Ok:
+      return true;
+  }
+};
+
+let cRunningInBox = typeof window.JsView != "undefined";
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: fncOnKeyDown,
+    }"
+  >
+    <div
+      v-if="cRunningInBox"
+      :style="{
+        width: 1920,
+        height: 1080,
+        transform: 'scale3d(0.67,0.67,1)',
+        transformOrigin: 'left top',
+      }"
+    >
+      <SprFestivalScene />
+    </div>
+    <div
+      v-else
+      id="LudlScale"
+      :style="{
+        top: 210,
+        left: 490,
+        width: 300,
+        height: 300,
+        fontSize: 25,
+        lineHeight: 300,
+      }"
+    >
+      {{ "PC不支持此组件显示" }}
+    </div>
+  </jsv-focus-block>
+</template>

package/SpringFestival/SpringFestivalScene/ChunLian.vue

@@ -0,0 +1,211 @@
+<script>
+import { getKeyFramesGroup } from "jsview";
+
+const animNamePrefix = "__2025__chunjie__";
+const moveDownAnimName = animNamePrefix + "move_down";
+const clipResizeAnimName = animNamePrefix + "clip_resize";
+
+const styleShell = getKeyFramesGroup();
+
+const scrollTopOffset = 51;
+function buildMove(totalTime, frameList) {
+  let moveFrameDefines = [];
+  let heightFrameDefines = [];
+  for (let i = 0; i < frameList.length; i++) {
+    let frameItem = frameList[i];
+    let percent = Math.floor((frameItem.timeStamp / totalTime) * 10000) / 100;
+    moveFrameDefines.push(
+      `${percent}%{top:${frameItem.height + scrollTopOffset}}`
+    );
+    heightFrameDefines.push(`${percent}%{height:${frameItem.height}}`);
+  }
+  let moveAnimStr = `@keyframes ${moveDownAnimName} {`;
+  for (let i = 0; i < moveFrameDefines.length; i++) {
+    moveAnimStr += moveFrameDefines[i];
+  }
+  moveAnimStr += `}`;
+  console.log("move anim: " + moveAnimStr);
+
+  let resizeAnimStr = `@keyframes ${clipResizeAnimName} {`;
+  for (let i = 0; i < heightFrameDefines.length; i++) {
+    resizeAnimStr += heightFrameDefines[i];
+  }
+  resizeAnimStr += `}`;
+  console.log("resize anim: " + resizeAnimStr);
+
+  return [moveAnimStr, resizeAnimStr];
+}
+const totalHeight = 874;
+const keyframeList = [
+  { height: 0, timeStamp: 0 },
+  { height: totalHeight, timeStamp: 1300 },
+  { height: Math.round(totalHeight * 0.95), timeStamp: 1450 },
+  { height: totalHeight, timeStamp: 1600 },
+  { height: Math.round(totalHeight * 0.98), timeStamp: 1800 },
+  { height: totalHeight, timeStamp: 2000 },
+];
+
+let inited = false;
+function initChunLianAnim() {
+  if (!inited) {
+    const [moveAnimStr, resizeAnimStr] = buildMove(2000, keyframeList);
+    styleShell.insertRule(moveAnimStr);
+    styleShell.insertRule(resizeAnimStr);
+    inited = true;
+  }
+}
+
+function releaseChunLianAnim() {
+  styleShell.removeRule(moveDownAnimName);
+  styleShell.removeRule(clipResizeAnimName);
+  inited = false;
+}
+export { initChunLianAnim, releaseChunLianAnim };
+</script>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+const props = defineProps({
+  isLeft: {
+    type: Boolean,
+    default: false,
+  },
+  left: {
+    type: Number,
+    default: 0,
+  },
+  top: {
+    type: Number,
+    default: 0,
+  },
+  contentImage: {
+    type: String,
+    required: true,
+  },
+  scrollImage: {
+    type: Array,
+    required: true,
+  },
+  duration: {
+    type: Number,
+    default: 2000,
+  },
+  autoStart: {
+    type: Boolean,
+    default: true,
+  },
+  onAnimEnd: {
+    type: Function,
+  },
+});
+
+const flipScrollTransform = props.isLeft ? "scale3d(-1,1,1)" : null;
+const moveDownAnim = ref(null);
+const clipResizeAnim = ref(null);
+const clipHeight = ref(0);
+const scrollTop = ref(53);
+function onMoveDownAnimDone() {
+  scrollTop.value = 52 + 873;
+}
+
+function onClipResizeAnimDone() {
+  clipHeight.value = 874;
+  props.onAnimEnd?.();
+}
+
+const start = () => {
+  moveDownAnim.value = `${moveDownAnimName} ${props.duration / 1000}s`;
+  clipResizeAnim.value = `${clipResizeAnimName} ${props.duration / 1000}s`;
+};
+
+onMounted(() => {
+  if (props.autoStart) {
+    start();
+  }
+});
+
+defineExpose({
+  start,
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      left: props.left,
+      top: props.top,
+    }"
+  >
+    <div
+      id="clipview"
+      :style="{
+        width: 209,
+        height: clipHeight,
+        top: 53,
+        left: (265 - 209) / 2,
+        overflow: 'hidden',
+        animation: clipResizeAnim,
+      }"
+      @animationend="onClipResizeAnimDone"
+    >
+      <div
+        class="chun_lian_size"
+        :style="{
+          backgroundImage: props.contentImage,
+        }"
+      ></div>
+    </div>
+
+    <div
+      class="juan_zhou_size"
+      :style="{
+        transform: flipScrollTransform,
+        transformOrigin: 'center top',
+      }"
+    >
+      <div
+        class="juan_zhou_size"
+        :style="{
+          backgroundImage: `url(${props.scrollImage[0]})`,
+        }"
+      ></div>
+      <div
+        class="juan_zhou_size"
+        :style="{
+          top: scrollTop,
+          backgroundImage: `url(${props.scrollImage[1]})`,
+          animation: moveDownAnim,
+        }"
+        @animationend="onMoveDownAnimDone"
+      ></div>
+    </div>
+  </div>
+</template>
+<style>
+.chun_lian_size {
+  width: 209;
+  height: 874;
+}
+.juan_zhou_size {
+  width: 265;
+  height: 55;
+}
+@keyframes chun_lian_anim {
+  from {
+    height: 0;
+  }
+  to {
+    height: 874;
+  }
+}
+
+@keyframes juan_zhou_anim {
+  from {
+    top: 51;
+  }
+  to {
+    top: 925;
+  }
+}
+</style>

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;
+}