@shijiu/jsview-vue-samples 2.2.373 → 2.3.0

package/DemoForOperator/Particle/Drop/DropParticle.vue

@@ -0,0 +1,176 @@
+<template>
+  <div
+    v-if="show"
+    :style="{
+      left: layout.left,
+      top: layout.top,
+      width: layout.width,
+      height: layout.height,
+      overflow: 'hidden',
+    }"
+  >
+    <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>
+
+<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,
+  },
+  layout: {
+    type: Object,
+    required: true,
+  },
+  // low, middle, high
+  numLevel: {
+    type: String,
+    default: "middle",
+  },
+  sprayLevel: {
+    type: String,
+    default: "middle",
+  },
+});
+
+//获取一个随机顺序
+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;
+}
+
+const levelToIndex = (level) => {
+  switch (level) {
+    case "low":
+      return 0;
+    case "high":
+      return 2;
+    default:
+      return 1;
+  }
+};
+const levelConfig = {
+  addSpeed: [0.001, 0.01, 0.1],
+  number: [10, 50, 100],
+};
+
+//目前版本的粒子生成有问题, 会在一开始就集中出现, 所以要随机拉开几个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: Math.round(
+        levelConfig.number[levelToIndex(props.numLevel)] / props.urlList.length
+      ),
+      deltaAngle: 0,
+      deltaWidth: Math.round(props.layout.width / 2),
+      deltaHeight: 1,
+      pointSizeMin: 90,
+      pointSizeMax: 120,
+      speedMin: -10,
+      speedMax: -15,
+      lifeMin: 3500 + i * 200,
+      lifeMax: 4000 + i * 200,
+      accelerateX: 0,
+      accelerateY: 0,
+      particleAddSpeed: levelConfig.addSpeed[levelToIndex(props.sprayLevel)],
+      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>

package/DemoForOperator/Particle/Explode/ExplodeParticle.vue

@@ -0,0 +1,99 @@
+<template>
+  <div
+    v-if="token > 0"
+    :key="token"
+    :style="{
+      left: layout.left,
+      top: layout.top,
+      // width: layout.width,
+      // height: layout.height,
+      // backgroundColor: '#99000099'
+    }"
+  >
+    <jsv-spray
+      v-for="(url, index) in urlList"
+      :key="index"
+      :pointRes="`url(${url})`"
+      :sprayStyle="sprayStyle"
+      :ignoreClip="true"
+    />
+  </div>
+</template>
+
+<script setup>
+import { JsvSpray } from "jsview";
+import { shallowRef, computed } from "vue";
+
+const props = defineProps({
+  layout: {
+    type: Object,
+    requreid: true,
+  },
+  urlList: {
+    type: Array,
+    required: true,
+  },
+  numLevel: {
+    type: String,
+    default: "middle",
+  },
+});
+
+const token = shallowRef(0);
+
+/* 三个级别的粒子总个数:
+    low: 50个
+    middle: 150个,
+    high: 400个
+*/
+function getTotalParticleNum() {
+  switch (props.numLevel) {
+    case "low":
+      return 50;
+    case "high":
+      return 150;
+    default:
+      400;
+  }
+}
+
+const particleNum = computed(() => {
+  let totalNum;
+  switch (props.numLevel) {
+    case "low":
+      totalNum = 50;
+      break;
+    case "high":
+      totalNum = 400;
+      break;
+    default:
+      totalNum = 150;
+      break;
+  }
+  return Math.round(totalNum / props.urlList.length);
+});
+
+let sprayStyle = {
+  type: 0,
+  particleNum: particleNum.value,
+  deltaAngle: 180,
+  deltaWidth: Math.round(props.layout.width / 2),
+  deltaHeight: Math.round(props.layout.height / 2),
+  pointSizeMin: 50,
+  pointSizeMax: 100,
+  speedMin: 4,
+  speedMax: 10,
+  lifeMin: 1000,
+  lifeMax: 2000,
+  accelerateX: 0,
+  accelerateY: 0,
+  enableFade: true,
+  enableShrink: true,
+};
+
+defineExpose({
+  start() {
+    ++token.value;
+  },
+});
+</script>

