@shijiu/jsview-vue-samples 2.1.428 → 2.1.448-test.0

package/SceneTransition/JsvSceneTransition.vue

@@ -5,17 +5,17 @@
  *          imageUrl     {String}    (必填) 显示图片的加载地址
  *          displayWidth {Number}    (必填) 想要展示的宽度
  *          ArraySet     {Array}     (必填) 模板配置项，包括：每个模块的width,height,left,top,url
- *          style        {Object}    (必填) 横纵模板总长度和总宽度。(width,height)
+ *          style        {Object}    (必填) 模板配置总长度和总宽度。(width,height)
  *          onOff       {Boolean}   (必填) 组件挂载好后是否立即动画的开关，后续可通过改值为true开启。
 -->
 
 <template>
   <div
     :style="{
-      width: 1280,
-      height: 720,
-      transform: `scale3d(${props.displayWidth / 1280},${
-        props.displayWidth / 1280
+      width: props.style.width,
+      height: props.style.height,
+      transform: `scale3d(${props.displayWidth / props.style.width},${
+        props.displayWidth / props.style.width
       },1)`,
       transformOrigin: 'left top',
     }"
@@ -48,7 +48,7 @@
 
 <script setup>
 import { JsvMaskClipDiv, JsvFreeMoveActor } from "jsview";
-import { onMounted, onBeforeUnmount, watch, shallowRef } from "vue";
+import { onMounted, watch } from "vue";
 
 const props = defineProps({
   imageUrl: { type: String, require: true },
@@ -57,12 +57,27 @@ const props = defineProps({
   style: { type: Object, require: true },
   onOff: { type: Boolean, require: true },
 });
-
-//12个FreeMove引用
+//FreeMove引用
 const refArray = [];
 const controlArray = new Array(props.ArraySet.length).fill(null);
-const timer = { id: -1 };
 
+//算图的中心点
+const center = {
+  x: Math.floor(props.style.width / 2),
+  y: Math.floor(props.style.height / 2),
+};
+//算所有遮罩层中心点
+const centerItemArray = [];
+props.ArraySet.forEach((item, index) => {
+  const centerX = (item.left + item.width) / 2;
+  const centerY = (item.top + item.height) / 2;
+  centerItemArray.push({
+    x: centerX,
+    y: centerY,
+  });
+});
+
+//监听控制开关的值
 watch(
   () => props.onOff,
   (n, o) => {
@@ -71,109 +86,80 @@ watch(
     }
   }
 );
-
+//Y轴方向随机初速度
+const randomYArray = [-60, -70, -80];
+const randomSelect = () => {
+  let randomNum = Math.random();
+  if (randomNum < 0.33) {
+    return randomYArray[0];
+  } else if (randomNum < 0.66) {
+    return randomYArray[1];
+  } else {
+    return randomYArray[2];
+  }
+};
 //运动函数
 const MoveFunc = () => {
-  controlArray[0].run([
-    controlArray[0].action().setSpdAndAccel(-6, -9, 0, 1, null, null),
-    controlArray[0]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[0].action().stopMoving()]),
-  ]);
-
-  controlArray[1].run([
-    controlArray[1].action().setSpdAndAccel(0, -5, 0, 1, null, null),
-    controlArray[1]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[1].action().stopMoving()]),
-  ]);
-  controlArray[2].run([
-    controlArray[2].action().setSpdAndAccel(6, -9, 0, 1, null, null),
-    controlArray[2]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[2].action().stopMoving()]),
-  ]);
-  controlArray[3].run([
-    controlArray[3].action().setSpdAndAccel(-6, -7, 0, 1, null, null),
-    controlArray[3]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[3].action().stopMoving()]),
-  ]);
-  controlArray[4].run([
-    controlArray[4].action().setSpdAndAccel(0, -8, 0, 1, null, null),
-    controlArray[4]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[4].action().stopMoving()]),
-  ]);
-  controlArray[5].run([
-    controlArray[5].action().setSpdAndAccel(6, -7, 0, 1, null, null),
-    controlArray[5]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[5].action().stopMoving()]),
-  ]);
-  controlArray[6].run([
-    controlArray[6].action().setSpdAndAccel(-6, -4, 0, 1, null, null),
-    controlArray[6]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[6].action().stopMoving()]),
-  ]);
-  controlArray[7].run([
-    controlArray[7].action().setSpdAndAccel(0, -8, 0, 1, null, null),
-    controlArray[7]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[7].action().stopMoving()]),
-  ]);
-  controlArray[8].run([
-    controlArray[8].action().setSpdAndAccel(2, -7, 0, 1, null, null),
-    controlArray[8]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[8].action().stopMoving()]),
-  ]);
-  controlArray[9].run([
-    controlArray[9].action().setSpdAndAccel(6, -7, 0, 1, null, null),
-    controlArray[9]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[9].action().stopMoving()]),
-  ]);
-  controlArray[10].run([
-    controlArray[10].action().setSpdAndAccel(4, -4, 0, 1, null, null),
-    controlArray[10]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[10].action().stopMoving()]),
-  ]);
-  controlArray[11].run([
-    controlArray[11].action().setSpdAndAccel(6, -4, 0, 1, null, null),
-    controlArray[11]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[11].action().stopMoving()]),
-  ]);
+  centerItemArray.forEach((item, index) => {
+    if (center.x - item.x <= Math.abs(60)) {
+      controlArray[index].run([
+        controlArray[index]
+          .action()
+          .setSpdAndAccel(16, randomSelect(), 0, 15, null, null),
+        controlArray[index]
+          .condition()
+          .reachPosition(undefined, 1380)
+          .then([controlArray[index].action().stopMoving()]),
+      ]);
+    } else if (center.x - item.x <= 200) {
+      controlArray[index].run([
+        controlArray[index]
+          .action()
+          .setSpdAndAccel(8, randomSelect(), 0, 15, null, null),
+        controlArray[index]
+          .condition()
+          .reachPosition(undefined, 1380)
+          .then([controlArray[index].action().stopMoving()]),
+      ]);
+    } else if (center.x - item.x <= 500) {
+      controlArray[index].run([
+        controlArray[index]
+          .action()
+          .setSpdAndAccel(-8, randomSelect(), 0, 15, null, null),
+        controlArray[index]
+          .condition()
+          .reachPosition(undefined, 1380)
+          .then([controlArray[index].action().stopMoving()]),
+      ]);
+    } else if (center.x - item.x > 500) {
+      controlArray[index].run([
+        controlArray[index]
+          .action()
+          .setSpdAndAccel(-16, randomSelect(), 0, 15, null, null),
+        controlArray[index]
+          .condition()
+          .reachPosition(undefined, 1380)
+          .then([controlArray[index].action().stopMoving()]),
+      ]);
+    } else if (center.x - item.x < -60) {
+      controlArray[index].run([
+        controlArray[index]
+          .action()
+          .setSpdAndAccel(20, randomSelect(), 0, 15, null, null),
+        controlArray[index]
+          .condition()
+          .reachPosition(undefined, 1380)
+          .then([controlArray[index].action().stopMoving()]),
+      ]);
+    }
+  });
 };
 onMounted(() => {
   for (let i = 0; i < refArray.length; i++) {
     controlArray[i] = refArray[i].control;
   }
   if (props.onOff == true) {
-    // timer.id = setTimeout(() => {
-      MoveFunc();
-    // }, 1000);
-  }
-});
-onBeforeUnmount(() => {
-  if (timer.id !== -1) {
-    clearTimeout(timer.id);
-    timer.id = -1;
+    MoveFunc();
   }
 });
 </script>

package/SceneTransition/maskConfig/config1.js

@@ -0,0 +1,101 @@
+// 遮罩拼图格式1的配置
+import mask1_1 from "../images/mask/1.png";
+import mask1_2 from "../images/mask/2.png";
+import mask1_3 from "../images/mask/3.png";
+import mask1_4 from "../images/mask/4.png";
+import mask1_5 from "../images/mask/5.png";
+import mask1_6 from "../images/mask/6.png";
+import mask1_7 from "../images/mask/7.png";
+import mask1_8 from "../images/mask/8.png";
+import mask1_9 from "../images/mask/9.png";
+import mask1_10 from "../images/mask/10.png";
+import mask1_11 from "../images/mask/11.png";
+import mask1_12 from "../images/mask/12.png";
+
+const ArraySet1 = [
+    {
+        left: 0,
+        top: 0,
+        width: 521,
+        height: 302,
+        url: mask1_1,
+    },
+    {
+        left: 301,
+        top: 0,
+        width: 590,
+        height: 266,
+        url: mask1_2,
+    },
+    {
+        left: 693,
+        top: 0,
+        width: 587,
+        height: 306,
+        url: mask1_3,
+    },
+    {
+        left: 0,
+        top: 140,
+        width: 561,
+        height: 431,
+        url: mask1_4,
+    },
+    {
+        left: 482,
+        top: 140,
+        width: 409,
+        height: 377,
+        url: mask1_5,
+    },
+    {
+        left: 717,
+        top: 247,
+        width: 563,
+        height: 247,
+        url: mask1_6,
+    },
+    {
+        left: 0,
+        top: 385,
+        width: 533,
+        height: 335,
+        url: mask1_7,
+    },
+    {
+        left: 333,
+        top: 392,
+        width: 293,
+        height: 328,
+        url: mask1_8,
+    },
+    {
+        left: 569,
+        top: 452,
+        width: 213,
+        height: 268,
+        url: mask1_9,
+    },
+    {
+        left: 714,
+        top: 405,
+        width: 332,
+        height: 315,
+        url: mask1_10,
+    },
+    {
+        left: 810,
+        top: 387,
+        width: 172,
+        height: 117,
+        url: mask1_11,
+    },
+    {
+        left: 893,
+        top: 428,
+        width: 387,
+        height: 292,
+        url: mask1_12,
+    },
+];
+export { ArraySet1 }

package/SceneTransition/maskConfig/config2.js

@@ -0,0 +1,88 @@
+// 遮罩拼图格式2的配置
+const ArraySet2 = [
+    {
+      left: 0,
+      top: 0,
+      width: 565,
+      height: 395,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/1.png",
+    },
+    {
+      left: 245,
+      top: 0,
+      width: 377,
+      height: 305,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/2.png",
+    },
+    {
+      left: 600,
+      top: 0,
+      width: 236,
+      height: 276,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/3.png",
+    },
+    {
+      left: 719,
+      top: 0,
+      width: 418,
+      height: 306,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/4.png",
+    },
+    {
+      left: 783,
+      top: 0,
+      width: 497,
+      height: 415,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/5.png",
+    },
+    {
+      left: 0,
+      top: 366,
+      width: 531,
+      height: 301,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/6.png",
+    },
+    {
+      left: 494,
+      top: 217,
+      width: 481,
+      height: 340,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/7.png",
+    },
+    {
+      left: 891,
+      top: 332,
+      width: 389,
+      height: 388,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/8.png",
+    },
+    {
+      left: 0,
+      top: 429,
+      width: 601,
+      height: 291,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/9.png",
+    },
+    {
+      left: 364,
+      top: 510,
+      width: 254,
+      height: 210,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/10.png",
+    },
+    {
+      left: 573,
+      top: 447,
+      width: 230,
+      height: 273,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/11.png",
+    },
+    {
+      left: 708,
+      top: 453,
+      width: 474,
+      height: 267,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/12.png",
+    },
+  ];
+  export { ArraySet2}

package/SceneTransition/maskConfig/config3.js

@@ -0,0 +1,102 @@
+const ArraySet3 = [
+    {
+        left: 0,
+        top: 0,
+        width: 232,
+        height: 287,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+    {
+        left: 223,
+        top: 0,
+        width: 582,
+        height: 316,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+    {
+        left: 943,
+        top: 0,
+        width: 337,
+        height: 162,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+    {
+        left: 86,
+        top: 168,
+        width: 728,
+        height: 350,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+    {
+        left: 706,
+        top: 0,
+        width: 295,
+        height: 319,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+    {
+        left: 688,
+        top: 321,
+        width: 304,
+        height: 399,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+    {
+        left: 816,
+        top: 315,
+        width: 464,
+        height: 211,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+];
+
+export { ArraySet3 }