@shijiu/jsview-vue-samples 2.2.201 → 2.2.373

package/TextureAnimation/App.vue

@@ -3,12 +3,13 @@ import {
   jJsvRuntimeBridge,
   getKeyFramesGroup,
   JsvTextureAnim,
+  DefaultKeyCodeMap,
 } from "jsview";
-import img from "./assets/php2.png";
+import img from "./assets/borderOpacity.png";
 import swipLight from "./assets/swipLight.png";
-import { onMounted, onBeforeUnmount } from "vue";
+import { onMounted, onBeforeUnmount, shallowRef } from "vue";
 import { useRouter } from "vue-router";
-const router = useRouter()
+const router = useRouter();
 const styleShell = getKeyFramesGroup();
 const translateTransform = "translate3d(50%, 50%, 0)";
 const rotateTransform = "rotate3d(1,1,1, 30deg)";
@@ -17,6 +18,9 @@ const borderRadius = 40;
 const repeat = -1;
 const duration = 3000;
 
+let sTranslateTextureRef = shallowRef(null);
+let sTranslateTextureTrigger = shallowRef(1);
+
 const translateAnim =
   "{from {transform: translate3d(-100%, -50%, 0);} to {transform: translate3d(100%, 50%, 0);}}";
 const rotateAnim =
@@ -26,183 +30,275 @@ const scaleAnim =
 const swipAnim =
   "{from {transform: translate3d(-100%, 0, 0);} to {transform: translate3d(100%, 0, 0);}}";
 
-styleShell.insertRule(
-  "@keyframes texture-anim-translate " + translateAnim
-);
-styleShell.insertRule(
-  "@keyframes texture-anim-rotate " + rotateAnim
-);
-styleShell.insertRule(
-  "@keyframes texture-anim-scale " + scaleAnim
-);
+styleShell.insertRule("@keyframes texture-anim-translate " + translateAnim);
+styleShell.insertRule("@keyframes texture-anim-rotate " + rotateAnim);
+styleShell.insertRule("@keyframes texture-anim-scale " + scaleAnim);
 
 const onKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
     router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  } else if (ev.keyCode == DefaultKeyCodeMap.Ok) {
+    sTranslateTextureRef.value.start();
+    sTranslateTextureTrigger.value = sTranslateTextureTrigger.value + 1;
   }
   return true;
