@shijiu/jsview-vue-samples 2.0.999 → 2.0.1021

package/DemoHomepage/components/TabFrame.vue

@@ -39,6 +39,20 @@ export default {
         focusable: true,
         id: 1,
       },
+      {
+        width: 200,
+        height: 50,
+        name: "首页/运营",
+        focusable: true,
+        id: 2,
+      },
+      {
+        width: 200,
+        height: 50,
+        name: "游戏实例",
+        focusable: true,
+        id: 3,
+      }
     ];
     const direction = VERTICAL;
     return {

package/DemoHomepage/router.js

@@ -16,6 +16,11 @@ let routeList  = [
     path: '/feature/Basic',
     component: () => import('jsview-vue-samples/Basic/App.vue'),
   },
+  {
+    name: 'NativeSharedView测试',
+    path: '/feature/TestNativeSharedView',
+    component: () => import('jsview-vue-samples/TestNativeSharedView/App.vue'),
+  },
   {
     name: 'CSS预处理',
     path: '/feature/CssPreprocessor',
@@ -33,7 +38,7 @@ let routeList  = [
   },
   {
     name: '.9图焦点框漂移',
-    path: '/feature/NinePatchDemo',
+    path: '/Operations/NinePatchDemo',
     component: () => import('jsview-vue-samples/NinePatchDemo/App.vue'),
   },
   {
@@ -54,7 +59,7 @@ let routeList  = [
   },
   {
     name: '翻牌游戏',
-    path: '/feature/FlipCard',
+    path: '/Game/FlipCard',
     component: () => import('jsview-vue-samples/FlipCard/App.vue'),
   },
   {
@@ -69,12 +74,12 @@ let routeList  = [
   },
   {
     name: '动图',
-    path: '/feature/AnimPicture',
+    path: '/Operations/AnimPicture',
     component: () => import('jsview-vue-samples/AnimPicture/App.vue'),
   },
   {
     name: '粒子效果',
-    path: '/feature/SprayView',
+    path: '/Operations/SprayView',
     component: () => import('jsview-vue-samples/SprayView/App.vue'),
   },
   {
@@ -84,7 +89,7 @@ let routeList  = [
   },
   {
     name: '长图片',
-    path: '/feature/LongImage',
+    path: '/Operations/LongImage',
     component: () => import('jsview-vue-samples/LongImage/App.vue'),
   },
   {
@@ -104,12 +109,12 @@ let routeList  = [
   },
   {
     name: '抛物运动写法样例',
-    path: '/feature/ThrowMoveDemo',
+    path: '/Game/ThrowMoveDemo',
     component: () => import('jsview-vue-samples/ThrowMoveDemo/App.vue'),
   },
   {
     name: '精灵图',
-    path: '/feature/SpriteImage',
+    path: '/Game/SpriteImage',
     component: () => import('jsview-vue-samples/SpriteImage/App.vue'),
   },
   {
@@ -124,27 +129,27 @@ let routeList  = [
   },
   {
     name: '拼图demo',
-    path: '/feature/MaskClip',
+    path: '/Operations/MaskClip',
     component: () => import('jsview-vue-samples/MaskClip/App.vue'),
   },
   {
     name: 'SoundPool',
-    path: '/feature/SoundPool',
+    path: '/Game/SoundPool',
     component: () => import('jsview-vue-samples/SoundPool/App.vue'),
   },
   {
     name: 'TextureAnimation',
-    path: '/feature/TextureAnimation',
+    path: '/Operations/TextureAnimation',
     component: () => import('jsview-vue-samples/TextureAnimation/App.vue'),
   },
   {
     name: '焦点框旋转光效果',
-    path: '/feature/TextureAnimation2',
+    path: '/Operations/TextureAnimation2',
     component: () => import('jsview-vue-samples/TextureAnimation/App2.vue'),
   },
   {
     name: '公祭日黑白效果',
-    path: '/feature/GrayDown',
+    path: '/Operations/GrayDown',
     component: () => import('jsview-vue-samples/FilterDemo/App.vue'),
   },
   {
@@ -159,17 +164,17 @@ let routeList  = [
   },
   {
     name: '碰撞检测',
-    path: '/feature/Collision',
+    path: '/Game/Collision',
     component: () => import('jsview-vue-samples/Collision/App.vue'),
   },
   {
     name: '碰撞即停',
-    path: '/feature/ImpactStop',
+    path: '/Game/ImpactStop',
     component: () => import('jsview-vue-samples/ImpactStop/App.vue'),
   },
   {
     name: '滚动图',
-    path: '/feature/Swiper',
+    path: '/Operations/Swiper',
     component: () => import('jsview-vue-samples/Swiper/App.vue'),
   },
   {
@@ -177,6 +182,16 @@ let routeList  = [
     path: '/feature/JsvPreDownloader',
     component: () => import('jsview-vue-samples/JsvPreDownloader/App.vue'),
   },
+  {
+    name: '焦点移动样式',
+    path: '/Operations/FocusMoveStyle',
+    component: () => import('jsview-vue-samples/FocusMoveStyle/App.vue'),
+  },
+  {
+    name:'红包雨',
+    path:'/Game/GiftRain',
+    component:()=>import('jsview-vue-samples/GiftRain/App.vue'),
+  }
 ];
 
 //添加MetroWidget demo

package/DemoHomepage/views/Homepage.vue

@@ -10,8 +10,12 @@ const isDevelopment = process.env.NODE_ENV !== 'production';
 
 const colorTemplete = ["#89BEB2", "#C9BA83", "#DED38C", "#DE9C53"];
 
+//功能实例 MetroWidgetData 首页/运营 游戏实例
 const featureData = [];
 const metroWidgetData = [];
+const operationsData=[];
+const gameData=[]
+
 for (let item of routeList) {
   let obj = {
     name: item.name,
@@ -26,9 +30,15 @@ for (let item of routeList) {
   } else if (item.path.indexOf("metroWidget") >= 0) {
     obj.backgroundColor = colorTemplete[metroWidgetData.length % 4];
     metroWidgetData.push(obj);
+  }else if (item.path.indexOf("Operations") >= 0) {
+    obj.backgroundColor = colorTemplete[operationsData.length % 4];
+    operationsData.push(obj);
+  }else if (item.path.indexOf("Game") >= 0) {
+    obj.backgroundColor = colorTemplete[gameData.length % 4];
+    gameData.push(obj);
   }
 }
-const dataList = [featureData, metroWidgetData];
+const dataList = [featureData, metroWidgetData,operationsData,gameData];
 
 let showExitDialog = shallowRef(false);
 let contentData = shallowRef(dataList[0]);

package/FilterDemo/VideoLayer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { JsvVideo } from "jsview";
+import { JsvPlayer, globalLoadJsvPlayerPlugin } from "jsview";
 
 const props = defineProps({
   top: {
@@ -20,6 +20,10 @@ const props = defineProps({
   },
 });
 
+globalLoadJsvPlayerPlugin((status)=>{
+  console.log("JsvPlayer plugin load status: " + status);
+})
+
 // const video_url = "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20210207/52fae4231350c85fec605b47bbe479c5.mp4";
 const video_url =
   "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20190726/4cc4e6a8fd7d9d9c707ed4c4da27ca9d.mp4";
@@ -47,7 +51,7 @@ const video_url =
       animation: 'opacityVideoDemo_CompositeOpacity 3s infinite',
     }"
   >
-    <jsv-video
+    <JsvPlayer
       :src="video_url"
       autoplay="autoplay"
       loop="loop"

package/FocusMoveStyle/App.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { MetroWidget, HORIZONTAL, JsvNinePatch, useFocusHub } from "jsview";
+import Item from "./Item.vue";
+import borderImageUrl from "./assets/focus.png";
+import { reactive, provide, onMounted } from "vue";
+const focusHub = useFocusHub();
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+const focusSize = reactive({
+  width: 0,
+  height: 0,
+  left: 0,
+  top: 0,
+  onTransitionEnd: null,
+});
+
+const focusFrameController = {
+  preRect: null,
+  curRect: null,
+  onFocusChange: function (rect) {
+    this.preRect = this.curRect;
+    this.curRect = rect;
+    if (this.preRect) {
+      focusSize.left = Math.min(this.preRect.left, this.curRect.left);
+      focusSize.top = Math.min(this.preRect.top, this.curRect.top);
+      focusSize.width =
+        Math.max(
+          this.preRect.left + this.preRect.width,
+          this.curRect.left + this.curRect.width
+        ) - Math.min(this.preRect.left, this.curRect.left);
+      focusSize.height =
+        Math.max(
+          this.preRect.top + this.preRect.height,
+          this.curRect.top + this.curRect.height
+        ) - Math.min(this.preRect.top, this.curRect.top);
+      focusSize.onTransitionEnd = () => {
+        focusSize.left = this.curRect.left;
+        focusSize.top = this.curRect.top;
+        focusSize.width = this.curRect.width;
+        focusSize.height = this.curRect.height;
+        focusSize.onTransitionEnd = null;
+      };
+    } else {
+      focusSize.left = this.curRect.left;
+      focusSize.top = this.curRect.top;
+      focusSize.width = this.curRect.width;
+      focusSize.height = this.curRect.height;
+      focusSize.onTransitionEnd = null;
+    }
+  },
+};
+provide("focusFrameController", focusFrameController);
+
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 20; ++i) {
+    data.push({
+      width: 100 + Math.round(Math.random() * 4) * 20,
+      height: 50,
+      color: randomColor(),
+      content: i,
+    });
+  }
+  return data;
+};
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: 10,
+    marginBottom: 10,
+  };
+};
+
+onMounted(() => {
+  focusHub.setFocus("myWidget");
+});
+</script>
+
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }">
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: 30,
+        lineHeight: 50,
+        color: '#ffffff',
+        left: 140,
+        top: 20,
+        width: 1000,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      爬行样式的焦点示例
+    </div>
+    <metro-widget
+      name="myWidget"
+      :top="100"
+      :left="40"
+      :width="1200"
+      :height="110"
+      :direction="HORIZONTAL"
+      :provideData="provideData"
+      :measures="measures"
+      :padding="{ left: 20, right: 20, top: 20, height: 20 }"
+    >
+      <template #renderItem="{ data, onAction, query }">
+        <item :data="data" :onAction="onAction" :query="query" />
+      </template>
+      <template #background>
+        <jsv-nine-patch
+          :style="{
+            width: focusSize.width,
+            height: focusSize.height,
+            top: focusSize.top,
+            left: focusSize.left,
+          }"
+          :onTransitionEnd="focusSize.onTransitionEnd"
+          :imageUrl="borderImageUrl"
+          :imageWidth="55"
+          :centerWidth="1"
+          :borderOutset="13"
+          :imageDspWidth="30"
+          :animTime="0.2"
+          :waitForInit="true"
+        ></jsv-nine-patch>
+      </template>
+    </metro-widget>
+  </div>
+</template>

package/FocusMoveStyle/Item.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { ref, inject, nextTick } from "vue";
+
+const focusFrameController = inject("focusFrameController");
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+  frameChanged: Function,
+});
+
+const focusRect = ref({
+  left: 0,
+  top: 0,
+  width: 0,
+  height: 0,
+});
+
+const focused = ref(false);
+const divRef = ref(null);
+
+const onFocus = () => {
+  if (focusFrameController) {
+    const rect = props.query.templatePosition(props.query.index);
+    focusFrameController.onFocusChange(rect);
+  }
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+const onClicked = () => {
+  console.log("item clicked", props.data);
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClicked);
+</script>
+
+<template>
+  <div>
+    <div
+      ref="divRef"
+      :style="{
+        fontSize: 30,
+        width: data.width,
+        height: data.height,
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+        borderRadius: 5,
+      }"
+    >
+      {{ data.content }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.focus {
+  transform: scale3d(1.2, 1.2, 1);
+  transition: transform 0.25s linear;
+  font-size: 30;
+}
+
+.blur {
+  transform: scale3d(1, 1, 1);
+  transition: transform 0.25s linear;
+  font-size: 30;
+}
+</style>

package/GiftRain/App.vue

@@ -0,0 +1,243 @@
+<template>
+  <jsv-focus-block autoFocus ref="App" :onAction="actionDefines">
+    <div
+      :style="{ width: 1920, height: 1080, overflow: 'hidden', transform: 'scale3d(0.67,0.67,1)', left: -220 * 1.5 + 8, top: -170 - 8 }">
+      <JsvPreload :preloadList="preload_info"></JsvPreload>
+      <div
+        :style="{ backgroundImage: bg, width: 1920, height: 1080, overflow: 'hidden' }">
+        <Score :score="score"></Score>
+        <JsvActorMove key="JsvSpriteTranslate" :style="{
+          top: 476 * 1.5,
+          left: 220 * 1.5,
+          width: 194 * 1.5,
+          height: 244 * 1.5,
+        }" :control=_TranslateControl>
+          <div key="kimi" :style="{
+            top: 0,
+            left: 0,
+            width: 194 * 1.5,
+            height: 244 * 1.5,
+            backgroundImage: kimi,
+          }">
+            <div key="MoneyBag" ref="moneyBag" :style="{
+              top: 22 * 1.3,
+              left: 7,
+              width: 180 * 1.5,
+              height: 100 * 1.5,
+              backgroundColor: 'rgba(0,0,0,0)'
+            }"></div>
+            <div :style="{
+              top: 0,
+              left: 40 * 1.5,
+              width: 81 * 1.5,
+              height: 74 * 1.5,
+              visibility: scoreMinAnim !== null ? 'visible' : 'hidden',
+              backgroundImage: min_score_image,
+              animation: scoreMinAnim,
+            }" @animationend=_ScoreMinAnimationEnd />
+            <div :style="{
+              top: 0,
+              left: 40 * 1.5,
+              width: 81 * 1.5,
+              height: 74 * 1.5,
+              visibility: scoreAddAnim !== null ? 'visible' : 'hidden',
+              backgroundImage: add_score_image,
+              animation: scoreAddAnim,
+            }" @animationend=_ScoreAddAnimationEnd />
+          </div>
+        </JsvActorMove>
+        <RedPacket :MoneyBag="moneyBag" :onImpactTracer="_onImpactTracer" :_ScoreMinAnimationEnd="_ScoreMinAnimationEnd"
+          :_ScoreAddAnimationEnd="_ScoreAddAnimationEnd" />
+
+      </div>
+      <!-- 音频 -->
+      <JsvSystemAudio key="AudioBg" :src="_AudioBgUrl" :loop="true" :onRef="onRef1" :onLoad="audioOnLoad" />
+
+      <JsvSystemAudio v-if="!_DisableEffectSound" :onRef="onRef2" :loop="true" />
+
+
+    </div>
+  </jsv-focus-block>
+</template>
+<script setup>
+/* eslint-disable */
+import { JsvFocusBlock, JsvActorMove, JsvActorMoveControl, jJsvRuntimeBridge, JsvPreload, buildPreloadInfo,JsvSystemAudio} from "jsview";
+import { shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+import Score from "./components/Score.vue";
+import RedPacket from "./components/RedPacket.vue";
+import Sound from "./common/Sound.js"
+//音频Sound
+const MySound = new Sound()
+//预加载信息
+const kimi_normal = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png';
+const kimi_smile = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_smile.png';
+const kimi_boom = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_boom.png';
+const red_packet = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/red.png';
+const bigRed_packet = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bigred.png'
+const boom_image = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/boom.png'
+const bg = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bg.jpg'
+const preload_info = [
+  buildPreloadInfo(kimi_normal),
+  buildPreloadInfo(kimi_smile),
+  buildPreloadInfo(kimi_boom),
+  buildPreloadInfo(red_packet),
+  buildPreloadInfo(bigRed_packet),
+  buildPreloadInfo(boom_image),
+  buildPreloadInfo(bg)
+];
+//定义不需要响应式的变量
+let _CurrentRain = null;
+//音频ref
+let _Audio = null;
+let _AudioBgUrl = "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewAudio/MiniGameBackgroundMusic-redpack.mp3";
+//背景音频ref
+let _BgAudio = null;
+let _IsRunning = false;
+let _DisableEffectSound = true;
+let _TranslateControl = new JsvActorMoveControl()
+//定义需要响应式的变量
+let kimi = shallowRef("http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png")
+let score = shallowRef(0)
+let min_score_image = shallowRef(null)
+let add_score_image = shallowRef(null)
+let scoreAddAnim = shallowRef(null)
+let scoreMinAnim = shallowRef(null)
+let moneyBag = shallowRef(null)
+
+//定义扣分结束动画
+const _ScoreAddAnimationEnd = (event) => {
+  // event.stopPropagation();
+  scoreAddAnim.value = null
+  console.log(" _ScoreAddAnimationEnd event:", event);
+}
+//定义加分结束动画
+const _ScoreMinAnimationEnd = (event) => {
+  // event.stopPropagation();
+  scoreMinAnim.value = null
+  console.log(" _ScoreMinAnimationEnd event:", event);
+}
+
+//定义碰撞函数
+const _onImpactTracer = (rain) => {
+  if (rain !== null && rain !== _CurrentRain) {
+    _CurrentRain = rain;
+    console.log("_onImpactTracer rain:", rain);
+    switch (rain.type) {
+      case 0:
+        scoreAddAnim.value = "scoreUp 0.2s";
+        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png";
+        add_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/add1.png";
+        score.value += 1;
+        MySound.playGetSound()
+        break;
+      case 1:
+        scoreAddAnim.value = "scoreUp 0.2s";
+        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_smile.png";
+        add_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/add5.png";
+        MySound.playGetSound()
+        score.value += 5;
+        break;
+      case 2:
+        scoreMinAnim.value = "scoreUp 0.2s";
+        min_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/min1.png";
+        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_boom.png";
+        score.value -= 1;
+        MySound.playBoomSound()
+        if (score.value < 0) {
+          score.value = 0;
+        }
+        break;
+      default:
+        break;
+    }
+  }
+}
+//键盘松开时应该暂停动作
+const onKeyUp = (ev) => {
+  console.log("onKeyUp in : ", ev);
+  if (ev.keyCode === 37 || ev.keyCode === 39) {
+    _IsRunning = false;
+    _TranslateControl.pause((x, y) => {
+      console.log(`_TranslateControl pause x:${x}`);
+    });
+    return true;
+  }
+
+  return false;
+}
+const router = useRouter();
+//定义键盘按下
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1)
+  } else if (ev.keyCode === 37) {
+    console.log(" ev.keyCode === 37 ");
+    if (!_IsRunning) {
+      _TranslateControl.moveToX(0, 400 * 1.5, null);
+      _IsRunning = true;
+    }
+  } else if (ev.keyCode === 39) {
+    console.log(" ev.keyCode === 39");
+    if (!_IsRunning) {
+      _TranslateControl.moveToX((1280 - 220 - 194) * 1.5, 400 * 1.5, null);
+      _IsRunning = true;
+    }
+  }
+  return true;
+}
+
+//注册
+const actionDefines = {
+  onKeyDown,
+  onKeyUp
+}
+//定义音频回调
+const onRef1 = (ref) => {
+  _BgAudio = ref
+}
+const onRef2 = (ref) => {
+  _Audio = ref
+}
+const audioOnLoad = () => {
+  console.log("audio on load")
+  _BgAudio.play()
+}
+onMounted(() => {
+  //初始化音效
+  MySound.initSound();
+  //摘画布
+  jJsvRuntimeBridge.notifyPageLoaded();
+  window.BgAudio = _BgAudio;
+})
+
+//卸载之前摧毁音效
+onBeforeUnmount(() => {
+  MySound.destroy();
+});
+</script>
+  
+<style scoped>
+@keyframes scoreUp {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(0, -20, 0);
+  }
+}
+
+@keyframes rainDown {
+  from {
+    transform: translate3d(0, -780, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+;
+;
+</style>

package/GiftRain/common/Sound.js

@@ -0,0 +1,48 @@
+import { JsvSoundPool } from "jsview";
+import getAudio from "../audio/get.mp3";
+import boomAudio from "../audio/boom.mp3";
+
+class Sound {
+    initSound() {
+       this.soundPool = new JsvSoundPool(10);
+       this.soundPool.request(
+           `url(${getAudio})`,
+           null,
+           1,
+           (state, audioController) => {
+               console.log("load get audio ", state)
+               if (state === 0) {
+                   Sound._AudioController1 = audioController;
+               }
+           }
+       );
+       this.soundPool.request(
+           `url(${boomAudio})`,
+           null,
+           1,
+           (state, audioController) => {
+               console.log("load boom audio ", state)
+               if (state === 0) {
+                   Sound._AudioController2 = audioController;
+               }
+           }
+       );
+   }
+
+    playGetSound() {
+       if (Sound._AudioController1) {
+           Sound._AudioController1.play();
+       }
+   }
+
+   playBoomSound() {
+       if (Sound._AudioController2) {
+           Sound._AudioController2.play();
+       }
+   }
+   destroy () {
+       this.soundPool.destroy()
+   }
+
+}
+export default Sound ;

package/GiftRain/components/RedPacket.vue

@@ -0,0 +1,161 @@
+<template>
+    <div>
+        <div key="timer" :style="{
+            width: 140*1.5,
+            height: 140*1.5,
+            backgroundImage: _ScoreBg,
+            top: 40*1.5,
+            left: 40*1.5,
+            textAlign: 'center',
+            lineHeight: 140*1.5,
+            color: 'rgba(255,0,0,1.0)',
+            fontSize: 72*1.5
+        }">{{ timer }}</div>
+        <SpriteTranslate v-for="(item, index) in itemList" :MoneyBag="props.MoneyBag" :onImpactTracer="onImpactTracer"
+            :onDestory="_RemoveItem" :key="`spritetranslate${item.key}`" :item=item />
+</div>
+</template>
+
+<script setup>
+import { shallowRef, defineProps, onMounted, onBeforeUnmount } from 'vue';
+import SpriteTranslate from './SpriteTranslate.vue';
+//定义props
+const props = defineProps({
+    onImpactTracer: Function,
+    MoneyBag: Object,
+    _ScoreMinAnimationEnd:Function,
+    _ScoreAddAnimationEnd:Function
+})
+let _Index = 0;
+// 随机生成列表
+const _RedImage = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/red.png';
+const _BigRedImage = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bigred.png';
+const _BoomImage = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/boom.png';
+const _ScoreBg = "http://oss.image.qcast.cn/demo_images/red_packet_rain/score_bg.png";
+let itemList =shallowRef([])
+let timer = shallowRef(60)
+const onImpactTracer = props.onImpactTracer;
+let _TimerOutId = null;
+let _GameTimerID = null;
+let _IsRunning = shallowRef(false);
+
+//定义随机加入的item
+const addRandomItemList = () => {
+    const total_num = 1;
+    let ret_obj = "";
+    for (let i = 0; i < total_num; i++) {
+        const random_index = Math.floor(Math.random() * 3);
+        const duration = 2 + Math.floor(Math.random() * 2);
+        const index = ++_Index;
+        const left = 300 * 1.5 + Math.floor(Math.random() * (1280 - 500) * 1.5);
+        const top = -20 * 1.5;
+
+        switch (random_index) {
+            case 0:
+                ret_obj = {
+                    key: index.toString(), type: 0, src: _RedImage, left, top, width: 87, height: 118, duration,
+                };
+                break;
+            case 1:
+                ret_obj = {
+                    key: index.toString(), type: 1, src: _BigRedImage, left, top, width: 210, height: 114, duration,
+                };
+                break;
+            case 2:
+                ret_obj = {
+                    key: index.toString(), type: 2, src: _BoomImage, left, top, width: 100, height: 116, duration
+                };
+                break;
+            default:
+                break;
+        }
+
+        console.log("initRandomItemList ret_obj:", ret_obj);
+        itemList.value.push(ret_obj);
+    }
+}
+// addRandomItemList();
+
+
+
+const startTimer = () => {
+    _TimerOutId = setInterval(() => {
+        console.log('timmmm', timer.value);
+        timer.value = timer.value - 1;
+        if (timer.value === 0) {
+            stopGame();
+            itemList.value = []
+        }
+    }, 1000);
+}
+
+const startGame = () => {
+    console.log("startGame ");
+    _IsRunning.value = true;
+    _Refresh();
+}
+
+const stopGame = () => {
+    console.log("stopGame ");
+    _IsRunning.value = false;
+    if (_TimerOutId !== null) {
+        clearInterval(_TimerOutId);
+        _TimerOutId = null;
+    }
+    //停止游戏时动画也应该停止
+    props._ScoreMinAnimationEnd()
+    props._ScoreAddAnimationEnd()
+}
+
+const _RemoveItem = (key) => {
+    console.log("_RemoveItem in itemList.length:", itemList.value.length);
+    for (let i = 0; i < itemList.value.length; i++) {
+        if (itemList.value[i].key === key) {
+            const item = itemList.value[i];
+            if (item.sensor) {
+                item.sensor.Recycle();
+            }
+            console.log("_RemoveItem key:", itemList.value[i].key);
+            itemList.value.splice(i, 1);
+            break;
+        }
+    }
+    console.log("_RemoveItem out itemList.length:", itemList.value.length);
+}
+
+const _Refresh = () => {
+    if (_IsRunning.value === false) {
+        return;
+    }
+    const delay = 500;// Math.floor(Math.random()*600);
+    _GameTimerID = setTimeout(() => {
+        if (_IsRunning.value === true) {
+            addRandomItemList();
+            _Refresh();
+        }
+    }, delay);
+}
+
+
+onMounted(() => {
+    console.log("render itemList.length:", itemList.value.length);
+    startGame();
+    startTimer();
+})
+
+onBeforeUnmount(() => {
+    if (_GameTimerID !== null) {
+        clearInterval(_GameTimerID);
+        _GameTimerID = null;
+    }
+
+    if (_TimerOutId !== null) {
+        clearInterval(_TimerOutId);
+        _TimerOutId = null;
+    }
+
+    stopGame();
+})
+</script>
+
+<style scoped></style>

package/GiftRain/components/Score.vue

@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <div key="progress-container" :style="{
+            width: 40 * 1.5,
+            height: 400 * 1.5,
+            top: 200 * 1.5,
+            left: (40 + 70 - 20) * 1.5,
+            backgroundColor: 'rgba(255,255,255,0.2)'
+        }">
+            <div key="progress" :style="{
+                top: process_top * 1.5,
+                width: 40 * 1.5,
+                height: score_height * 1.5,
+                backgroundColor: '#ffd050'
+            }">
+            </div>
+        </div>
+        <div key="score" :style="{
+            width: 140 * 1.5,
+            height: 40 * 1.5,
+            color: '#ffd050',
+            fontSize: 24 * 1.5,
+            top: 620 * 1.5,
+            left: 40 * 1.5,
+            lineHeight: 40 * 1.5,
+            textOverflow: 'clip',
+            textAlign: 'center'
+        }">{{ `分数:${score}` }}</div>
+    </div>
+</template>
+
+<script setup type="text/javascript">
+/* eslint-disable */
+import { shallowRef, defineProps, watch} from 'vue';
+//定义props
+const props = defineProps({
+    score: Number
+})
+//定义得分
+let score_height = shallowRef(0);
+// let score = toRef(props, 'score');
+let process_top = shallowRef(0)
+
+
+//监听分数
+watch(props, (n, o) => {
+    score_height.value = (props.score * 400 / 200)
+    if (score_height.value > 400) {
+        score_height.value = 400;
+    }
+    process_top.value = 400 - score_height.value;
+})
+</script>
+
+<style scoped></style>

