@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/DemoForOperator/ScreenShootScale/Front.vue

@@ -0,0 +1,133 @@
+<!--
+ * @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, defineEmits, inject, shallowRef } from "vue";
+
+const emit = defineEmits(["hidden"]);
+const capture = inject("capture");
+const start = inject("start");
+const divRef = shallowRef(null);
+
+const getTarget = inject("getTarget");
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 10; ++i) {
+    data.push({
+      width: 300,
+      height: 100,
+      marginRight: 10,
+      marginBottom: 10,
+      color: randomColor(),
+      content: i,
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+// callbacks
+const onEdge = (edgeInfo) => {};
+
+const onFocus = () => {};
+
+const onBlur = () => {};
+
+const widgetLayout = {
+  left: 50,
+  top: 50,
+  width: 320,
+  height: 500,
+};
+
+onMounted(() => {});
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 27 || ev.keyCode == 8 || ev.keyCode == 10000) {
+    capture(divRef).then((resInfo) => {
+      emit("hidden");
+      start(
+        {
+          left: 0,
+          top: 0,
+          width: 1280,
+          height: 720,
+        },
+        getTarget(),
+        1000,
+        "ease-in-out",
+        resInfo.url,
+        "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Genie/App/element_228542_icon_20230610184253.jpg",
+        resInfo.release
+      );
+    });
+    return true;
+  }
+  return false;
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    name="tt"
+    :onAction="{
+      onKeyDown,
+    }"
+  >
+    <div
+      ref="divRef"
+      :style="{
+        width: 1280,
+        height: 720,
+        backgroundColor: '#778800',
+      }"
+    >
+      <metro-widget
+        name="frontmw"
+        :left="widgetLayout.left"
+        :top="widgetLayout.top"
+        :width="widgetLayout.width"
+        :height="widgetLayout.height"
+        :provideData="provideData"
+        :direction="VERTICAL"
+        :measures="measures"
+        :onEdge="onEdge"
+        :onFocus="onFocus"
+        :onBlur="onBlur"
+      >
+        <template #renderItem="{ data, onAction }">
+          <item :data="data" :onAction="onAction" />
+        </template>
+      </metro-widget>
+      <div
+        :style="{
+          left: 400,
+          top: 100,
+          fontSize: 30,
+        }"
+      >
+        摁返回键
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>

package/DemoForOperator/ScreenShootScale/Item.vue

@@ -0,0 +1,62 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { shallowRef, onMounted, inject } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = shallowRef(false);
+const setTarget = inject("setTarget");
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+const imgRef = shallowRef(null);
+onMounted(() => {
+  imgRef.value?.jsvGetBoundingClientRect().then((rect) => {
+    setTarget(rect.left, rect.top, rect.width, rect.height);
+  });
+});
+</script>
+
+<template>
+  <div
+    v-if="data.imgUrl"
+    ref="imgRef"
+    :style="{
+      width: data.width,
+      height: data.height,
+      backgroundImage: data.imgUrl,
+      borderRadius: 10,
+    }"
+  ></div>
+  <div
+    v-else
+    :style="{
+      width: data.width,
+      height: data.height,
+      fontSize: 30,
+      color: focused ? '#FF0000' : '#FFFFFF',
+      backgroundColor: data.color,
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/DemoForOperator/ScreenShootScale/ScreenShootScale.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    :style="{
+      left: from.left,
+      top: from.top,
+      width: from.width,
+      height: from.height,
+      animation: scaleAnim,
+    }"
+    @animationend="onAnimEnd"
+  >
+    <div
+      v-show="backShow"
+      :style="{
+        left: from.left,
+        top: from.top,
+        width: from.width,
+        height: from.height,
+        backgroundImage: toSource,
+        borderRadius: 50,
+      }"
+    ></div>
+    <div
+      v-if="frontShow"
+      :style="{
+        left: from.left,
+        top: from.top,
+        width: from.width,
+        height: from.height,
+        backgroundImage: fromSource,
+        animation: frontAnim,
+        borderRadius: 50,
+      }"
+    ></div>
+  </div>
+</template>
+
+<script>
+let token = 0;
+</script>
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { getKeyFramesGroup } from "jsview";
+
+const props = defineProps({
+  from: Object,
+  to: Object,
+  duration: Number,
+  easing: String,
+  fromSource: String,
+  toSource: String,
+});
+
+const emit = defineEmits(["animationend"]);
+
+const frontShow = ref(true);
+const backShow = ref(true);
+const frontAnim = ref(null);
+const backAnim = ref(null);
+
+const scaleAnimName = "screen_shoot_scale_anim_" + token++;
+const scaleAnimBody = `@keyframes ${scaleAnimName} { 
+from { transform: translate3d(0,0,0) scale3d(1,1,1); transform-origin: 0 0; } 
+to { transform: translate3d(${props.to.left - props.from.left}, ${
+  props.to.top - props.from.top
+}, 0) scale3d(${props.to.width / props.from.width}, ${
+  props.to.height / props.from.height
+}, 1); transform-origin: 0 0; } }`;
+const styleSheets = getKeyFramesGroup();
+styleSheets.insertRule(scaleAnimBody);
+const scaleAnim = ref(null);
+
+const onAnimEnd = () => {
+  frontShow.value = false;
+  emit("animationend");
+};
+
+onMounted(() => {
+  frontAnim.value = `fadeOut ${props.duration / 1000}s ${props.easing}`;
+  backAnim.value = `fadeIn ${props.duration / 1000}s ${props.easing}`;
+  scaleAnim.value = `${scaleAnimName} ${props.duration / 1000}s ${
+    props.easing
+  }`;
+});
+
+onBeforeUnmount(() => {
+  styleSheets.removeRule(scaleAnimName);
+});
+</script>
+
+<style scopped>
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>

