animate

src/services/common.ts

@@ -416,6 +416,24 @@ export const getPenTree = () => {
   return tree.list;
 };
 
+export const getPenAnimations = (idOrTag?: string) => {
+  const animations = [];
+  let pens: any[] = meta2d.store.active || [];
+  if (idOrTag) {
+    pens = meta2d.find(idOrTag) || [];
+  }
+
+  for (const pen of pens) {
+    if (pen.animations) {
+      for (const a of pen.animations) {
+        animations.push(a.name);
+      }
+    }
+  }
+
+  return Array.from(new Set(animations));
+};
+
 const calcElem = (node: any) => {
   if (!node) {
     return;

src/views/components/Actions.vue

@@ -44,16 +44,7 @@
             <t-input v-model="a.value" placeholder="ID" />
           </div>
         </template>
-        <template
-          v-else-if="
-            a.action == 2 ||
-            a.action == 3 ||
-            a.action == 4 ||
-            a.action == 8 ||
-            a.action == 9 ||
-            a.action == 10
-          "
-        >
+        <template v-else-if="a.action == 2 || a.action == 3 || a.action == 4">
           <div class="form-item mt-8">
             <label>对象类型</label>
             <t-radio-group v-model="a.targetType" @change="a.value = ''">
@@ -69,14 +60,41 @@
               :data="penTree"
               filterable
               placeholder="默认自己"
+              @change="getAnimations(a.value)"
             />
             <t-select
               v-else
               v-model="a.value"
               :options="groups"
               placeholder="组"
+              @change="getAnimations(a.value)"
             />
           </div>
+          <div class="form-item mt-8">
+            <label>动画名称</label>
+            <t-select-input
+              v-model:inputValue="a.params"
+              :value="a.params"
+              v-model:popupVisible="a.popupVisible"
+              allow-input
+              clearable
+              @clear="a.params = undefined"
+              @focus="a.popupVisible = true"
+              @blur="a.popupVisible = undefined"
+            >
+              <template #panel>
+                <ul style="padding: 8px 12px">
+                  <li
+                    v-for="item in animations"
+                    :key="item"
+                    @click="a.params = item"
+                  >
+                    {{ item }}
+                  </li>
+                </ul>
+              </template>
+            </t-select-input>
+          </div>
         </template>
         <template v-else-if="a.action == 1">
           <div class="form-item mt-8">
@@ -270,6 +288,31 @@
             </div>
           </div>
         </template>
+        <template v-else-if="a.action == 8 || a.action == 9 || a.action == 10">
+          <div class="form-item mt-8">
+            <label>对象类型</label>
+            <t-radio-group v-model="a.targetType" @change="a.value = ''">
+              <t-radio value="id">图元</t-radio>
+              <t-radio value="tag">组</t-radio>
+            </t-radio-group>
+          </div>
+          <div class="form-item mt-8">
+            <label>播放对象</label>
+            <t-tree-select
+              v-if="a.targetType === 'id'"
+              v-model="a.value"
+              :data="penTree"
+              filterable
+              placeholder="默认自己"
+            />
+            <t-select
+              v-else
+              v-model="a.value"
+              :options="groups"
+              placeholder="组"
+            />
+          </div>
+        </template>
         <template v-else-if="a.action == 16">
           <div class="form-item mt-8">
             <label>函数</label>
@@ -298,7 +341,7 @@ import { onBeforeMount, ref } from 'vue';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import Network from './Network.vue';
 
-import { getPenTree } from '@/services/common';
+import { getPenAnimations, getPenTree } from '@/services/common';
 
 const { data } = defineProps<{
   data: any;
@@ -361,6 +404,7 @@ const actionOptions = [
 
 const penTree: any = ref([]);
 const groups: any = ref([]);
+const animations: any = ref([]);
 
 onBeforeMount(() => {
   if (!data.actions) {
@@ -375,8 +419,14 @@ onBeforeMount(() => {
       groups.value.push({ label: item, value: item });
     }
   }
+
+  animations.value = getPenAnimations();
 });
 
+const getAnimations = (idOrTag: string) => {
+  animations.value = getPenAnimations(idOrTag);
+};
+
 const onChangeAction = (action: any) => {
   switch (action.action) {
     case 0:

src/views/components/PenDatas.vue

@@ -293,7 +293,7 @@
                   <label>条件类型</label>
                   <t-radio-group v-model="c.type">
                     <t-radio value=""> 关系条件 </t-radio>
-                    <t-radio value="fn"> 高阶条件 </t-radio>
+                    <t-radio value="fn"> 高级条件 </t-radio>
                   </t-radio-group>
                 </div>
                 <template v-if="!c.type">