package/GiftRain/components/SpriteTranslate.vue

@@ -0,0 +1,72 @@
+<template>
+    <JsvActorMove :key="`translate${item.key}`" ref="translateF"
+        :style="{ left: item.left, top: item.top, width: item.width, height: item.height }" :control="_Control">
+        <div :key="`bg${item.key}`" ref="translate"
+            :style="{ backgroundImage: `url(${item.src})`, left: 0, top: 0, width: item.width, height: item.height }" />
+    </JsvActorMove>
+</template>
+
+<script setup>
+import { shallowRef, defineProps, onMounted, onBeforeMount } from 'vue';
+import { JsvActorMove, JsvActorMoveControl, createImpactTracer, createImpactCallback, createImpactAutoFroze } from 'jsview'
+//定义子ref
+let translate = shallowRef(null)
+//定义父ref
+let translateF=shallowRef(null)
+//定义props
+const props = defineProps({
+    onDestory: Function,
+    item: Object,
+    onImpactTracer: Function,
+    MoneyBag: Object
+})
+const control = new JsvActorMoveControl();
+const _Control = control;
+const item = props.item;
+//销毁方法
+const _onDestroy = () => {
+    if (props.onDestory) {
+        props.onDestory(props.item.key);
+    }
+}
+
+let sensor = null;
+
+const _InitItemEle = (item, ele) => {
+    if (ele && !item.ele) {
+        item.ele = ele;
+        if (props.MoneyBag) {
+            const giftrain_sensor = createImpactTracer(props.MoneyBag, ele, createImpactCallback(
+                () => {
+                    props.onImpactTracer(item);
+                    _onDestroy();
+                },
+            ),        //碰撞即停
+                createImpactAutoFroze(
+                    [props.MoneyBag,translateF.value.mainDiv],
+                    null
+                )
+            );
+            sensor = giftrain_sensor;
+        }
+    }
+}
+
+
+//挂载时初始化
+onMounted(() => {
+    _InitItemEle(item, translate.value)
+    _Control.moveToY(720 * 1.5 + 30, 720 * 1.5 / item.duration, () => {
+        _onDestroy();
+    });
+})
+//卸载之前释放碰撞监听者
+onBeforeMount(()=>{
+    if(sensor!=null){
+    sensor.Recycle()
+    sensor=null
+    }
+})
+</script>
+
+<style lang="scss" scoped></style>

