bill 5 月之前
父節點
當前提交
8de9e5a356
共有 4 個文件被更改,包括 112 次插入89 次删除
  1. 23 17
      src/sdk/association/animation.ts
  2. 7 0
      src/sdk/sdk.ts
  3. 74 70
      src/views/animation/bottom.vue
  4. 8 2
      src/views/animation/index.vue

+ 23 - 17
src/sdk/association/animation.ts

@@ -60,10 +60,10 @@ export const addAM = (data: AnimationModel): Promise<AnimationModel3D> => {
           paths: {},
           subtitles: {},
         };
-        const am = animationGroup.addAnimationModel(data)
-        am.bus.on('loadDone', () => {
-          amMap[key].am = am
-        })
+        const am = animationGroup.addAnimationModel(data);
+        am.bus.on("loadDone", () => {
+          amMap[key].am = am;
+        });
       }
     },
     { immediate: true }
@@ -121,18 +121,17 @@ export const addFrame = (
     ([map, exists]) => {
       if (!map.am) return;
       if (exists && !map.frames[data.id]) {
-
         map.frames[data.id] = map.am.addFrame(data);
       } else if (!exists && map.frames[data.id]) {
         map.frames[data.id].destroy();
         delete map.frames[data.id];
       }
     },
-    {immediate: true}
+    { immediate: true }
   );
 
-  const stopAttrib = mergeFuns(() =>
-    watchEffect(() => amMap[key].frames[data.id]?.changeTime(data.time)),
+  const stopAttrib = mergeFuns(
+    () => watchEffect(() => amMap[key].frames[data.id]?.changeTime(data.time)),
     watchEffect(() => data.mat && amMap[key].frames[data.id]?.setMat(data.mat))
   );
 
@@ -184,7 +183,7 @@ export const addAction = (
       }
     },
 
-    {immediate: true}
+    { immediate: true }
   );
 
   const stopAttrib = mergeFuns(
@@ -247,7 +246,7 @@ export const addPath = (
         delete map.paths[data.id];
       }
     },
-    {immediate: true}
+    { immediate: true }
   );
 
   const stopAttrib = mergeFuns(
@@ -288,7 +287,7 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
   }
   const key = getAMKey(am);
   const size = ref({ width: 0, height: 0 });
-  const show = ref(false)
+  const show = ref(false);
   const pixel = ref<Pos>();
   const stopLoad = watch(
     () => {
@@ -314,16 +313,19 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
       }
     },
 
