@shijiu/jsview-vue-samples 2.0.1073 → 2.0.1106

package/TextureAnimation/App.vue

@@ -1,4 +1,4 @@
-<script>
+<script setup>
 import {
   jJsvRuntimeBridge,
   getKeyFramesGroup,
@@ -6,314 +6,202 @@ import {
 } from "jsview";
 import img from "./assets/php2.png";
 import swipLight from "./assets/swipLight.png";
+import { onMounted, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter()
+const styleShell = getKeyFramesGroup();
+const translateTransform = "translate3d(50%, 50%, 0)";
+const rotateTransform = "rotate3d(1,1,1, 30deg)";
+const scaleTransform = "scale3d(0.5, 1.5, 1.0)";
+const borderRadius = 40;
+const repeat = -1;
+const duration = 3000;
 
-export default {
-  components: {
-    JsvTextureAnim,
-  },
-  setup() {
-    let styleShell = getKeyFramesGroup();
+const translateAnim =
+  "{from {transform: translate3d(-100%, -50%, 0);} to {transform: translate3d(100%, 50%, 0);}}";
+const rotateAnim =
+  "{from {transform: rotate3d(1,-1,1,0);} to {transform: rotate3d(1,-1,1,360deg);}}";
+const scaleAnim =
+  "{from {transform: scale3d(0.5, 0.5, 1);} to {transform: scale3d(1.5, 1.5, 1);}}";
+const swipAnim =
+  "{from {transform: translate3d(-100%, 0, 0);} to {transform: translate3d(100%, 0, 0);}}";
 
-    const translateAnim =
-      "{from {transform: translate3d(-100%, -50%, 0);} to {transform: translate3d(100%, 50%, 0);}}";
-    const rotateAnim =
-      "{from {transform: rotate3d(1,-1,1,0);} to {transform: rotate3d(1,-1,1,360deg);}}";
-    const scaleAnim =
-      "{from {transform: scale3d(0.5, 0.5, 1);} to {transform: scale3d(1.5, 1.5, 1);}}";
+styleShell.insertRule(
+  "@keyframes texture-anim-translate " + translateAnim
+);
+styleShell.insertRule(
+  "@keyframes texture-anim-rotate " + rotateAnim
+);
+styleShell.insertRule(
+  "@keyframes texture-anim-scale " + scaleAnim
+);
 
-    const swipAnim =
-      "{from {transform: translate3d(-100%, 0, 0);} to {transform: translate3d(100%, 0, 0);}}";
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+}
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+})
+
+onBeforeUnmount(() => {
+  styleShell.removeRule("texture-anim-translate");
+  styleShell.removeRule("texture-anim-rotate");
+  styleShell.removeRule("texture-anim-scale");
+})
 
-    return {
-      styleShell,
-      img,
-      borderRadius: 40,
-      repeat: -1,
-      duration: 3000,
-      translateAnim,
-      rotateAnim,
-      scaleAnim,
-      swipAnim,
-      translateTransform: "translate3d(50%, 50%, 0)",
-      rotateTransform: "rotate3d(1,1,1, 30deg)",
-      scaleTransform: "scale3d(0.5, 1.5, 1.0)",
-      swipLight,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      // 8:Backspace, 27:Escape, 10000:盒子返回键
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      }
-      return true;
-    },
-  },
-  created() {
-    this.styleShell.insertRule(
-      "@keyframes texture-anim-translate " + this.translateAnim
-    );
-    this.styleShell.insertRule(
-      "@keyframes texture-anim-rotate " + this.rotateAnim
-    );
-    this.styleShell.insertRule(
-      "@keyframes texture-anim-scale " + this.scaleAnim
-    );
-  },
-  mounted() {
-    jJsvRuntimeBridge.notifyPageLoaded();
-  },
-  beforeUnmount() {
-    this.styleShell.removeRule("texture-anim-translate");
-    this.styleShell.removeRule("texture-anim-rotate");
-    this.styleShell.removeRule("texture-anim-scale");
-  },
-};
 </script>
 <template>