package/NinePatchDemo/App.vue

@@ -42,10 +42,13 @@ const measures = (item) => {
     width: item.width,
     height: item.height,
     marginRight: 10,
-    marginTop: 10,
   };
 };
 
+const onTransitionEnd = () => {
+  console.log("NinePatch move end.")
+}
+
 onMounted(() => {
   focusHub.setFocus("myWidget");
 });
@@ -97,6 +100,7 @@ onMounted(() => {
       :imageDspWidth="81"
       :animTime="0.2"
       :waitForInit="true"
+      :onTransitionEnd="onTransitionEnd"
     ></jsv-nine-patch>
   </div>
 </template>

package/NinePatchDemo/Item.vue

@@ -17,7 +17,7 @@ const divRef = ref(null);
 const onFocus = () => {
   focused.value = true;
   if (focusSize) {
-    divRef.value?.getBoundingClientRect().then(
+    divRef.value?.jsvGetBoundingClientRect().then(
       (data) => {
         focusSize.width = data.width;
         focusSize.height = data.height;

package/TestNativeSharedView/App.vue

@@ -0,0 +1,182 @@
+<script setup>
+import { JsvNativeSharedDiv, JsvFocusBlock, jJsvRuntimeBridge, enableNativeViewListener, disableNativeViewListener } from "jsview"
+import { onBeforeUnmount, onMounted, reactive } from 'vue';
+
+let state = reactive({
+  outX: 20,
+  outY: 30,
+  inX: 13,
+  inY: 15,
+});
+
+let _TestData = [
+  [20, 30, 13, 15],
+  [30, 40, 13, 15],
+  [40, 50, 3, 5], // 绝对位置不动，不触发信息更新
+];
+
+let _Index = 0;
+
+// 每2秒进行位置变化以测试位置信息更新
+let loopTimer = setInterval(() => {
+  _Index = (_Index + 1) % 3;
+
+  state.outX = _TestData[_Index][0];
+  state.outY = _TestData[_Index][1];
+  state.inX = _TestData[_Index][2];
+  state.inY = _TestData[_Index][3];
+}, 2000);
+
+// 使用两个View来测试Id跟踪的正确性
+let _ReisterId = null;
+let _ReisterId2 = null;
+let _ResiterCallbackId1 = -1;
+let _ResiterCallbackId2 = -1;
+
+let getId = (id) => {
+    if (_ReisterId !== id) {
+      _ResiterCallbackId1 = enableNativeViewListener(id);
+      _ReisterId = id;
+    }
+  };
+
+let timeout1 = -1;
+let timeout2 = -1;
+
+let getId2 = (id) => {
+  if (_ReisterId2 !== id) {
+    _ReisterId2 = id;
+
+    // 延迟注册，以测试listener注册前发送event的场景
+    // 提前发出的event在listener注册时，可以收到最后状态信息
+    timeout1 = setTimeout(() => {
+      timeout1 = -1;
+      _ResiterCallbackId2 = enableNativeViewListener(id);
+      timeout2 = setTimeout(() => {
+        timeout2 = -1;
+        disableNativeViewListener(_ResiterCallbackId2);
+        _ResiterCallbackId2 = -1;
+      }, 10000);
+    }, 1000);
+  }
+};
+
+onBeforeUnmount(()=>{
+  if (loopTimer >= 0) {
+    clearInterval(loopTimer);
+    loopTimer = -1;
+  }
+
+  if (timeout1 >= 0) {
+    clearTimeout(timeout1);
+    timeout1 = -1;
+  }
+
+  if (timeout2 >= 0) {
+    clearTimeout(timeout2);
+    timeout2 = -1;
+  }
+
+  if (_ResiterCallbackId1 >= 0) {
+    disableNativeViewListener(_ResiterCallbackId1);
+    _ResiterCallbackId1 = -1;
+  }
+  if (_ResiterCallbackId2 >= 0) {
+    disableNativeViewListener(_ResiterCallbackId2);
+    _ResiterCallbackId2 = -1;
+  }
+})
+
+onMounted(()=>{
+  console.log("TestNativeSharedView mounted");
+  jJsvRuntimeBridge.notifyPageLoaded();
+})
+
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+  >
+    <!-- 一个无限动画元素，来测试卡顿 -->
+    <div
+      :style="{
+        top: 100,
+        left: 1000,
+        height: 150,
+        width: 150,
+        backgroundColor: '#334455',
+        animation: 'test-anim-rotate 1s infinite linear',
+      }"
+    />
+    <div
+      :style="{
+        left: state.outX,
+        top: state.outY,
+        backgroundColor: '#00FF00',
+        width: 600,
+        height: 600,
+      }"
+    >
+      <jsv-native-shared-div
+        :getId="getId"
+        :style="{
+          left: state.inX,
+          top: state.inY,
+          width: 500,
+          height: 500,
+        }"
+      >
+        <div
+          :style="{
+            backgroundColor: '#00FF00',
+            left: 50,
+            top: 40,
+            width: 30,
+            height: 30,
+          }"
+        />
+      </jsv-native-shared-div>
+    </div>
+    <div
+      :style="{
+        left: state.outX + 200,
+        top: state.outY,
+        backgroundColor: '#00FF00',
+        width: 600,
+        height: 600,
+      }"
+    >
+      <jsv-native-shared-div
+        :getId="getId2"
+        :style="{
+          left: state.inX,
+          top: state.inY,
+          width: 500,
+          height: 500,
+        }"
+      >
+        <div
+          :style="{
+            backgroundColor: '#00FF00',
+            left: 50,
+            top: 40,
+            width: 30,
+            height: 30,
+          }"
+        />
+      </jsv-native-shared-div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+@keyframes test-anim-rotate {
+  from {
+    transform: rotate3d(0, 0, 1, 270deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.0.999",
+  "version": "2.0.1021",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",