@shijiu/jsview-vue-samples 2.1.367-test.0 → 2.1.435

package/SceneTransition/App.vue

@@ -0,0 +1,268 @@
+<template>
+  <JsvPreload
+    :preloadList="preload_info"
+    :onPreloadDone="loadDone"
+  ></JsvPreload>
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
+    <div class="bgStyle">
+      <div :style="{ width: 640, height: 360, backgroundImage: bg, top: 100 }">
+        <JsvSceneTransition
+          v-show="isShow"
+          :imageUrl="fly1"
+          :ArraySet="SelectArray"
+          :displayWidth="640"
+          :style="style"
+          :onOff="onOff"
+        ></JsvSceneTransition>
+      </div>
+      <!-- 文字说明 -->
+      <div class="text" :style="{ left: 20, top: 20 }">
+        {{ "操作说明：按【OK】键进行随机遮罩层碎片过渡效果。" }}
+      </div>
+      <div class="text" :style="{ left: 810, top: 20 }">{{ "素材展示" }}</div>
+      <div class="text" :style="{ left: 400, top: 500 }">
+        {{ "按需采用碎片式的图片来进行遮罩，此例只展示一组遮罩素材。" }}
+      </div>
+      <!-- 报错小框 -->
+      <div v-if="boxSwitch" class="smallBox">
+        <div class="text" :style="{ left: 50, top: 40 }">
+          {{ "图片没预加载完成！" }}
+        </div>
+      </div>
+      <!-- 素材展示 -->
+      <div
+        :style="{
+          width: 320,
+          height: 180,
+          backgroundImage: fly1,
+          top: 80,
+          left: 700,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 320,
+          height: 180,
+          backgroundImage: fly2,
+          top: 280,
+          left: 700,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[0].url,
+          top: 500,
+          left: 700,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[1].url,
+          top: 500,
+          left: 800,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[2].url,
+          top: 500,
+          left: 920,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[3].url,
+          top: 550,
+          left: 700,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[4].url,
+          top: 550,
+          left: 820,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[5].url,
+          top: 550,
+          left: 920,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[6].url,
+          top: 600,
+          left: 700,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[7].url,
+          top: 600,
+          left: 770,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 80,
+          height: 60,
+          backgroundImage: ArraySet1[8].url,
+          top: 600,
+          left: 860,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 60,
+          height: 60,
+          backgroundImage: ArraySet1[9].url,
+          top: 600,
+          left: 930,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 30,
+          height: 30,
+          backgroundImage: ArraySet1[10].url,
+          top: 590,
+          left: 950,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 40,
+          height: 60,
+          backgroundImage: ArraySet1[11].url,
+          top: 600,
+          left: 980,
+        }"
+      ></div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { shallowRef, onBeforeUnmount } from "vue";
+import { JsvPreload, buildPreloadInfo } from "jsview";
+import JsvSceneTransition from "./jsvSceneTransition.vue";
+import { ArraySet1 } from "./maskConfig/config1";
+import { ArraySet2 } from "./maskConfig/config2";
+import { ArraySet3 } from "./maskConfig/config3";
+
+const fly1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/fly1.jpg";
+const fly2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/fly2.jpg";
+//预加载数组
+const preload_info = [buildPreloadInfo(fly1), buildPreloadInfo(fly2)];
+
+//三个配置数组分别添加自己的图片地址进行预加载
+ArraySet1.forEach((item, index) => {
+  preload_info.push(buildPreloadInfo(item.url));
+});
+ArraySet2.forEach((item, index) => {
+  preload_info.push(buildPreloadInfo(item.url));
+});
+ArraySet3.forEach((item, index) => {
+  preload_info.push(buildPreloadInfo(item.url));
+});
+
+//预加载完成标志
+let isDone = shallowRef(false);
+//小框显示标志
+let boxSwitch = shallowRef(false);
+//计时器
+let timer = { id: -1 };
+//预加载完成回调
+const loadDone = () => {
+  isDone.value = true;
+};
+const style = { width: 1280, height: 720 };
+let isShow = shallowRef(false);
+let bg = shallowRef(fly1);
+let onOff = shallowRef(false);
+
+//随机选择数组
+const randomSelect = () => {
+  let randomNum = Math.random();
+  if (randomNum <= 0.33) {
+    return ArraySet1;
+  } else if (randomNum <= 0.66) {
+    return ArraySet2;
+  } else {
+    return ArraySet3;
+  }
+};
+const SelectArray = randomSelect();
+
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 13:
+      if (isDone.value == true) {
+        bg.value = fly2;
+        onOff.value = true;
+        isShow.value = true;
+      } else {
+        boxSwitch.value = true;
+        timer.id = setTimeout(() => {
+          boxSwitch.value = false;
+        }, 1000);
+      }
+
+      break;
+
+    default:
+      break;
+  }
+};
+//卸载时清除定时器
+onBeforeUnmount(() => {
+  if (timer.id) {
+    clearTimeout(timer.id);
+    timer.id = -1;
+  }
+});
+</script>
+
+<style scoped>
+.text {
+  width: 300;
+  height: 80;
+  color: #ffffff;
+  font-weight: bold;
+  line-height: 26;
+  font-size: 24;
+}
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #007788;
+}
+.smallBox {
+  width: 300;
+  height: 100;
+  left: 170;
+  top: 230;
+  border-radius: 20;
+  background-color: #006400;
+}
+</style>

