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

package/SceneTransition/maskConfig/config3.js

@@ -4,98 +4,98 @@ const ArraySet3 = [
         top: 0,
         width: 232,
         height: 287,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/1.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/1.png",
     },
     {
         left: 213,
         top: 0,
         width: 588,
         height: 315,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/2.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/2.png",
     },
     {
         left: 223,
         top: 0,
         width: 582,
         height: 316,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/3.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/3.png",
     },
     {
         left: 811,
         top: 62,
         width: 469,
         height: 257,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/4.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/4.png",
     },
     {
         left: 943,
         top: 0,
         width: 337,
         height: 162,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/5.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/5.png",
     },
     {
         left: 0,
         top: 260,
         width: 272,
         height: 460,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/6.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/6.png",
     },
     {
         left: 86,
         top: 168,
         width: 728,
         height: 350,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/7.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/7.png",
     },
     {
         left: 806,
         top: 223,
         width: 474,
         height: 133,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/8.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/8.png",
     },
     {
         left: 706,
         top: 0,
         width: 295,
         height: 319,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/9.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/9.png",
     },
     {
         left: 51,
         top: 319,
         width: 765,
         height: 401,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/10.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/10.png",
     },
     {
         left: 688,
         top: 321,
         width: 304,
         height: 399,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/11.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/11.png",
     },
     {
         left: 814,
         top: 320,
         width: 345,
         height: 400,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/12.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/12.png",
     },
     {
         left: 816,
         top: 315,
         width: 464,
         height: 211,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/13.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/13.png",
     },
     {
         left: 979,
         top: 413,
         width: 301,
         height: 307,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/14.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/14.png",
     },
 ];
 

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>