-    {immediate: true}
+    { immediate: true }
   );
 
   const stopAttrib = mergeFuns(
     watch([currentTime, () => amMap[am.id].am, size], () => {
-      if (currentTime.value >= data.time && (data.time + data.duration) <= currentTime.value) {
-        amMap[am.id].am?.getCurrentSubtitlePixel(size.value)
-        show.value = true
+      if (
+        currentTime.value >= data.time &&
+        data.time + data.duration <= currentTime.value
+      ) {
+        amMap[am.id].am?.getCurrentSubtitlePixel(size.value);
+        show.value = true;
       } else {
-        show.value = false
+        show.value = false;
       }
     })
   );
@@ -346,10 +348,14 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
   animationGroup = sdk.createAnimationGroup();
 
   watchEffect(() => {
+    console.error("发送setCurrentTime", currentTime.value);
     animationGroup.setCurrentTime(currentTime.value);
   });
 
-  animationGroup.bus.on('currentTime', time => currentTime.value = time)
+  animationGroup.bus.on("currentTime", (time) => {
+    console.error("接收setCurrentTime", time);
+    currentTime.value = time;
+  });
 
   watch(
     () => [...ams.value],

+ 7 - 0
src/sdk/sdk.ts

@@ -393,6 +393,13 @@ export type AnimationModel3D = {
   // 更改名称可见性
   visibilityTitle: (show: boolean) => void;
 
+  getModelPose: () => {
+    position?: SceneLocalPos;
+    scale?: number;
+    rotation?: SceneLocalPos;
+    originPosition?: SceneLocalPos;
+  };
+
   // 添加模型帧
   addFrame: (frame: AnimationModelFrame) => AnimationModelFrame3D;
   // 添加模型动作

+ 74 - 70
src/views/animation/bottom.vue

@@ -1,55 +1,55 @@
 <template>
-    <div class="top-bar">
-      <div class="play-bar">
-        <ui-icon
-          :type="play ? 'a-pause' : 'a-play'"
-          ctrl
-          @click="
-            () => {
-              play = !play;
-              $emit('update:follow', play);
-            }
-          "
-        />
-      </div>
-      <div class="scale-bar">
-        <ui-icon
-          type="reduce"
-          class="icon"
-          ctrl
-          @click="scale = Math.max(0.5, scale - 0.5)"
-        />
-        <Slider
-          class="slider"
-          v-model:value="scale"
-          :min="0.5"
-          :max="8"
-          :step="0.01"
-          :tooltipOpen="false"
-        />
-        <ui-icon
-          type="magnify"
-          class="icon"
-          ctrl
-          @click="scale = Math.min(8, scale + 0.5)"
-        />
-      </div>
+  <div class="top-bar">
+    <div class="play-bar">
+      <ui-icon
+        :type="play ? 'a-pause' : 'a-play'"
+        ctrl
+        @click="
+          () => {
+            play = !play;
+            $emit('update:follow', play);
+          }
+        "
+      />
+    </div>
+    <div class="scale-bar">
+      <ui-icon
+        type="reduce"
+        class="icon"
+        ctrl
+        @click="scale = Math.max(0.5, scale - 0.5)"
+      />
+      <Slider
+        class="slider"
+        v-model:value="scale"
+        :min="0.5"
+        :max="8"
+        :step="0.01"
+        :tooltipOpen="false"
+      />
+      <ui-icon
+        type="magnify"
+        class="icon"
+        ctrl
+        @click="scale = Math.min(8, scale + 0.5)"
+      />
     </div>
-    <div class="oper-bar" :class="{ disabled: play }">
-      <Renderer v-model:scale="scale" ref="renderer">
-        <v-group>
-          <template v-if="am">
-            <template v-for="prop in tlProps">
-              <TimeLine
-                v-if="am[prop.attr].length"
-                :items="am[prop.attr]"
-                :height="prop.height"
-                :background="prop.background"
-                :opacity="prop.opacity"
-                :top="prop.top"
-                :itemsRenderer="prop.component"
-                @update="({ ndx, time }) => (am![prop.attr][ndx].time = time)"
-                @add="
+  </div>
+  <div class="oper-bar" :class="{ disabled: play }">
+    <Renderer v-model:scale="scale" ref="renderer">
+      <v-group>
+        <template v-if="am">
+          <template v-for="prop in tlProps">
+            <TimeLine
+              v-if="am[prop.attr].length"
+              :items="am[prop.attr]"
+              :height="prop.height"
+              :background="prop.background"
+              :opacity="prop.opacity"
+              :top="prop.top"
+              :itemsRenderer="prop.component"
+              @update="({ ndx, time }) => (am![prop.attr][ndx].time = time)"
+              @add="
                   (item) => {
                     am![prop.attr].push(item);
                     $emit('update:active', {
@@ -58,27 +58,31 @@
                     });
                   }
                 "
-                @del="(ndx) => am![prop.attr].splice(ndx, 1)"
-                :active="
-                  prop.attr === active?.key ? am[prop.attr][active.ndx] : undefined
-                "
-                @update:active="(active: any) => $emit('update:active', active && { key: prop.attr, ndx: am![prop.attr].indexOf(active) })"
-              />
-            </template>
-            <empty v-if="!count" />
-          </template>
-        </v-group>
-        <v-group>
-          <Time @update-current-time="(time) => $emit('update:currentTime', time)">
-            <TimeCurrent
-              :currentTime="currentTime"
-              @update:current-time="(time) => $emit('update:currentTime', time)"
-              :follow="follow"
+              @del="(ndx) => am![prop.attr].splice(ndx, 1)"
+              :active="prop.attr === active?.key ? am[prop.attr][active.ndx] : undefined"
+              @update:active="(active: any) => $emit('update:active', active && { key: prop.attr, ndx: am![prop.attr].indexOf(active) })"
             />
-          </Time>
-        </v-group>
-      </Renderer>
-    </div>
+          </template>
+          <empty v-if="!count" />
+        </template>
+      </v-group>
+      <v-group>
+        <Time
+          @update-current-time="
+            (time) => {
+              $emit('update:currentTime', time);
+            }
+          "
+        >
+          <TimeCurrent
+            :currentTime="currentTime"
+            @update:current-time="(time) => $emit('update:currentTime', time)"
+            :follow="follow"
+          />
+        </Time>
+      </v-group>
+    </Renderer>
+  </div>
 </template>
 
 <script lang="ts" setup>

+ 8 - 2
src/views/animation/index.vue

@@ -91,8 +91,8 @@ watchEffect((onCleanup) => {
   const am3d = amM.value.am;
   if (!am3d) return;
 
-  am3d.bus.on("transformChanged", (mat) => {
-    frame.mat = JSON.parse(JSON.stringify(mat));
+  am3d.bus.on("transformChanged", () => {
+    frame.mat = JSON.parse(JSON.stringify(am3d.getModelPose()));
   });
 
   switch (frameAction.value) {
@@ -174,6 +174,12 @@ const add = <T extends Active["key"]>(
       ...attr,
       ...preset,
     } as any);
+    if (key === "frames") {
+      asyncOper(
+        focusAM.value!,
+        (am3d) => (item.mat = JSON.parse(JSON.stringify(am3d.getModelPose())))
+      );
+    }
     focusAM.value![key].push(item);
     activeAttrib.value = {
       ndx: focusAM.value![key].length - 1,