-  <jsv-focus-block
-    autoFocus
-    :onKeyDown="onKeyDown"
-    :style="{
-      width: 1920,
-      height: 1080,
-      backgroundColor: '#007788',
-    }"
-  >
-    <div
-      :style="{
-        left: 100,
-        top: 20,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        :src="img"
-        :width="300"
-        :height="150"
-        :animation="translateAnim"
-        :duration="duration"
-        :transform="null"
-        :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
-      ></jsv-texture-anim>
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-          transform: null,
-          animation: `texture-anim-translate ${
-            duration / 1000
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown" :style="{
+    width: 1920,
+    height: 1080,
+    backgroundColor: '#007788',
+  }">
+    <div :style="{
+      left: 100,
+      top: 20,
+    }">
+      <div :style="{
+        width: 300,
+        height: 150,
+        backgroundColor: 'rgba(0,255,0,0.5)',
+      }" />
+      <jsv-texture-anim :src="img" :width="300" :height="150" :animation="translateAnim" :duration="duration"
+        :transform="null" :borderRadius="borderRadius" :repeat="repeat" :autoStart="true"></jsv-texture-anim>
+      <div :style="{
+        width: 300,
+        height: 150,
+        backgroundColor: 'rgba(255,0,0,0.5)',
+        transform: null,
+        animation: `texture-anim-translate ${duration / 1000
           }s linear infinite`,
-        }"
-      />
+      }" />
     </div>
 
-    <div
-      :style="{
-        left: 100,
-        top: 230,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        :src="img"
-        :width="300"
-        :height="150"
-        :animation="rotateAnim"
-        :duration="duration"
-        :transform="null"
-        :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
-      ></jsv-texture-anim>
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-          transform: null,
-          animation: `texture-anim-rotate ${duration / 1000}s linear infinite`,
-        }"
-      />
+    <div :style="{
+      left: 100,
+      top: 230,
+    }">
+      <div :style="{
+        width: 300,
+        height: 150,
+        backgroundColor: 'rgba(0,255,0,0.5)',
+      }" />
+      <jsv-texture-anim :src="img" :width="300" :height="150" :animation="rotateAnim" :duration="duration"
+        :transform="null" :borderRadius="borderRadius" :repeat="repeat" :autoStart="true"></jsv-texture-anim>
+      <div :style="{
+        width: 300,
+        height: 150,
+        backgroundColor: 'rgba(255,0,0,0.5)',
+        transform: null,
+        animation: `texture-anim-rotate ${duration / 1000}s linear infinite`,
+      }" />
     </div>
 
-    <div
-      :style="{
-        left: 100,
-        top: 460,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        :src="img"
-        :width="300"
-        :height="150"
-        :animation="scaleAnim"
-        :duration="duration"
-        :transform="null"
-        :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
-      ></jsv-texture-anim>
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-          transform: null,
-          animation: `texture-anim-scale ${duration / 1000}s linear infinite`,
-        }"
-      />
+    <div :style="{
+      left: 100,
+      top: 460,
+    }">
+      <div :style="{
+        width: 300,
+        height: 150,
+        backgroundColor: 'rgba(0,255,0,0.5)',
+      }" />
+      <jsv-texture-anim :src="img" :width="300" :height="150" :animation="scaleAnim" :duration="duration"
+        :transform="null" :borderRadius="borderRadius" :repeat="repeat" :autoStart="true"></jsv-texture-anim>
+      <div :style="{
+        width: 300,
+        height: 150,
+        backgroundColor: 'rgba(255,0,0,0.5)',
+        transform: null,
+        animation: `texture-anim-scale ${duration / 1000}s linear infinite`,
+      }" />
     </div>
     <!-- transform sample -->
-    <div
-      :style="{
-        left: 500,
-        top: 20,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        :src="img"
-        :width="300"
-        :height="150"
-        :transform="translateTransform"
-        :borderRadius="borderRadius"
-      ></jsv-texture-anim>
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-          transform: translateTransform,
-        }"
-      />
+    <div :style="{
+      left: 500,
+      top: 20,
+    }">
+      <div :style="{
+        width: 300,
+        height: 150,
+        backgroundColor: 'rgba(0,255,0,0.5)',
+      }" />
+      <jsv-texture-anim :src="img" :width="300" :height="150" :transform="translateTransform"
+        :borderRadius="borderRadius"></jsv-texture-anim>
+      <div :style="{
+        width: 300,
+        height: 150,
+        backgroundColor: 'rgba(255,0,0,0.5)',
+        transform: translateTransform,
+      }" />
     </div>
 
-    <div
-      :style="{
-        left: 500,
-        top: 230,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        :src="img"
-        :width="300"
-        :height="150"
-        :transform="rotateTransform"
-        :borderRadius="borderRadius"
-      ></jsv-texture-anim>
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-          transform: rotateTransform,
-        }"
-      />
+    <div :style="{
+      left: 500,
+      top: 230,
+    }">
+      <div :style="{
+        width: 300,
+        height: 150,
+        backgroundColor: 'rgba(0,255,0,0.5)',
+      }" />
+      <jsv-texture-anim :src="img" :width="300" :height="150" :transform="rotateTransform"
+        :borderRadius="borderRadius"></jsv-texture-anim>
+      <div :style="{
+        width: 300,
+        height: 150,
+        backgroundColor: 'rgba(255,0,0,0.5)',
+        transform: rotateTransform,
+      }" />
     </div>
 
-    <div
-      :style="{
-        left: 500,
-        top: 460,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        :src="img"
-        :width="300"
-        :height="150"
-        :transform="scaleTransform"
-        :borderRadius="borderRadius"
-      ></jsv-texture-anim>
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-          transform: scaleTransform,
-        }"
-      />
+    <div :style="{
+      left: 500,
+      top: 460,
+    }">
+      <div :style="{
+        width: 300,
+        height: 150,
+        backgroundColor: 'rgba(0,255,0,0.5)',
+      }" />
+      <jsv-texture-anim :src="img" :width="300" :height="150" :transform="scaleTransform"
+        :borderRadius="borderRadius"></jsv-texture-anim>
+      <div :style="{
+        width: 300,
+        height: 150,
+        backgroundColor: 'rgba(255,0,0,0.5)',
+        transform: scaleTransform,
+      }" />
     </div>
     <!-- swip light -->
-    <div
-      :style="{
-        left: 850,
-        top: 460,
-      }"
-    >
-      <div
-        :style="{
-          width: 300,
-          height: 150,
-          backgroundColor: 'rgba(0,255,0,0.5)',
-        }"
-      />
-      <jsv-texture-anim
-        :src="swipLight"
-        :animation="swipAnim"
-        :width="300"
-        :height="150"
-        :duration="duration"
-        transform="scale3d(0.5, 1, 1) rotate3d(0,0,1, 30deg)"
-        :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
-      ></jsv-texture-anim>
+    <div :style="{
+      left: 850,
+      top: 460,
+    }">
+      <div :style="{
+        width: 300,
+        height: 150,
+        backgroundColor: 'rgba(0,255,0,0.5)',
+      }" />
+      <jsv-texture-anim :src="swipLight" :animation="swipAnim" :width="300" :height="150" :duration="duration"
+        transform="scale3d(0.5, 1, 1) rotate3d(0,0,1, 30deg)" :borderRadius="borderRadius" :repeat="repeat"
+        :autoStart="true"></jsv-texture-anim>
     </div>
 
     <!-- 说明文字 -->
-    <div
-      :style="{
-        left: 100,
-        top: 620,
-        width: 1920,
-        height: 200,
-        fontSize: 30,
-        color: '#000000',
-      }"
-    >
+    <div :style="{
+      left: 100,
+      top: 620,
+      width: 1920,
+      height: 200,
+      fontSize: 30,
+      color: '#000000',
+    }">
       {{ "1. 注意圆角\n2. 红色半透明的view为标准, 图片的动画需要与其一致" }}
     </div>
   </jsv-focus-block>

package/TextureAnimation/App2.vue

@@ -1,13 +1,9 @@
 <script setup>
-import { ref, reactive } from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
 import {
-  jJsvRuntimeBridge,
-  getKeyFramesGroup,
   JsvTextureAnim,
-  TexAlignAnchor,
   DECORATE_NINEPATCH_ALPHA_MIX,
-  DECORATE_BORDER_RADIUS,
 } from "jsview";
 import img from "./assets/light.png";
 import img2 from "./assets/light2.png";

package/ThrowMoveDemo/AccelerateDemo.vue

@@ -1,92 +1,61 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2021-10-20 18:27:25
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 14:11:05
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-05 
  * @Description: file content
 -->
-<script>
+<script setup>
 import { JsvActorMoveControl, JsvActorMove } from "jsview";
-export default {
-  components: {
-    JsvActorMove,
-  },
-  props: {
-    name: String,
-  },
-  data() {
-    return {
-      direction: 1,
-    };
-  },
-  computed: {
-    directionDetail() {
-      return this.direction > 0 ? "上" : "下";
-    },
-  },
-  setup() {
-    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+import { shallowRef, computed } from "vue"
+const props = defineProps({
+  name: String,
+})
+let direction = shallowRef(1)
+let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
+let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+let focusNode = shallowRef(null)
 
-    return {
-      throwControl,
-      moveControl,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      if (ev.keyCode === 13) {
-        let preDirection = this.direction;
-        this.direction = -this.direction;
-        this.throwControl.throwAlongY(
-          0,
-          750 * preDirection,
-          {
-            type: "catch",
-            position: 200 * preDirection,
-            direction: preDirection,
-          },
-          (x, y) => {
-            console.log(`Throw end with x=${x} y=${y}`);
-          }
-        );
-        return true;
+const directionDetail = computed(() => {
+  return direction.value > 0 ? "上" : "下";
+})
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode === 13) {
+    let preDirection = direction.value;
+    direction.value = -direction.value;
+    throwControl.throwAlongY(
+      0,
+      750 * preDirection,
+      {
+        type: "catch",
+        position: 200 * preDirection,
+        direction: preDirection,
+      },
+      (x, y) => {
+        console.log(`Throw end with x=${x} y=${y}`);
       }
-      return false;
-    },
-  },
-};
+    );
+    return true;
+  }
+  return false;
+}
 </script>
 
 <template>
-  <jsv-focus-block
-    ref="focusNode"
-    :name="name"
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      key="sample1"
-      class="detail-font"
-      :style="{ top: 150, left: 425, width: 430, height: 40 }"
-    >
+  <jsv-focus-block ref="focusNode" :name="props.name" autoFocus :onAction="{
+    onKeyDown: onKeyDown,
+  }">
+    <div key="sample1" class="detail-font" :style="{ top: 150, left: 425, width: 430, height: 40 }">
       {{ `向${directionDetail}加速` }}
     </div>
-    <div
-      key="DirectText"
-      class="font"
-      :style="{ top: 250, left: 425, width: 430, height: 40 }"
-    >
+    <div key="DirectText" class="font" :style="{ top: 250, left: 425, width: 430, height: 40 }">
       {{ `当前方向:${directionDetail}` }}
     </div>
     <div :style="{ top: 590, left: 625 }">
       <jsv-actor-move key="move" :control="moveControl">
         <jsv-actor-move key="throw" :control="throwControl">
-          <div
-            :style="{ backgroundColor: '#FF0000', width: 30, height: 30 }"
-          ></div>
+          <div :style="{ backgroundColor: '#FF0000', width: 30, height: 30 }"></div>
         </jsv-actor-move>
       </jsv-actor-move>
     </div>