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

package/DemoForOperator/TabContentVertical/TabContent/ViewSwiper.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { onMounted, inject, ref, watch } from "vue";
+
+const props = defineProps({
+  onEdge: Function,
+  name: String,
+  layout: Object,
+  dataLoader: Function, // (tabId) => Promise
+  animDuration: { type: Number, default: 200 },
+  onFocus: Function,
+  onBlur: Function,
+});
+
+const globalInfo = inject("globalInfo");
+const animState = inject("animState");
+
+const page0Show = ref(false);
+let page0Data = null;
+const page0Anim = ref({ anim: null, onend: null });
+const appSwiper_onFocus = () => {
+  console.log("testtest swiper on focus")
+  props.onFocus();
+};
+const appSwiper_onBlur = () => {
+  console.log("testtest swiper on blur")
+  props.onBlur();
+};
+
+const appSwiper_tabIdWatcher = (newValue, oldValue) => {
+  let direction = newValue > oldValue ? "left" : "right";
+  page0Show.value = false;
+  page0Data = null;
+  page0Anim.value = ref({ anim: null, onend: null });
+  props.dataLoader(newValue).then((data) => {
+    console.log("testtest swiper data", data);
+    if (oldValue > -1) {
+      animState.value = 1;
+    }
+    page0Anim.value = {
+      anim:
+        oldValue != -1
+          ? `app-swiper-${direction}-slide-in ${
+              props.animDuration / 1000
+            }s cubic-bezier(0.05, 0.55, 0.13, 0.78) 1`
+          : null,
+      onend: () => {
+        animState.value = 0;
+      },
+    };
+    page0Data = data;
+    page0Show.value = true;
+  });
+};
+
+watch(
+  () => globalInfo.updateTabId,
+  (newValue, oldValue) => {
+    console.log("ccht updateTabId changed", globalInfo.updateTabId);
+    appSwiper_tabIdWatcher(newValue, oldValue);
+  }
+);
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    ref="focusNode"
+    :onAction="{
+      onFocus: appSwiper_onFocus,
+      onBlur: appSwiper_onBlur,
+    }"
+  >
+    <div
+      id="page0"
+      :style="{
+        left: layout.left,
+        top: layout.top,
+        width: layout.width,
+        height: layout.height,
+        animation: page0Anim.anim,
+        animationFillMode: 'forwards',
+      }"
+      @animationend="page0Anim.onend"
+    >
+      <slot v-if="page0Show" :data="page0Data" :onEdge="onEdge"></slot>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style>
+@keyframes app-swiper-left-slide-in {
+  from {
+    transform: translate3d(0px, 180px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+    /* animation-timing-function: cubic-bezier(0.05, 0.55, 0.13, 0.78); */
+  }
+}
+
+@keyframes app-swiper-right-slide-in {
+  from {
+    transform: translate3d(0px, -180px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+    /* animation-timing-function: cubic-bezier(0.05, 0.55, 0.13, 0.78); */
+  }
+}
+</style>

package/DemoForOperator/TabContentVertical/testData.js

@@ -0,0 +1,76 @@
+// 导入所有图片
+import movieTicket from './assets/movie_ticket.png';
+import varietyShow from './assets/variety_show.png';
+import childrenScience from './assets/children_science.png';
+import tvDrama from './assets/tv_drama.png';
+import documentary from './assets/documentary.png';
+import myAccount from './assets/my_account.png';
+import free from './assets/free.png';
+import opera from './assets/opera.png';
+import vip from './assets/vip.png';
+import sports from './assets/sports.png';
+import homeSelected from './assets/home_selected.png';
+import game from './assets/game.png';
+
+export const testData = [
+  {
+    "indexId": 0,
+    "itemTitle": "电影票",
+    "icon": movieTicket
+  },
+  {
+    "indexId": 1,
+    "itemTitle": "综艺",
+    "icon": varietyShow
+  },
+  {
+    "indexId": 2,
+    "itemTitle": "少儿科普",
+    "icon": childrenScience
+  },
+  {
+    "indexId": 3,
+    "itemTitle": "电视剧",
+    "icon": tvDrama
+  },
+  {
+    "indexId": 4,
+    "itemTitle": "纪录片",
+    "icon": documentary
+  },
+  {
+    "indexId": 5,
+    "itemTitle": "我的",
+    "icon": myAccount,
+  },
+  {
+    "indexId": 6,
+    "itemTitle": "免费",
+    "icon": free,
+  },
+  {
+    "indexId": 7,
+    "itemTitle": "戏曲",
+    "icon": opera,
+  },
+  {
+    "indexId": 8,
+    "itemTitle": "VIP",
+    "icon": vip,
+  },
+  {
+    "indexId": 9,
+    "itemTitle": "体育",
+    "icon": sports,
+  },
+  {
+    "indexId": 10,
+    "itemTitle": "首页",
+    "icon": homeSelected,
+  },
+  {
+    "indexId": 11,
+    "itemTitle": "游戏",
+    "icon": game,
+  },
+];

package/DemoForOperator/Vortex/App.vue

@@ -0,0 +1,78 @@
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#f5f57d' }"></div>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+  >
+    <Vortex
+      ref="cGenieRef"
+      :layout="{
+        left: 120,
+        top: 50,
+        width: width,
+        height: height,
+      }"
+      :time="1"
+      :onAnimEnd="onAnimEnd"
+      :initShow="true"
+    >
+      <img
+        :src="`url(${imageUrl})`"
+        :style="{
+          width: width,
+          height: height,
+        }"
+        @load="onImgLoaded"
+      />
+      <div
+        :style="{
+          width: 1024,
+          height: 100,
+          backgroundColor: '#ffffff44',
+        }"
+      ></div>
+      <div
+        :style="{
+          width: width,
+          height: height,
+          fontSize: 50,
+          color: '#fff',
+          textAlign: 'center',
+        }"
+      >
+        按OK键出场/入场
+      </div>
+    </Vortex>
+  </jsv-focus-block>
+</template>
+<script setup>
+import Vortex from "./Vortex/Vortex.vue";
+import { shallowRef } from "vue";
+
+const cGenieRef = shallowRef();
+const position = { x: -80, y: 600 };
+const width = 1024;
+const height = 576;
+const imageUrl =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Genie/App/element_228542_icon_20230610184253.jpg";
+
+let imgLoaded = false;
+function onImgLoaded() {
+  imgLoaded = true;
+}
+const onAnimEnd = () => {
+  console.log("anim end");
+};
+
+function onKeyDown(ev) {
+  if (ev.keyCode == 13) {
+    if (imgLoaded) {
+      cGenieRef.value.switch();
+    }
+    return true;
+  }
+  return false;
+}
+</script>