package/DemoForOperator/PosterAnim/App.vue

@@ -0,0 +1,125 @@
+<template>
+  <div :style="{ width: 1920, height: 1080, backgroundColor: '#F5F5DC' }"></div>
+  <div
+    :style="{
+      left: (1280 - 600) / 2,
+    }"
+  >
+    <bounce-page v-if="pageId == 0" :onEdge="pageOnEdge" />
+    <shake-page v-else-if="pageId == 1" :onEdge="pageOnEdge" />
+    <scale-page v-else-if="pageId == 2" :onEdge="pageOnEdge" />
+    <breath-page v-else-if="pageId == 3" :onEdge="pageOnEdge" />
+  </div>
+
+  <div
+    :style="{
+      left: (1280 - 240) / 2,
+      top: 400,
+    }"
+  >
+    <metro-widget
+      name="btn"
+      :width="widgetLayout.width"
+      :height="widgetLayout.height"
+      :provideData="provideData"
+      :direction="HORIZONTAL"
+      :measures="measures"
+      :onEdge="onEdge"
+    >
+      <template #renderItem="{ data, onAction, query }">
+        <item
+          :data="data"
+          :onAction="onAction"
+          :onItemFocus="onItemFocus"
+          :query="query"
+        />
+      </template>
+    </metro-widget>
+    <div
+      :style="{
+        top: 60,
+        fontSize: 25,
+        color: '#000000',
+      }"
+    >
+      切换动画
+    </div>
+  </div>
+</template>
+
+<script setup>
+import BouncePage from "./Bounce/BouncePage.vue";
+import ShakePage from "./Shake/ShakePage.vue";
+import ScalePage from "./Scale/ScalePage.vue";
+import BreathPage from "./Breath/BreathPage.vue";
+
+import Item from "./Item.vue";
+import { useFocusHub, MetroWidget, HORIZONTAL, EdgeDirection } from "jsview";
+import { onMounted, ref } from "vue";
+
+const focusHub = useFocusHub();
+
+const pageId = ref(0);
+
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 4; ++i) {
+    data.push({
+      width: 50,
+      height: 50,
+      marginRight: 10,
+      content: i,
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+const pageOnEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.bottom) {
+    focusHub.setFocus("btn");
+  }
+};
+// callbacks
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    let name = null;
+    switch (pageId.value) {
+      case 0:
+        name = "bounce";
+        break;
+      case 1:
+        name = "shake";
+        break;
+      case 2:
+        name = "scale";
+        break;
+      case 3:
+        name = "breath";
+        break;
+    }
+    if (name) focusHub.setFocus(name);
+  }
+};
+const onItemFocus = (index) => {
+  pageId.value = index;
+};
+
+const widgetLayout = {
+  width: 500,
+  height: 50,
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("btn");
+});
+</script>

package/DemoForOperator/PosterAnim/Bounce/BouncePage.vue