package/DemoForOperator/SmoothSwiper/App.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    :style="{
+      top: 100,
+      left: 0,
+    }"
+  >
+    <jsv-smooth-swiper
+      :name="'smooth-swiper'"
+      :total-frame="20"
+      :first-frame="1"
+      :layout-info="{ width: 1280, height: 300 }"
+      :item-size="{ width: 800, height: 200 }"
+      :item-gap="30"
+      :on-edge="onEdge"
+      :padding="{ top: 50, bottom: 50}"
+    >
+      <template #itemView="{ currentIndex, dataIndex, focused }">
+        <div
+          :style="{
+            width: 800,
+            height: 200,
+            backgroundColor: currentIndex == dataIndex ? '#007788' : '#778800',
+            transform: currentIndex == dataIndex ? 'scale3d(1.05, 1.05, 1)' : 'scale3d(1, 1, 1)',
+            transition: 'transform 0.3s',
+            fontSize: 40,
+            textAlign: 'center',
+            color: '#fff',
+          }"
+        >
+          {{ dataIndex }}
+        </div>
+      </template>
+    </jsv-smooth-swiper>
+  </div>
+</template>
+<script setup>
+import { JsvSmoothSwiper, useFocusHub } from "jsview";
+import { onMounted } from "vue";
+
+const focusHub = useFocusHub();
+
+const onEdge = (event) => {
+  console.log("onEdge", event);
+};
+
+onMounted(() => {
+  focusHub.setFocus("smooth-swiper");
+});
+</script>

package/DemoForOperator/Sound/Bounce/App.vue

@@ -0,0 +1,56 @@
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#F5F5DC' }"></div>
+  <jsv-focus-block autoFocus :onAction="{ onKeyDown }"></jsv-focus-block>
+  <div
+    :style="{
+      width: 1280,
+      height: 100,
+      lineHeight: 100,
+      textAlign: 'center',
+      fontSize: 40,
+      color: '#000000',
+    }"
+  >
+    按OK键触发动画
+  </div>
+  <bounce
+    ref="bounceRef"
+    :src="iLeftSnake"
+    :layout="{
+      width: 320,
+      height: 320,
+      top: 400,
+      left: 400,
+    }"
+  />
+  <Sound :bgInfos="bgInfos" />
+</template>
+
+<script setup>
+import Bounce from "./Bounce.vue";
+import { shallowRef, provide } from "vue";
+import { useSound, Sound } from "../Sound";
+import bgUrl from "./bgmusic.mp3";
+import coinUrl from "./coin.mp3";
+const bgMap = {
+  bg: { url: bgUrl },
+};
+const sfxMap = {
+  bounce: coinUrl,
+};
+const { playSfx, playBg, pauseBg, bgInfos } = useSound(bgMap, sfxMap);
+provide("playSfx", playSfx);
+
+const bounceRef = shallowRef(null);
+let iLeftSnake =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Bounce/App/snake_left.png?md5=e0310d4ba1c74899899ca365a8b16385";
+
+function onKeyDown(ev) {
+  if (ev.keyCode == 13) {
+    bounceRef.value.start(-400, -400, 3);
+    playBg("bg");
+    return true;
+  }
+  return false;
+}
+</script>