package/DemoForOperator/Vortex/Vortex/Vortex.vue

@@ -0,0 +1,180 @@
+<template>
+  <div
+    :style="{
+      left: layout.left,
+      top: layout.top,
+    }"
+  >
+    <jsv-frag-shader-view
+      v-if="showFbo"
+      :key="keyCount"
+      ref="shaderViewRef"
+      :style="{
+        width: layout.width,
+        height: layout.height,
+      }"
+      :duration="shaderSetting.duration"
+      :shaderStr="shaderSetting.shader"
+      :autoplay="true"
+      :textures="shaderSetting.textures"
+      :onEnd="onAnimEnd"
+    ></jsv-frag-shader-view>
+
+    <div
+      v-if="!showOrigin"
+      :style="{
+        width: 1,
+        height: 1,
+        overflow: 'hidden',
+      }"
+    >
+      <div
+        ref="slotRootRef"
+        :style="{
+          width: layout.width,
+          height: layout.height,
+        }"
+      >
+        <slot></slot>
+      </div>
+    </div>
+    <div
+      v-else
+      ref="slotRootRef"
+      :style="{
+        width: layout.width,
+        height: layout.height,
+      }"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * @slot 默认插槽 - 用于放置需要进行漩涡动画的内容
+ */
+import vortexOutShader from "./vortexOut.glsl?raw";
+import vortexInShader from "./vortexIn.glsl?raw";
+
+import { onMounted, onUnmounted, shallowRef, ref, computed } from "vue";
+import {
+  JsvFragShaderView,
+  getKeyFramesGroup,
+  JsvTextureStoreApi,
+} from "jsview";
+
+const props = defineProps({
+  /**
+   * @type {Object} 布局配置对象
+   * @property {string} left - 组件左侧定位（如 '10px'）
+   * @property {string} top - 组件顶部定位（如 '20px'）
+   * @property {string} width - 组件宽度（如 '300px'）
+   * @property {string} height - 组件高度（如 '200px'）
+   */
+  layout: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * @type {number} 动画持续时间（单位：秒）
+   * @default 1
+   */
+  duration: {
+    type: Number,
+    default: 1,
+  },
+  /**
+   * @type {boolean} 初始显示状态
+   * @default true
+   */
+  initShow: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @type {Function} 动画结束回调函数
+   */
+  onAnimEnd: {
+    type: Function,
+  }
+});
+
+const showOrigin = shallowRef(props.initShow);
+const showFbo = shallowRef(false);
+const slotRootRef = shallowRef();
+const keyCount = ref(0);
+const shaderViewRef = ref();
+let state = props.initShow ? 1 : 0;
+
+let shaderSetting = {
+  name: "vortex",
+  shader: "",
+  uniforms: [],
+  textures: [
+    {
+      name: "iChannel0",
+      resource: "",
+    },
+  ],
+  duration: Math.round(props.duration * 1000),
+};
+let _onEnd = null;
+
+function animOut() {
+  shaderSetting.shader = vortexOutShader;
+  _onEnd = () => {
+    showOrigin.value = false;
+  };
+  capture();
+}
+
+function animIn() {
+  shaderSetting.shader = vortexInShader;
+  _onEnd = () => {
+    showOrigin.value = true;
+  };
+  capture();
+}
+
+function onAnimEnd() {
+  showFbo.value = false;
+  _onEnd();
+  props.onAnimEnd?.();
+}
+
+function capture() {
+  JsvTextureStoreApi.capture2Texture(
+    slotRootRef.value,
+    (textureName, autoRecycle, w, h) => {
+      shaderSetting.textures[0].resource = `jsvtexturestore://${textureName}`;
+
+      if (autoRecycle) {
+        // 已经是设置了texture的自动回收，所以不再需要主动调用 JsvTextureStoreApi.deleteTexture 来释放内存
+      }
+      showOrigin.value = false;
+      ++keyCount.value;
+      showFbo.value = true;
+    },
+    true // 自动回收, 不填也行，默认为true
+  );
+}
+
+defineExpose({
+  /**
+   * 切换动画状态
+   * @example
+   * componentRef.value.switch();
+   */
+  switch() {
+    if (state == 0) {
+      state = 1;
+      animIn();
+    } else {
+      state = 0;
+      animOut();
+    }
+  },
+});
+</script>

