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

package/DemoForOperator/Bounce/FreeMoveBuilder.js

@@ -0,0 +1,139 @@
+const SQRT2VAL = Math.sqrt(2)
+
+
+// 获取原地起跳抛物的处理
+function getParabola(
+    cmds,
+    condGroupId, // 后续改为specName
+    xSpeed,
+    ySpeed,
+    gravity,
+    times,
+    onLandCmds
+) {
+    let actCmds;
+    if (times > 0) {
+        actCmds = getParabola(
+            cmds,
+            condGroupId,
+            xSpeed,
+            ySpeed / SQRT2VAL,
+            gravity,
+            times - 1,
+            onLandCmds
+        );
+    } else {
+        actCmds = onLandCmds;
+    }
+
+    return [
+        cmds.state().removeConditionByName(sFloorConditionName),
+        // (state: any) => {
+        //     console.log(`State on t=${Date.now()} land y=${ySpeed} setStartOffsetPos times=${times}`,
+        //         JSON.stringify(state))
+        // },
+        cmds.state().setStartPos(undefined, -1), // 离开接触点
+        cmds.action().setSpdAndAccel(xSpeed, ySpeed, 0, gravity),
+
+        // 下一帧再重启condition，避免当前帧的判断循环中仍然激活condition
+        cmds
+            .condition(condGroupId)
+            .onNextTick()
+            .then([
+                cmds
+                    .condition(condGroupId, false, sFloorConditionName)
+                    .reachPosition(undefined, 0)
+                    .then([
+                        ...actCmds,
+                    ]),
+            ]),
+    ];
+}
+
+const sFloorConditionName = "floorCond";
+const sWallConditionName = "wallCond";
+
+/* 
+    弹跳处理
+*/
+export function buildBounce(
+    cmds,// FreeMove的cmds句柄
+    condGroupId,
+    startX, // 起始位置和目标位置的偏差, 单位px
+    startY, // 起始位置和目标位置的偏差, 单位px
+    times, // 整数，落点数(弹起次数-1)
+    gravity, // y轴的加速度, 建议设置成0.8
+    onEnd,
+) {
+    let xDistance = startX - 0;
+    let yDistance = startY - 0;
+
+    if (times < 1) {
+        times = 1;
+        console.log("at least 1 times");
+    }
+
+    // 每个碰撞点之间的x的距离为
+    // sx * (1 + 1/sqrt(2) + 1/sqrt(2)^2 + ...) (=次数的数列)
+    // sx 为第一次下落过程x轴走过的距离
+    let sqrt2 = 1 / SQRT2VAL;
+    let sxSubBase = 2;
+    let sxSub = sxSubBase / 2;
+    for (let i = 0; i < times - 1; i++) {
+        sxSubBase = sxSubBase * sqrt2;
+        sxSub += sxSubBase;
+    }
+    let sx = -(xDistance / sxSub);
+
+    // 求首次下落使用的时间， 按照 s = 1/2*a*t^2的公式求解
+    let t1st = Math.sqrt(Math.abs(yDistance) * 2 / gravity);
+
+    // 求x的速度
+    let vx = sx / t1st;
+
+    // 求第一次落点的y速度
+    let vy1st = gravity * t1st;
+
+    let onLandCmds = [
+        cmds.action().teleportTo(0, 0),
+        // cmds.action().stopMoving(true),
+        cmds.state().removeConditionByGroup(condGroupId),
+        (...args) => {
+            onEnd?.(...args);
+        }
+    ];
+
+    let parabolaCmds;
+    if (times > 1) {
+        // 递归创建所有运动处理
+        parabolaCmds = getParabola(cmds, condGroupId, vx, -vy1st / SQRT2VAL, gravity, times - 2, onLandCmds);
+    } else {
+        parabolaCmds = onLandCmds;
+    }
+
+    let wallname = xDistance > 0 ? "left" : "right";
+
+    let cmdsArray = [
+        // 清理掉所有condition，除了group的外，还有wallposition
+        // 但后续specName的bug修正后，可以用specName来控制动画，只清理group即可
+        cmds.state().removeConditionByGroup(condGroupId),
+
+        // wallPosition用于规避运动路程计算超出(times越大超出越多)时，解决动画结尾的回弹问题
+        cmds.condition(condGroupId, true, sWallConditionName).wallPosition(wallname, 0, undefined).then([
+            cmds.action().teleportTo(0, undefined),
+            cmds.action().setSpdAndAccel(0, undefined, undefined, undefined),
+        ]),
+
+        // 启动从起始点的抛物下落动画
+        cmds.state().setStartPos(startX, startY),
+        cmds.action().setSpdAndAccel(vx, 0, 0, gravity),
+        cmds
+            .condition(condGroupId, false, sFloorConditionName)
+            .reachPosition(undefined, 0)
+            .then([
+                ...parabolaCmds
+            ])
+    ];
+
+    return cmdsArray;
+}