-}
+};
 
 onMounted(() => {
   jJsvRuntimeBridge.notifyPageLoaded();
-})
+});
 
 onBeforeUnmount(() => {
   styleShell.removeRule("texture-anim-translate");
   styleShell.removeRule("texture-anim-rotate");
   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
-          }s linear infinite`,
-      }" />
+  <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
+        ref="sTranslateTextureRef"
+        :src="img"
+        :width="300"
+        :height="150"
+        :animation="translateAnim"
+        :duration="duration"
+        :transform="null"
+        :borderRadius="borderRadius"
+        :autoStart="true"
+      ></jsv-texture-anim>
+      <div
+        :key="sTranslateTextureTrigger"
+        :style="{
+          width: 300,
+          height: 150,
+          backgroundColor: 'rgba(255,0,0,0.5)',
+          transform: null,
+          animation: `texture-anim-translate ${duration / 1000}s linear 1`,
+        }"
+      />
     </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>
-</template>
+</template>

package/TextureAnimation/App2.vue

@@ -6,9 +6,9 @@ import {
   DECORATE_NINEPATCH_ALPHA_MIX,
   JsvTextureStoreApi,
 } from "jsview";
-import img from "./assets/light.png";
-import img2 from "./assets/light2.png";
-import mask from "./assets/mask.png";
+import img from "./assets/blackWhiteTurntable.png";
+import img2 from "./assets/light.png";
+import mask from "./assets/circleHaloMask.png";
 import { getDataUrl } from "../CommonUtils/ResourceData";
 //无网络环境下使用
 const DemoResourceBase = getDataUrl();
@@ -25,17 +25,20 @@ const top = ref(80);
 const rotateAnimation =
   "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";
 
+/**
+ * 创建右图的边缘遮罩，可调节边框的粗细:circleLineWidth
+ */
 // 设置设定模拟绘制.9图
 let canvasRef;
 let sourceId = shallowRef("");
-let sampleImageWidth = 90;
+let sampleImageWidth = 150;
 canvasRef = JsvTextureStoreApi.canvasTexture(
   sampleImageWidth,
   sampleImageWidth
 ); // 创建画布
 
 let circleInnerDiameter = 70; // 环形内直径, 为所要包括图形的borderRadius的一倍
-let circleLineWidth = 6; // 线宽
+let circleLineWidth = 2; // 线宽
 let circleRadius = Math.floor(circleInnerDiameter / 2 + circleLineWidth / 2); // 绘制线是圆圈的轨迹中线
 let customPath = canvasRef.circlePath(
   Math.floor(sampleImageWidth / 2),
@@ -43,9 +46,10 @@ let customPath = canvasRef.circlePath(
   circleRadius
 ); // 创建圆环绘制路径，圆形在画布的中心点位置
 canvasRef.drawColor("rgba(0,0,0,0)"); // 画布绘制半透明底色
-customPath.stroke(circleLineWidth, "#FF00FF7F"); // 以给定线宽绘制圆环
+customPath.stroke(circleLineWidth, "#000000FF"); // 以给定线宽绘制圆环
 sourceId = canvasRef.commit(); // texture和div的textureStore绑定
 
+// 通过canvas创建出来的 texture 创建NinePatch方式的蒙版
 const ninePatchDecorator1 = {
   type: DECORATE_NINEPATCH_ALPHA_MIX,
   url: `jsvtexturestore://${sourceId}`,
@@ -55,20 +59,39 @@ const ninePatchDecorator1 = {
   animTime: 0.5,
 };
 
+/**
+ * 导入右图的边缘光晕部分的遮罩
+ */
+// 外发光的圈的图片信息
+const originPngInfo = {
+  size: 160, // 图片尺寸
+  radius: 56, // 图片中的圆的圆内半径
+};
+const rectRadius = Math.floor(circleInnerDiameter / 2 + circleLineWidth / 2); // 光环在描边之外，留出描边的宽度
 const ninePatchDecorator2 = {
   type: DECORATE_NINEPATCH_ALPHA_MIX,
   url: `url(${mask})`,
-  imageWidth: 86,
+  imageWidth: originPngInfo.size,
+  imageDspWidth: Math.floor(
+    (rectRadius / originPngInfo.radius) * originPngInfo.size
+  ),
   centerWidth: 2,
-  borderOutset: 0,
+  borderOutset: Math.floor(originPngInfo.size / 2 - originPngInfo.radius),
   animTime: 0.5,
 };
+
+/**
+ * 设置敏感转盘的绘制覆盖区域
+ */
 //注意texture的尺寸需要兼顾最大的view
 const texCoord = {
-  width: 600,
-  height: 600,
+  width: 400,
+  height: 400,
 };
 
+/**
+ * 其他回调处理
+ */
 const onKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
@@ -93,6 +116,7 @@ onBeforeUnmount(() => {
     :style="{
       width: 1280,
       height: 720,
+      backgroundColor: 'rgba(0,0,0,0.7)',
     }"
   >
     <div
@@ -119,8 +143,26 @@ onBeforeUnmount(() => {
           height: height,
           backgroundColor: 'rgba(0, 255, 0, 0.7)',
           borderRadius: Math.floor(circleInnerDiameter / 2),
+          fontSize: 30,
+          lineHeight: height,
+          textAlign: 'center',
         }"
-      />
+      >
+        {{ "带光晕的焦点框" }}
+      </div>
+      <jsv-texture-anim
+        :src="img"
+        :left="left"
+        :top="top"
+        :width="width"
+        :height="height"
+        :texCoord="texCoord"
+        :animation="rotateAnimation"
+        :duration="5000"
+        :repeat="-1"
+        :autoStart="true"
+        :decorate="ninePatchDecorator2"
+      ></jsv-texture-anim>
       <jsv-texture-anim
         :src="img"
         :left="left"
@@ -129,13 +171,23 @@ onBeforeUnmount(() => {
         :height="height"
         :texCoord="texCoord"
         :animation="rotateAnimation"
-        :duration="2000"
+        :duration="5000"
         :repeat="-1"
         :autoStart="true"
         :decorate="ninePatchDecorator1"
       ></jsv-texture-anim>
     </div>
     <div>
+      <!-- <div
+        :style="{
+          left: left + 500,
+          top: top,
+          width: width,
+          height: height,
+          backgroundColor: 'rgba(0, 255, 0, 0.7)',
+          borderRadius: rectRadius,
+        }"
+      /> -->
       <jsv-texture-anim
         :src="img2"
         :left="left + 500"
@@ -144,10 +196,10 @@ onBeforeUnmount(() => {
         :height="height"
         :texCoord="texCoord"
         :animation="rotateAnimation"
-        :duration="2000"
+        :duration="3000"
         :repeat="-1"
         :autoStart="true"
-        :decorate="ninePatchDecorator2"
+        :decorate="ninePatchDecorator1"
       ></jsv-texture-anim>
     </div>
   </jsv-focus-block>