package/SceneTransition/JsvSceneTransition.vue

@@ -0,0 +1,167 @@
+<!--
+ * 【模块 export 内容】
+ * JsvSceneTransition:场景过渡组件。
+ *      props说明:
+ *          imageUrl     {String}    (必填) 显示图片的加载地址
+ *          displayWidth {Number}    (必填) 想要展示的宽度
+ *          ArraySet     {Array}     (必填) 模板配置项，包括：每个模块的width,height,left,top,url
+ *          style        {Object}    (必填) 模板配置总长度和总宽度。(width,height)
+ *          onOff       {Boolean}   (必填) 组件挂载好后是否立即动画的开关，后续可通过改值为true开启。
+-->
+
+<template>
+  <div
+    :style="{
+      width: props.style.width,
+      height: props.style.height,
+      transform: `scale3d(${props.displayWidth / props.style.width},${
+        props.displayWidth / props.style.width
+      },1)`,
+      transformOrigin: 'left top',
+    }"
+  >
+    <jsv-free-move-actor
+      v-for="(item, index) in props.ArraySet"
+      :ref="(el) => (refArray[index] = el)"
+      :top="item.top"
+      :left="item.left"
+      :width="item.width"
+      :height="item.height"
+    >
+      <jsv-mask-clip-div
+        :style="{
+          top: 0,
+          left: 0,
+          width: item.width,
+          height: item.height,
+        }"
+        :viewSrc="props.imageUrl"
+        :maskSrc="item.url"
+        :maskLeft="item.left / props.style.width"
+        :maskTop="item.top / props.style.height"
+        :maskWidth="item.width / props.style.width"
+        :maskHeight="item.height / props.style.height"
+      />
+    </jsv-free-move-actor>
+  </div>
+</template>
+
+<script setup>
+import { JsvMaskClipDiv, JsvFreeMoveActor } from "jsview";
+import { onMounted, watch } from "vue";
+
+const props = defineProps({
+  imageUrl: { type: String, require: true },
+  displayWidth: { type: Number, require: true },
+  ArraySet: { type: Array, require: true },
+  style: { type: Object, require: true },
+  onOff: { type: Boolean, require: true },
+});
+//FreeMove引用
+const refArray = [];
+const controlArray = new Array(props.ArraySet.length).fill(null);
+
+//算图的中心点
+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) => {
+    if (n == true) {
+      MoveFunc();
+    }
+  }
+);
+//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 = () => {
+  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) {
+    MoveFunc();
+  }
+});
+</script>
+
+<style scoped></style>

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}