package/DemoForOperator/Vortex/Vortex/vortexIn.glsl

@@ -0,0 +1,38 @@
+#define RANGE 6.
+#define SPEED .5
+#define STRENGTH 6.
+
+mat2 rotate(float a) {
+  float s = sin(a);
+  float c = cos(a);
+  return mat2(c, -s, s, c);
+}
+
+void mainImage(out vec4 fragColor, vec2 coord) {
+  /** mediump精度10bit, 直接使用0-1的uv, 小值的normalize()会有精度问题, 导致异常大的结果; 但乘1920x1080又会有大值的问题, 所以选取16x9 */
+  vec2 aspect = (iResolution.xy / iResolution.y) * 9.;
+  vec2 center = 0.5 * aspect;
+
+  vec2 uv = coord / iResolution.xy * aspect;
+  uv -= center;
+
+  float d = length(uv);
+  float progress = 1. - iTime / iDuration;
+
+    //vortex
+  float cTime = STRENGTH * progress;
+  d = smoothstep(0., RANGE, RANGE - d) * cTime;
+  uv *= rotate(d);
+
+    //shrink
+  float edge = aspect.y * abs(progress);
+  uv = uv + normalize(uv) * edge;
+
+  uv += center;
+  uv /= aspect;
+  if(uv.x > 1. || uv.y > 1. || uv.x < 0. || uv.y < 0.) {
+    fragColor = vec4(0.0);
+  } else {
+    fragColor = jsvTexture2D(iChannel0, uv);
+  }
+}

package/DemoForOperator/Vortex/Vortex/vortexOut.glsl

@@ -0,0 +1,38 @@
+#define RANGE 6.
+#define SPEED .5
+#define STRENGTH 6.
+
+mat2 rotate(float a) {
+  float s = sin(a);
+  float c = cos(a);
+  return mat2(c, -s, s, c);
+}
+
+void mainImage(out vec4 fragColor, vec2 coord) {
+  /** mediump精度10bit, 直接使用0-1的uv, 小值的normalize()会有精度问题, 导致异常大的结果; 但乘1920x1080又会有大值的问题, 所以选取16x9 */
+  vec2 aspect = (iResolution.xy / iResolution.y) * 9.;
+  vec2 center = 0.5 * aspect;
+
+  vec2 uv = coord / iResolution.xy * aspect;
+  uv -= center;
+
+  float d = length(uv);
+  float progress = iTime / iDuration;
+
+    //vortex
+  float cTime = STRENGTH * progress;
+  d = smoothstep(0., RANGE, RANGE - d) * cTime;
+  uv *= rotate(d);
+
+    //shrink
+  float edge = aspect.y * abs(progress);
+  uv = uv + normalize(uv) * edge;
+
+  uv += center;
+  uv /= aspect;
+  if(uv.x > 1. || uv.y > 1. || uv.x < 0. || uv.y < 0.) {
+    fragColor = vec4(0.0);
+  } else {
+    fragColor = jsvTexture2D(iChannel0, uv);
+  }
+}

package/DemoForOperator/index.js

@@ -0,0 +1,6 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 14:03:58
+ * @Description: file content
+ */
+export { default as demoForOperatorRouteList } from "./routeList"