@shijiu/jsview-vue 0.9.631 → 1.9.628

package/samples/Collision/App.vue

@@ -1,452 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-08-30 10:58:38
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-08-30 14:20:46
- * @Description: file content
--->
-<script setup>
-import { createImpactTracer, createImpactCallback } from "jsview";
-import { ref, onMounted, onBeforeUnmount } from "vue";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-
-const transEle1 = ref(null),
-  transEle2 = ref(null),
-  rotateEle1 = ref(null),
-  rotateEle2 = ref(null),
-  rotateEle3 = ref(null),
-  rotateEle4 = ref(null),
-  scaleEle1 = ref(null),
-  scaleEle2 = ref(null),
-  skewEle1 = ref(null),
-  skewEle2 = ref(null);
-
-let sensors = [];
-
-const tLeftColor = ref("#FF0000"),
-  tRightColor = ref("#00FF00"),
-  rLeftColor = ref("#FF0000"),
-  rRightColor = ref("#00FF00"),
-  r2LeftColor = ref("#FF0000"),
-  r2RightColor = ref("#00FF00"),
-  sLeftColor = ref("#FF0000"),
-  sRightColor = ref("#00FF00"),
-  skLeftColor = ref("#FF0000"),
-  skRightColor = ref("#00FF00");
-
-const lastItemVisibility = ref("hidden"); // 验证View先声明碰撞检测再显示的场景，是否碰撞能正常生效
-const lastItemGone = ref(false); // 验证碰撞对象关联的View从ViewTree拿掉后是否触发Native端的自清理处理
-
-setTimeout(() => {
-  lastItemVisibility.value = "visible";
-}, 1000);
-setTimeout(() => {
-  lastItemGone.value = true;
-}, 5000);
-
-const onKeyDown = (ev) => {
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-  }
-  return true;
-};
-
-onMounted(() => {
-  const translate_sensor = createImpactTracer(
-    transEle1.value,
-    transEle2.value,
-    createImpactCallback(
-      () => {
-        tLeftColor.value = "#00FFFF";
-        tRightColor.value = "#FFFF00";
-      },
-      () => {
-        tLeftColor.value = "#FF0000";
-        tRightColor.value = "#00FF00";
-      }
-    )
-  );
-  sensors.push(translate_sensor);
-
-  const rotate_count = { count: 0 };
-  const rotate_sensor = createImpactTracer(
-    rotateEle1.value,
-    rotateEle2.value,
-    createImpactCallback(
-      () => {
-        rLeftColor.value = "#00FFFF";
-        rRightColor.value = "#FFFF00";
-      },
-      () => {
-        rotate_count.count++;
-        if (rotate_count.count >= 2) {
-          // 旋转有头尾连续两次碰撞
-          console.log("Finish collision of rotate element");
-        }
-        rLeftColor.value = "#FF0000";
-        rRightColor.value = "#00FF00";
-      }
-    )
-  );
-  sensors.push(rotate_sensor);
-
-  const rotate2_sensor = createImpactTracer(
-    rotateEle3.value,
-    rotateEle4.value,
-    createImpactCallback(
-      () => {
-        r2LeftColor.value = "#00FFFF";
-        r2RightColor.value = "#FFFF00";
-      },
-      () => {
-        r2LeftColor.value = "#FF0000";
-        r2RightColor.value = "#00FF00";
-      }
-    )
-  );
-  sensors.push(rotate2_sensor);
-
-  const scale_sensor = createImpactTracer(
-    scaleEle1.value,
-    scaleEle2.value,
-    createImpactCallback(
-      () => {
-        sLeftColor.value = "#00FFFF";
-        sRightColor.value = "#FFFF00";
-      },
-      () => {
-        sLeftColor.value = "#FF0000";
-        sRightColor.value = "#00FF00";
-      }
-    )
-  );
-  sensors.push(scale_sensor);
-
-  const skew_sensor = createImpactTracer(
-    skewEle1.value,
-    skewEle2.value,
-    createImpactCallback(
-      () => {
-        skLeftColor.value = "#00FFFF";
-        skRightColor.value = "#FFFF00";
-      },
-      () => {
-        skLeftColor.value = "#FF0000";
-        skRightColor.value = "#00FF00";
-      }
-    )
-  );
-  sensors.push(skew_sensor);
-});
-
-onBeforeUnmount(() => {
-  for (let i = 0; i < sensors.length; i++) {
-    sensors[i].Recycle();
-  }
-  sensors = [];
-});
-</script>
-
-<template>
-  <jsv-focus-block
-    autoFocus
-    :style="{
-      width: 1920,
-      height: 1080,
-      backgroundColor: '#007788',
-    }"
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      :style="{
-        textAlign: 'center',
-        fontSize: '30px',
-        lineHeight: '50px',
-        color: '#ffffff',
-        left: 100,
-        top: 20,
-        width: 1280 - 200,
-        height: 50,
-        backgroundColor: 'rgba(27,38,151,0.8)',
-      }"
-    >
-      原生端辅助的高效率碰撞检测处理
-    </div>
-    <div :style="{ top: 200, left: 100 }">
-      <div
-        ref="transEle1"
-        :style="{
-          left: 0,
-          width: 100,
-          height: 100,
-          backgroundColor: tLeftColor,
-          animation: 'toRight 5s',
-        }"
-      >
-        view1
-      </div>
-      <div :style="{ left: 300 }">
-        <div
-          ref="transEle2"
-          :style="{
-            width: 100,
-            height: 100,
-            backgroundColor: tRightColor,
-            animation: 'toLeft 5s',
-          }"
-        >
-          view2
-        </div>
-      </div>
-    </div>
-
-    <div :style="{ top: 500, left: 100 }">
-      <div
-        ref="rotateEle1"
-        :style="{
-          left: 0,
-          width: 20,
-          height: 150,
-          backgroundColor: rLeftColor,
-          animation: 'rotate1 5s',
-        }"
-      >
-        view1
-      </div>
-      <div
-        ref="rotateEle2"
-        :style="{
-          left: 100,
-          width: 20,
-          height: 150,
-          backgroundColor: rRightColor,
-          animation: 'rotate2 5s',
-        }"
-      >
-        view2
-      </div>
-    </div>
-
-    <div :style="{ top: 500, left: 500 }">
-      <div
-        :style="{
-          top: 50,
-          left: 0,
-          width: 150,
-          height: 150,
-          backgroundColor: 'rgba(255,255,255,0.5)',
-          animation: 'rotate3 5s',
-        }"
-      >
-        <div
-          ref="rotateEle3"
-          :style="{
-            left: (150 - 20) / 2,
-            width: 20,
-            height: 150,
-            backgroundColor: r2LeftColor,
-          }"
-        >
-          view1
-        </div>
-      </div>
-      <div
-        :style="{
-          top: 0,
-          left: 100,
-          width: 150,
-          height: 150,
-          backgroundColor: 'rgba(255,255,255,0.5)',
-          animation: 'rotate4 5s',
-        }"
-      >
-        <div
-          ref="rotateEle4"
-          :style="{
-            left: 0,
-            top: (150 - 20) / 2,
-            width: 150,
-            height: 20,
-            backgroundColor: r2RightColor,
-          }"
-        >
-          view2
-        </div>
-      </div>
-    </div>
-
-    <div :style="{ top: 200, left: 500 }">
-      <div
-        ref="scaleEle1"
-        :style="{
-          left: 100,
-          width: 100,
-          height: 100,
-          backgroundColor: sLeftColor,
-          animation: 'scale1 5s',
-        }"
-      >
-        view1
-      </div>
-      <div
-        ref="scaleEle2"
-        :style="{
-          left: 250,
-          width: 100,
-          height: 100,
-          backgroundColor: sRightColor,
-          animation: 'scale2 5s',
-        }"
-      >
-        view2
-      </div>
-    </div>
-
-    <div
-      v-if="!lastItemGone"
-      :style="{
-        top: 500,
-        left: 800,
-        visibility: lastItemVisibility,
-      }"
-    >
-      <div
-        ref="skewEle1"
-        :style="{
-          left: 100,
-          width: 100,
-          height: 100,
-          backgroundColor: skLeftColor,
-          animation: 'skew1 5s',
-        }"
-      >
-        viewA
-      </div>
-      <div
-        ref="skewEle2"
-        :style="{
-          left: 300,
-          width: 100,
-          height: 100,
-          backgroundColor: skRightColor,
-          animation: 'skew2 5s',
-        }"
-      >
-        viewB
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-@keyframes toLeft {
-  from {
-    transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
-  }
-  to {
-    transform: translate3d(-300px, 0, 0) scale3d(1.5, 1.5, 1);
-  }
-}
-
-@keyframes toRight {
-  from {
-    transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
-  }
-  to {
-    transform: translate3d(300px, 0, 0) scale3d(1.5, 1.5, 1);
-  }
-}
-
-@keyframes rotate1 {
-  from {
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-  to {
-    transform: rotate3d(0, 0, 1, 360deg);
-  }
-}
-
-/* webview中 旋转轴为(0,0,-1)会导致getComputeStyle中的transform为单位矩阵*/
-@keyframes rotate2 {
-  from {
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-  to {
-    transform: rotate3d(0, 0, 1, -360deg);
-  }
-}
-
-@keyframes scale1 {
-  0% {
-    transform: scale3d(1, 1, 1);
-  }
-  50% {
-    transform: scale3d(2, 2, 1);
-  }
-  100% {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes scale2 {
-  0% {
-    transform: scale3d(1, 1, 1);
-  }
-  50% {
-    transform: scale3d(2, 2, 1);
-  }
-  100% {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes skew1 {
-  0% {
-    transform: skew(0, 0);
-  }
-  50% {
-    transform: skew(-60deg, 0);
-  }
-  100% {
-    transform: skew(0, 0);
-  }
-}
-
-@keyframes skew2 {
-  0% {
-    transform: skew(0, 0);
-  }
-  50% {
-    transform: skew(60deg, 0);
-  }
-  100% {
-    transform: skew(0, 0);
-  }
-}
-
-@keyframes rotate3 {
-  from {
-    transform: rotate3d(0, 0, 1, 0deg);
-    transform-origin: center top;
-  }
-  to {
-    transform: rotate3d(0, 0, 1, -360deg);
-    transform-origin: center top;
-  }
-}
-
-@keyframes rotate4 {
-  from {
-    transform: rotate3d(0, 0, 1, 0deg);
-    transform-origin: center center;
-  }
-  to {
-    transform: rotate3d(0, 0, 1, -360deg);
-    transform-origin: center center;
-  }
-}
-</style>