@@ -0,0 +1,54 @@
+<template>
+  <metro-widget
+    name="bounce"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :padding="padding"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" :anim="animObj" />
+    </template>
+  </metro-widget>
+</template>
+
+<script setup>
+import { onUnmounted } from "vue";
+import { MetroWidget, HORIZONTAL } from "jsview";
+import Item from "./Item.vue";
+import { widgetLayout, padding, data } from "../CommonPageSetting";
+import { getPosterAnim } from "../PosterAnim.js";
+
+const animObj = {
+  left: getPosterAnim("bounce-left", { level: "middle" }),
+  right: getPosterAnim("bounce-right", { level: "middle" }),
+  top: getPosterAnim("bounce-top", { level: "middle" }),
+  bottom: getPosterAnim("bounce-bottom", { level: "middle" }),
+};
+const props = defineProps({
+  onEdge: Function,
+});
+const provideData = () => {
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+onUnmounted(() => {
+  for (let key in animObj) {
+    animObj[key].release();
+  }
+});
+</script>

package/DemoForOperator/PosterAnim/Bounce/Item.vue

@@ -0,0 +1,85 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import { EdgeDirection } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  anim: Object,
+});
+const bgImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterAnim/Bounce/Item/background.png";
+
+const focused = ref(false);
+const animation = ref(null);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {};
+
+const onAnimEnd = () => {
+  animation.value = null;
+};
+
+const onWidgetEdge = (info) => {
+  switch (info.direction) {
+    case EdgeDirection.left:
+      animation.value = `${props.anim.left.name} 0.15s`;
+      break;
+    case EdgeDirection.top:
+      animation.value = `${props.anim.top.name} 0.15s`;
+      break;
+    case EdgeDirection.right:
+      animation.value = `${props.anim.right.name} 0.15s`;
+      break;
+  }
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+props.onAction.register("onWidgetEdge", onWidgetEdge);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transition: 'transform 0.2s',
+      transform: focused ? 'scale3d(1.05, 1.05, 1)' : null,
+    }"
+  >
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        animation: animation,
+      }"
+      @animationend="onAnimEnd"
+    >
+      <div
+        :style="{
+          width: data.width,
+          height: data.height,
+          fontSize: 30,
+          color: focused ? '#FF0000' : '#FFFFFF',
+          backgroundImage: bgImage,
+          lineHeight: data.height,
+          textAlign: 'center',
+        }"
+      >
+        边缘抖动
+      </div>
+    </div>
+  </div>
+</template>

package/DemoForOperator/PosterAnim/Breath/BreathPage.vue

@@ -0,0 +1,47 @@
+<template>
+  <metro-widget
+    name="breath"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :padding="padding"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" :anim="anim" />
+    </template>
+  </metro-widget>
+</template>
+
+<script setup>
+import { onUnmounted } from "vue";
+import { MetroWidget, HORIZONTAL } from "jsview";
+import Item from "./Item.vue";
+import { widgetLayout, padding, data } from "../CommonPageSetting.js";
+import { getPosterAnim } from "../PosterAnim.js";
+
+const anim = getPosterAnim("breath", { scale: 1.05 });
+const props = defineProps({
+  onEdge: Function,
+});
+const provideData = () => {
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+onUnmounted(() => {
+  anim.release();
+});
+</script>

package/DemoForOperator/PosterAnim/Breath/Item.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import { EdgeDirection } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  anim: Object,
+});
+const bgImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterAnim/Breath/Item/background.png";
+
+const focused = ref(false);
+const animation = ref(null);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+  animation.value = `${props.anim.name} 2s infinite`;
+};
+const onBlur = () => {
+  focused.value = false;
+  animation.value = null;
+};
+const onClick = () => {};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      animation: animation,
+    }"
+  >
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: 30,
+        color: focused ? '#FF0000' : '#FFFFFF',
+        backgroundImage: bgImage,
+        lineHeight: data.height,
+        textAlign: 'center',
+      }"
+    >
+      呼吸
+    </div>
+  </div>
+</template>

package/DemoForOperator/PosterAnim/CommonPageSetting.js

@@ -0,0 +1,30 @@
+
+export const widgetLayout = {
+  left: 50,
+  top: 50,
+  width: 600,
+  height: 300,
+};
+export const padding = {
+  left: 50,
+  right: 50,
+  top: 50,
+  bottom: 50,
+};
+export const data = [
+  {
+    width: 100,
+    height: 200,
+    marginRight: 10,
+  },
+  {
+    width: 200,
+    height: 200,
+    marginRight: 10,
+  },
+  {
+    width: 100,
+    height: 200,
+    marginRight: 10,
+  },
+];