package/DemoForOperator/Sound/Bounce/Bounce.vue

@@ -0,0 +1,87 @@
+<template>
+  <JsvFreeMoveActor
+    :top="layout.top"
+    :left="layout.left"
+    :width="layout.width"
+    :height="layout.height"
+    ref="actorRef"
+  >
+    <img
+      :src="src"
+      :style="{
+        width: layout.width,
+        height: layout.height,
+      }"
+    />
+  </JsvFreeMoveActor>
+</template>
+
+<script setup>
+import { JsvFreeMoveActor } from "jsview";
+import { shallowRef, inject } from "vue";
+import { buildBounce } from "./FreeMoveBuilder";
+
+const props = defineProps({
+  /**
+   * 图片资源路径
+   * @type {String}
+   * @required
+   * @example
+   * // 正确用法
+   * src: "/images/ball.png"
+   */
+  src: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * 布局配置对象
+   * @type {Object}
+   * @required
+   * @typedef {Object} LayoutConfig
+   * @property {number} top - 组件顶部位置（单位：px）
+   * @property {number} left - 组件左侧位置（单位：px）
+   * @property {number} width - 组件宽度（单位：px）
+   * @property {number} height - 组件高度（单位：px）
+   * @example
+   * // 正确配置示例
+   * { top: 100, left: 200, width: 50, height: 50 }
+   */
+  layout: {
+    type: Object,
+    required: true,
+  },
+});
+
+let actorRef = shallowRef(null);
+let vLeftSnakeControl = null;
+const playSfx = inject("playSfx");
+
+/**
+ * 启动弹跳动画
+ * @param {number} left - 目标位置X坐标（单位：px）
+ * @param {number} top - 目标位置Y坐标（单位：px）
+ * @param {number} bounceTimes - 弹跳次数（建议1-5次）
+ * @description 调用此方法后组件会从当前位置向目标位置执行弹跳动画
+ * @example
+ * // 在(200,300)位置弹跳3次
+ * start(200, 300, 3)
+ */
+function startSnakeAnim(left, top, bounceTimes) {
+  vLeftSnakeControl = actorRef.value.control;
+  vLeftSnakeControl.run((cmds) => [
+    ...buildBounce(cmds, 1, left, top, bounceTimes, 2.0, (state) => {
+      console.log("state", state);
+    }, () => {
+      console.log("onBounce");
+      playSfx("bounce");
+    }),
+  ]);
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  start: startSnakeAnim,
+});
+</script>

package/DemoForOperator/Sound/Bounce/FreeMoveBuilder.js

@@ -0,0 +1,146 @@
+const SQRT2VAL = Math.sqrt(2)
+
+
+// 获取原地起跳抛物的处理
+function getParabola(
+    cmds,
+    condGroupId, // 后续改为specName
+    xSpeed,
+    ySpeed,
+    gravity,
+    times,
+    onLandCmds,
+    onBounceCbk,
+) {
+    let actCmds;
+    if (times > 0) {
+        actCmds = getParabola(
+            cmds,
+            condGroupId,
+            xSpeed,
+            ySpeed / SQRT2VAL,
+            gravity,
+            times - 1,
+            onLandCmds,
+            onBounceCbk, 
+        );
+    } else {
+        actCmds = onLandCmds;
+    }
+    console.log("actCmds", actCmds);
+
+    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,
+                        onBounceCbk,
+                    ]),
+            ]),
+    ];
+}
+
+const sFloorConditionName = "floorCond";
+const sWallConditionName = "wallCond";
+
+/* 
+    弹跳处理
+*/
+export function buildBounce(
+    cmds,// FreeMove的cmds句柄
+    condGroupId,
+    startX, // 起始位置和目标位置的偏差, 单位px
+    startY, // 起始位置和目标位置的偏差, 单位px
+    times, // 整数，落点数(弹起次数-1)
+    gravity, // y轴的加速度, 建议设置成0.8
+    onEnd,
+    onBounceCbk, //每次落地的回调
+) {
+    //FIX onEnd回调在弹跳次数>=4时不会调用
+    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, onBounceCbk);
+    } 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).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,
+                onBounceCbk,
+            ])
+    ];
+
+    return cmdsArray;
+}