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

package/DemoForOperator/Particle/Explode/ExplodeParticle.vue

@@ -0,0 +1,120 @@
+<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({
+  /**
+   * 粒子容器的布局配置
+   * @type {Object}
+   * @property {string} left - 左定位（带单位）
+   * @property {string} top - 上定位（带单位）
+   * @property {number} width - 容器宽度
+   * @property {number} height - 容器高度
+   */
+  layout: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * 粒子图片URL列表
+   * @type {Array<string>}
+   */
+  urlList: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * 粒子密度级别
+   * @type {'low'|'middle'|'high'}
+   * @default 'middle'
+   */
+  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:
+      return 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({
+  /**
+   * 触发粒子动画开始
+   * @description 通过改变token值强制重新渲染组件来启动动画
+   */
+  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,
+  },
+];

package/DemoForOperator/PosterAnim/Item.vue

@@ -0,0 +1,46 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  onItemFocus: Function,
+  query: Object,
+});
+
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+  props.onItemFocus(props.query.index);
+};
+const onBlur = () => {
+  focused.value = false;
+};
+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,
+      fontSize: 30,
+      color: '#000000',
+      backgroundColor: focused ? '#009900' : '#ff000033',
+      lineHeight: data.height,
+      textAlign: 'center',
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/DemoForOperator/PosterAnim/PosterAnim.js

@@ -0,0 +1,79 @@
+import { getKeyFramesGroup } from "jsview"
+let token = 0;
+const bounceLevel = [10, 20, 30];
+const scaleLevel = [1.03, 1.07, 1.1];
+const shaleLevel = [1, 3, 5];
+
+let styleSheet = null;
+
+/**
+ * 获取海报动画配置
+ * @param {string} type - 动画类型,可选值:
+ *                       'bounce-left' - 向左弹跳
+ *                       'bounce-bottom' - 向下弹跳  
+ *                       'bounce-right' - 向右弹跳
+ *                       'bounce-top' - 向上弹跳
+ *                       'shake' - 摇晃
+ *                       'scale' - 缩放
+ *                       'breath' - 呼吸效果
+ * @param {Object} params - 动画参数
+ * @param {'low'|'middle'|'high'} params.level - 动画幅度级别
+ * @param {number} [params.scale0] - scale动画的起始缩放值
+ * @param {number} [params.scale1] - scale动画的中间缩放值
+ * @param {number} [params.scale] - breath动画的缩放值
+ * @returns {Object} 动画配置对象
+ * @property {string} name - 动画名称
+ * @property {Function} release - 释放动画资源的函数
+ */
+
+export function getPosterAnim(type, params) {
+  if (!styleSheet) {
+    styleSheet = getKeyFramesGroup();
+  }
+  ++token;
+  const levelIndex = params.level == "high" ? 2 : params.level == "middle" ? 1 : 0;
+  let name = undefined, body = undefined;
+  switch (type) {
+    case "bounce-left": {
+      name = `poster-anim-bounce-left-${token}`
+      body = `@keyframes ${name} {0%,70%,100% { transform: translate3d(0, 0, 0);} 35% {transform: translate3d(-${bounceLevel[levelIndex]}, 0, 0);}}`
+    } break;
+    case "bounce-bottom": {
+      name = `poster-anim-bounce-bottom-${token}`
+      body = `@keyframes ${name} {0%,70%,100% { transform: translate3d(0, 0, 0);} 35% {transform: translate3d(0, ${bounceLevel[levelIndex]}, 0);}}`
+    } break;
+    case "bounce-right": {
+      name = `poster-anim-bounce-right-${token}`
+      body = `@keyframes ${name} {0%,70%,100% { transform: translate3d(0, 0, 0);} 35% {transform: translate3d(${bounceLevel[levelIndex]}, 0, 0);}}`
+    } break;
+    case "bounce-top": {
+      name = `poster-anim-bounce-top-${token}`
+      body = `@keyframes ${name} {0%,70%,100% { transform: translate3d(0, 0, 0);} 35% {transform: translate3d(0, -${bounceLevel[levelIndex]}, 0);}}`
+    } break;
+    case "shake": {
+      name = `poster-anim-shake-${token}`
+      body = `@keyframes ${name} {0%, 35% { transform: rotate3d(0, 0, 1, ${shaleLevel[levelIndex]}deg); } 70% { transform: rotate3d(0, 0, 1, -${shaleLevel[levelIndex]}deg); } 100% { transform: rotate3d(0, 0, 1, 0deg); } }`
+    } break;
+
+    case "scale": {
+      const s0 = params.scale0
+      const s1 = params.scale1;
+      name = `poster-anim-scale-${token}`
+      body = `@keyframes ${name} {0% { transform: scale3d(${s0}, ${s0}, 1); } 50% { transform: scale3d(${s1}, ${s1}, 1); } 100% { transform: scale3d(1, 1, 1); }}`
+    } break;
+    case "breath": {
+      const s0 = params.scale
+      name = `poster-anim-breath-${token}`
+      body = `@keyframes ${name} {0% { transform: scale3d(1, 1, 1); transform-origin: center center;} 50% { transform: scale3d(${s0}, ${s0}, 1); transform-origin: center center;} 100% { transform: scale3d(1, 1, 1); transform-origin: center center;}}`
+    } break;
+  }
+  if (typeof body != "undefined") {
+    styleSheet.insertRule(body);
+  }
+  return {
+    name,
+    release: () => {
+      styleSheet.removeRule(name)
+    }
+  }
+}