bill 4 kuukautta sitten
vanhempi
commit
fdc956b7ab
2 muutettua tiedostoa jossa 17 lisäystä ja 18 poistoa
  1. 5 3
      src/components/subtitle/index.vue
  2. 12 15
      src/sdk/association/animation.ts

+ 5 - 3
src/components/subtitle/index.vue

@@ -2,8 +2,7 @@
   <div
   <div
     v-if="pixel"
     v-if="pixel"
     :style="{
     :style="{
-      left: pixel.x + 'px',
-      top: pixel.y + 'px',
+      transform: `translate(${pixel.x}px, ${pixel.y}px)`,
       visibility: show ? 'visible' : 'hidden',
       visibility: show ? 'visible' : 'hidden',
     }"
     }"
     class="subtitle"
     class="subtitle"
@@ -33,7 +32,6 @@ watch(
       dom,
       dom,
       (dom, _, onCleanup) => {
       (dom, _, onCleanup) => {
         if (!dom) return;
         if (!dom) return;
-
         const timeout = setTimeout(() => {
         const timeout = setTimeout(() => {
           props.sizeChang({ width: dom.offsetWidth, height: dom.offsetHeight });
           props.sizeChang({ width: dom.offsetWidth, height: dom.offsetHeight });
         });
         });
@@ -49,6 +47,10 @@ watch(
 .subtitle {
 .subtitle {
   position: absolute;
   position: absolute;
   z-index: 1;
   z-index: 1;
+  transition: transform 0.3s linear;
+  will-change: transform;
+  left: 0;
+  top: 0;
   text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
   text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
   pointer-events: none;
   pointer-events: none;
 
 

+ 12 - 15
src/sdk/association/animation.ts

@@ -316,7 +316,7 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
           document.querySelector("#app")!,
           document.querySelector("#app")!,
           Subtitle,
           Subtitle,
           reactive({
           reactive({
-            pixel,
+            pixel: pixel,
             show,
             show,
             data,
             data,
             sizeChang: (csize: Size) => (size.value = csize),
             sizeChang: (csize: Size) => (size.value = csize),
@@ -330,6 +330,17 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
 
 
     { immediate: true }
     { immediate: true }
   );
   );
+  let isRun = false
+  const update = () => {
+    if (isRun) return;
+    isRun = true
+    setTimeout(() => {
+      pixel.value = amMap[am.id]?.am?.getCurrentSubtitlePixel(
+        size.value
+      );
+      isRun = false
+    }, 160);
+  };
 
 
   const stopAttrib = mergeFuns(
   const stopAttrib = mergeFuns(
     watch(
     watch(
@@ -344,22 +355,8 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
           currentTime.value >= data.time &&
           currentTime.value >= data.time &&
           currentTime.value <= data.time + data.duration
           currentTime.value <= data.time + data.duration
         ) {
         ) {
-          let isRun = false
-          const update = () => {
-            if (isRun) return;
-            isRun = true
-            setTimeout(() => {
-              pixel.value = amMap[am.id]?.am?.getCurrentSubtitlePixel(
-                size.value
-              );
-              isRun = false
-            }, 160);
-          };
           update();
           update();
           show.value = true;
           show.value = true;
-
-          _sdk.sceneBus.on("cameraChange", update);
-          onCleanup(() => _sdk.sceneBus.off("cameraChange", update));
         } else {
         } else {
           show.value = false;
           show.value = false;
         }
         }