package/DemoForOperator/ChunLian/App.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+
+  <couplets
+    :sourceMap="sourceMap"
+    :leftPosition="leftPosition"
+    :rightPosition="rightPosition"
+    :size="size"
+    :duration="2"
+  ></couplets>
+</template>
+
+<script setup>
+import Couplets from "./Couplets.vue";
+const leftImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ChunLian/App/couplet_left.png";
+const rightImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ChunLian/App/couplet_right.png";
+const scrollSprite = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ChunLian/App/scroll.png";
+const scrollStatic = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ChunLian/App/scroll_static.png";
+
+const sourceMap = {
+  leftContent: leftImage,
+  rightContent: rightImage,
+  scrollSprite: scrollSprite,
+  scrollStatic: scrollStatic,
+};
+
+const size = {
+  width: 180,
+  height: 600,
+};
+
+const leftPosition = {
+  left: 100,
+  top: 30,
+};
+
+const rightPosition = {
+  left: 1000,
+  top: 30,
+};
+</script>

package/DemoForOperator/ChunLian/Couplets.vue

@@ -0,0 +1,291 @@
+<!--
+ * 【模块 export 内容】
+ * JsvCouplets：春联组件
+ *      props说明:
+ *          width         {Number}   春联宽度
+ *          duration      {Number}   春联滚动时间
+ *          left          {Number}   春联Left位置
+ *          top           {Number}   春联Top位置 
+ * 
+-->
+<template>
+  <JsvPreload
+    :preloadList="preload_info"
+    :onPreloadDone="loadDone"
+  ></JsvPreload>
+  <div v-for="layout in layouts">
+    <div
+      v-show="myShow"
+      :style="{
+        width: 180,
+        height: size.height,
+        top: layout.top,
+        left: layout.left,
+        transform: `scale3d(${size.width / 180},${size.width / 180},1)`,
+        transformOrigin: 'left top',
+      }"
+    >
+      <div
+        :style="{
+          top: 0,
+          left: 0,
+          width: 180,
+          height: size.height,
+          overflow: 'hidden',
+          animation: aniName1,
+        }"
+      >
+        <div
+          :style="{
+            top: 0,
+            left: 0,
+            width: 180,
+            height: size.height,
+            backgroundImage: layout.isLeft
+              ? sourceMap.leftContent
+              : sourceMap.rightContent,
+            animation: aniName2,
+          }"
+        ></div>
+      </div>
+      <!-- 滚轴动画 -->
+      <JsvSpriteLoader
+        :imageUrl="sourceMap.scrollSprite"
+        :configUrl="scrollJson"
+        :onConfigReady="preloadCallback"
+        :noNeedResource="false"
+      >
+        <div
+          :style="{
+            left: -30,
+            top: size.height,
+            transform: `scale3d(${(180 + 60) / view_size.w},1,1)`,
+          }"
+        >
+          <div
+            :style="{
+              width: view_size.w,
+              height: view_size.h,
+              animation: aniName1,
+            }"
+          >
+            <JsvSpriteAnim
+              :spriteInfo="sprite_info.info"
+              :loop="4"
+              :duration="props.duration / 4"
+              :imageUrl="sourceMap.scrollSprite"
+              ref="myRef"
+            >
+            </JsvSpriteAnim>
+          </div>
+        </div>
+      </JsvSpriteLoader>
+      <!-- 滚轴图片 -->
+      <div
+        :style="{
+          top: -30,
+          left: -30,
+          width: 180 + 60,
+          height: 30,
+          backgroundImage: sourceMap.scrollStatic,
+        }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  JsvSpriteAnim,
+  getKeyFramesGroup,
+  JsvSpriteLoader,
+  JsvPreload,
+  buildPreloadInfo,
+} from "jsview";
+import { shallowRef, onBeforeUnmount, watch } from "vue";
+
+const props = defineProps({
+  /**
+   * 春联图片资源配置对象
+   * @type {Object}
+   * @property {string} leftContent - 左侧春联图片URL
+   * @property {string} rightContent - 右侧春联图片URL
+   * @property {string} scrollSprite - 滚轴精灵图URL
+   * @property {string} scrollStatic - 静态滚轴图片URL
+   * @required
+   */
+  sourceMap: {
+    type: Object,
+    require: true,
+    validator: function (value) {
+      return (
+        "leftContent" in value &&
+        "rightContent" in value &&
+        "scrollSprite" in value &&
+        "scrollStatic" in value
+      );
+    },
+  },
+
+  /**
+   * 春联尺寸配置
+   * @type {Object}
+   * @property {number} width - 春联宽度
+   * @property {number} height - 春联高度
+   * @required
+   */
+  size: {
+    type: Object,
+    required: true,
+    validator: function (value) {
+      return "width" in value && "height" in value;
+    },
+  },
+
+  /**
+   * 左侧春联位置配置
+   * @type {Object}
+   * @property {number} left - 左侧春联的水平位置
+   * @property {number} top - 左侧春联的垂直位置
+   * @required
+   */
+  leftPosition: {
+    type: Object,
+    require: true,
+    validator: function (value) {
+      return "left" in value && "top" in value;
+    },
+  },
+
+  /**
+   * 右侧春联位置配置
+   * @type {Object}
+   * @property {number} left - 右侧春联的水平位置
+   * @property {number} top - 右侧春联的垂直位置
+   * @required
+   */
+  rightPosition: {
+    type: Object,
+    require: true,
+    validator: function (value) {
+      return "left" in value && "top" in value;
+    },
+  },
+
+  /**
+   * 动画持续时间（单位：秒）
+   * @type {Number}
+   * @required
+   */
+  duration: { 
+    type: Number, 
+    require: true 
+  }
+});
+const layouts = [{ ...props.leftPosition, isLeft: true }, props.rightPosition];
+let myShow = shallowRef(false);
+const scrollJson = props.sourceMap.scrollSprite.split("?")[0] + ".json";
+
+//预加载
+const preload_info = [
+  buildPreloadInfo(props.sourceMap.leftContent),
+  buildPreloadInfo(props.sourceMap.rightContent),
+  buildPreloadInfo(props.sourceMap.scrollSprite),
+  buildPreloadInfo(props.sourceMap.scrollStatic),
+];
+
+let readyNum = shallowRef(0);
+const loadDone = (a) => {
+  readyNum.value++;
+};
+let sprite_info = shallowRef(null);
+const view_size = shallowRef(null);
+
+const _formatInfo = (action_json) => {
+  const info = {
+    frames: [],
+    meta: {
+      size: action_json.meta.size,
+    },
+  };
+  let frames_ref = info.frames;
+  let max_width = 0;
+  let max_height = 0;
+
+  for (let i = 0; i < action_json.frames.length; i++) {
+    const target = action_json.frames[i].spriteSourceSize;
+    frames_ref.push({
+      target,
+      source: action_json.frames[i].frame,
+    });
+    const sprite_with = target.x + target.w;
+    const sprite_height = target.y + target.h;
+    if (sprite_with > max_width) {
+      max_width = sprite_with;
+    }
+    if (sprite_height > max_height) {
+      max_height = sprite_height;
+    }
+  }
+  return { info, maxW: max_width, maxH: max_height };
+};
+const preloadCallback = (config_json, resolve_set) => {
+  sprite_info.value = _formatInfo(config_json);
+  view_size.value = {
+    w: sprite_info.value.maxW,
+    h: sprite_info.value.maxH,
+  };
+  resolve_set(); // 通知loader数组设置完成
+  readyNum.value++;
+};
+//动画名字
+let aniName1 = shallowRef(null);
+let aniName2 = shallowRef(null);
+
+//插入动画
+const idRandom = Math.floor(Math.random() * 1000000);
+let name1 = "anim1-" + idRandom;
+let name2 = "anim2-" + idRandom;
+let styleShell = getKeyFramesGroup();
+let anim1 = `@keyframes ${name1} {
+        from {
+          transform: translate3d(0,${-props.size.height}, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+styleShell.insertRule(anim1);
+let anim2 = `@keyframes ${name2} {
+        from {
+          transform: translate3d(0,${props.size.height}, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+styleShell.insertRule(anim2);
+
+let timer = { id: -1 };
+//ref
+let myRef = shallowRef(null);
+watch(readyNum, (n, o) => {
+  if (o != 2 && n == 2) {
+    timer.id = setTimeout(() => {
+      myShow.value = true;
+      myRef.value?.forEach((i) => i.start());
+      aniName1.value = `${name1} ${props.duration}s linear`;
+      aniName2.value = `${name2} ${props.duration}s linear`;
+    }, 0);
+  }
+});
+
+onBeforeUnmount(() => {
+  styleShell.removeRule(name1);
+  styleShell.removeRule(name2);
+  clearTimeout(timer.id);
+  timer.id = -1;
+});
+</script>
+
+<style scoped></style>

package/DemoForOperator/ClickSpriteAnim/App.vue

@@ -0,0 +1,130 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, useFocusHub } from "jsview";
+import Item from "./Item.vue";
+import { onMounted, shallowRef } from "vue";
+
+const TAG = "MetroWidgetDemo";
+
+const focusHub = useFocusHub();
+
+const provideData = () => {
+  const data = [
+    {
+      width: 50,
+      height: 50,
+      marginRight: 10,
+      index: 0,
+    },
+    {
+      width: 50,
+      height: 50,
+      marginRight: 10,
+      index: 1,
+    },
+    {
+      width: 50,
+      height: 50,
+      marginRight: 10,
+      index: 2,
+      spriteSrc:
+        "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ClickSpriteAnim/good.png",
+    },
+  ];
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+// callbacks
+const onEdge = (edgeInfo) => {
+  console.log(TAG, "onEdge", edgeInfo);
+};
+
+const onFocus = () => {
+  console.log(TAG, "onFocus");
+};
+
+const onBlur = () => {
+  console.log(TAG, "onBlur");
+};
+
+const onScroll = (start, range, totalSize) => {
+  console.log(TAG, "onScroll", start, range, totalSize);
+};
+
+const widgetLayout = {
+  left: (1280 - 180) / 2,
+  top: 100,
+  width: 180,
+  height: 300,
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("mainMw");
+});
+
+const widgetRef = shallowRef(null);
+window.widgetRef = widgetRef;
+
+const show = shallowRef(false);
+setTimeout(() => {
+  show.value = true;
+}, 1000);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  />
+  <metro-widget
+    v-if="show"
+    ref="widgetRef"
+    name="mainMw"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="VERTICAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :onFocus="onFocus"
+    :onBlur="onBlur"
+    :onScroll="onScroll"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <div
+    :style="{
+      width: 1280,
+      height: 80,
+      lineHeight: 80,
+      backgroundColor: '#00000077',
+      fontSize: 30,
+      textAlign: 'center',
+      color: '#ffffff',
+    }"
+  >
+    第三项摁OK会有动画
+  </div>
+</template>

package/DemoForOperator/ClickSpriteAnim/Item.vue

@@ -0,0 +1,74 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef } from "vue";
+import Sprite from "../Sprite/Sprite.vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+const spriteController = shallowRef(null);
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  spriteController.value?.play();
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+const onAnimEnd = () => {
+  console.log("anim end");
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      backgroundColor: focused ? '#22222299' : '#00000000',
+      borderRadius: Math.round(data.width / 2),
+    }"
+  ></div>
+  <Sprite
+    v-if="data.spriteSrc"
+    ref="spriteController"
+    :spriteSrc="data.spriteSrc"
+    :repeat="0"
+    :layout="{
+      width: data.width,
+      height: data.height,
+    }"
+    :onEnd="onAnimEnd"
+    :duration="1"
+    endFrame="end"
+    :autoStart="false"
+  ></Sprite>
+  <div
+    v-else
+    :style="{
+      width: data.width,
+      height: data.height,
+      fontSize: 30,
+      color: '#ffffff',
+      textAlign: 'center',
+      lineHeight: data.height,
+      backgroundColor: '#ffffff33',
+      borderRadius: Math.round(data.width / 2),
+    }"
+  >
+    {{ data.index }}
+  </div>
+</template>