animate

src/styles/tdesign.css

@@ -16,7 +16,8 @@
     border-color: var(--color-error);
   }
 
-  &.t-input--prefix > .t-input__prefix {
+  &.t-input--prefix > .t-input__prefix,
+  .t-input--suffix > .t-input__suffix {
     font-size: 12px;
     color: var(--color-desc);
   }
@@ -447,3 +448,7 @@
   background-size: 6px 6px;
   background-position: 0 0, 3px 3px;
 }
+
+.t-divider--horizontal {
+  margin: 0;
+}

src/views/components/AnimateFrames.vue

@@ -0,0 +1,411 @@
+<template>
+  <div class="animate-frames">
+    <div class="head">
+      <label>{{ animate.name }} </label>
+      <t-icon
+        name="close"
+        class="hover"
+        style="font-size: 16px"
+        @click="close"
+      />
+    </div>
+    <div style="height: calc(100% - 42px); overflow: auto">
+      <template v-if="animate.frames.length">
+        <t-collapse
+          v-model="openedCollapses"
+          :borderless="true"
+          :expand-on-row-click="true"
+          @change="onChangeCollapse"
+        >
+          <t-collapse-panel v-for="(item, i) in animate.frames" :value="i">
+            <template #header>
+              <label style="font-weight: normal">{{ `帧${i + 1}` }}</label>
+            </template>
+            <template #headerRightContent>
+              <t-space size="small" @click.stop>
+                <t-tooltip content="在当前帧后面添加动画帧">
+                  <t-icon
+                    name="folder-add"
+                    class="hover ml-4"
+                    @click="addFrame(i)"
+                  />
+                </t-tooltip>
+                <t-tooltip content="添加属性">
+                  <t-dropdown
+                    :options="[
+                      { content: '操作一', value: 1 },
+                      { content: '操作二', value: 2 },
+                    ]"
+                  >
+                    <t-icon name="file-add" class="hover ml-4" />
+                  </t-dropdown>
+                </t-tooltip>
+                <t-popconfirm
+                  content="确认删除该动画帧吗"
+                  placement="left"
+                  @confirm="animate.frames.splice(i, 1)"
+                >
+                  <t-icon name="delete" class="hover ml-4" />
+                </t-popconfirm>
+              </t-space>
+            </template>
+            <section>
+              <div class="form-item">
+                <label>时长</label>
+                <t-input-number
+                  v-model="item.duration"
+                  theme="normal"
+                  :min="1"
+                  placeholder="毫秒"
+                  suffix="ms"
+                />
+              </div>
+              <div class="form-item mt-8" v-for="prop in frameProps[i]">
+                <template v-if="propDescriptions[prop]">
+                  <label>
+                    {{ propDescriptions[prop].label }}
+                  </label>
+
+                  <t-input-number
+                    v-if="propDescriptions[prop].type === 'number'"
+                    v-model="item[prop]"
+                    theme="normal"
+                    :placeholder="propDescriptions[prop].placeholder"
+                    :min="propDescriptions[prop].min"
+                    :max="propDescriptions[prop].max"
+                    :step="propDescriptions[prop].step"
+                  />
+                  <t-select
+                    v-else-if="propDescriptions[prop].type === 'select'"
+                    v-model="item[prop]"
+                    :placeholder="propDescriptions[prop].placeholder"
+                    :options="propDescriptions[prop].options"
+                  />
+                  <t-color-picker
+                    v-else-if="propDescriptions[prop].type === 'color'"
+                    v-model="item[prop]"
+                    :placeholder="propDescriptions[prop].placeholder"
+                    format="CSS"
+                    :enable-alpha="true"
+                    :color-modes="
+                      propDescriptions[prop].colorModes ||
+                      propDescriptions[prop].colorModesFn(
+                        item[propDescriptions[prop].colorModesBind]
+                      )
+                    "
+                    :show-primary-color-preview="false"
+                    :clearable="true"
+                  />
+                  <t-switch
+                    v-else-if="propDescriptions[prop].type === 'bool'"
+                    v-model="item[prop]"
+                    class="ml-8 mt-8"
+                    size="small"
+                  />
+                  <t-select
+                    v-else-if="propDescriptions[prop].type === 'child'"
+                    v-model="item[prop]"
+                    :placeholder="propDescriptions[prop].placeholder"
+                  >
+                    <t-option
+                      v-for="(child, i) in selections.pen.children"
+                      :key="i"
+                      :value="i"
+                      :label="`状态${i + 1}`"
+                    />
+                  </t-select>
+                  <t-input
+                    v-else
+                    v-model="item[prop]"
+                    :placeholder="propDescriptions[prop].placeholder"
+                  />
+                </template>
+                <template v-else>
+                  <label>
+                    {{ prop }}
+                  </label>
+                  <t-input v-model="item[prop]" />
+                </template>
+              </div>
+            </section>
+          </t-collapse-panel>
+        </t-collapse>
+        <t-divider />
+        <div class="mt-16 px-16">
+          <t-button class="w-full" @click="addFrame" style="height: 30px"
+            >添加帧</t-button
+          >
+        </div>
+      </template>
+      <div class="flex column center blank" v-else>
+        <img src="/img/blank.png" />
+        <div class="gray center">还没有动画帧</div>
+        <div class="mt-8">
+          <t-button @click="addFrame" style="height: 30px">添加动画帧</t-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, reactive, ref } from 'vue';
+
+import { useSelection } from '@/services/selections';
+
+const { animate } = defineProps<{
+  animate: { name: string; frames: any[] };
+}>();
+
+const emit = defineEmits(['close']);
+
+const { selections }: { selections: any } = useSelection();
+
+const openedCollapses = ref([0]);
+
+const frameProps: any = reactive({});
+
+const propDescriptions: any = {
+  visible: {
+    label: '显示',
+    type: 'bool',
+    sort: 0,
+  },
+  scale: {
+    label: '缩放',
+    type: 'number',
+    sort: 1,
+    min: 0.01,
+    max: 100,
+  },
+  rotate: {
+    label: '旋转',
+    type: 'number',
+    sort: 2,
+    min: 0,
+    max: 360,
+    placeholder: '°',
+  },
+  x: {
+    label: 'X位移',
+    type: 'number',
+    sort: 3,
+    placeholder: 'px',
+  },
+  y: {
+    label: 'Y位移',
+    type: 'number',
+    sort: 4,
+    placeholder: 'px',
+  },
+  color: {
+    label: '前景颜色',
+    type: 'color',
+    sort: 5,
+  },
+  bkType: {
+    label: '背景类型',
+    type: 'select',
+    options: [
+      {
+        label: '纯色',
+        value: 0,
+      },
+      {
+        label: '线性渐变',
+        value: 1,
+      },
+      {
+        label: '径向渐变',
+        value: 2,
+      },
+    ],
+    sort: 6,
+  },
+  background: {
+    label: '背景颜色',
+    type: 'color',
+    colorModesFn: (t: number) => {
+      if (t) {
+        return ['linear-gradient'];
+      } else {
+        return ['monochrome'];
+      }
+    },
+    colorModesBind: 'bkType',
+    sort: 7,
+  },
+  text: {
+    label: '文字',
+    sort: 8,
+  },
+  showChild: {
+    label: '状态',
+    type: 'child',
+    sort: 9,
+  },
+  flipX: {
+    label: '水平翻转',
+    type: 'bool',
+    sort: 10,
+  },
+  flipY: {
+    label: '垂直翻转',
+    type: 'bool',
+    sort: 11,
+  },
+  progress: {
+    label: '进度',
+    type: 'number',
+    step: 0.1,
+    min: 0,
+    max: 1,
+    placeholder: '0 - 1',
+    sort: 12,
+  },
+  progressColor: {
+    label: '进度颜色',
+    type: 'color',
+    colorModes: ['monochrome'],
+    sort: 13,
+  },
+  verticalProgress: {
+    label: '垂直进度',
+    type: 'bool',
+    sort: 14,
+  },
+  globalAlpha: {
+    label: '透明度',
+    type: 'number',
+    step: 0.1,
+    min: 0,
+    max: 1,
+    placeholder: '0 - 1',
+    sort: 15,
+  },
+  dash: {
+    label: '线条样式',
+    type: 'select',
+    options: [
+      {
+        label: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 20px;">
+                  <g fill="none" stroke="black" stroke-width="1">
+                    <path d="M0 9 l85 0" />
+                  </g>
+                </svg>`,
+        value: 0,
+      },
+      {
+        label: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 20px;">
+                  <g fill="none" stroke="black" stroke-width="1">
+                    <path stroke-dasharray="5 5" d="M0 9 l85 0" />
+                  </g>
+                </svg>`,
+        value: 1,
+      },
+      {
+        label: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 20px;">
+                  <g fill="none" stroke="black" stroke-width="1">
+                    <path stroke-dasharray="10 10" d="M0 9 l85 0" />
+                  </g>
+                </svg>`,
+        value: 2,
+      },
+      {
+        label: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 20px;">
+                  <g fill="none" stroke="black" stroke-width="1">
+                    <path stroke-dasharray="10 10 2 10" d="M0 9 l85 0" />
+                  </g>
+                </svg>`,
+        value: 3,
+      },
+    ],
+    sort: 16,
+  },
+};
+
+onMounted(() => {
+  onChangeCollapse([0]);
+});
+
+const addFrame = (i?: number) => {
+  if (i == undefined) {
+    i = animate.frames.length - 1;
+  }
+  animate.frames.splice(i, 0, {});
+
+  openedCollapses.value = [i + 1];
+  onChangeCollapse(openedCollapses.value);
+};
+
+const onChangeCollapse = (val: number[]) => {
+  if (!animate.frames.length) {
+    return;
+  }
+  for (const i of val) {
+    frameProps[i] = [];
+    for (const key in animate.frames[i]) {
+      if (key !== 'duration') {
+        frameProps[i].push(key);
+      }
+    }
+    frameProps[i].sort((a: any, b: any) => {
+      a.sort > b.sort ? 1 : -1;
+    });
+  }
+};
+
+const close = () => {
+  emit('close');
+};
+</script>
+<style lang="postcss" scoped>
+.animate-frames {
+  position: fixed;
+  top: 100px;
+  bottom: 12px;
+  right: 308px;
+  width: 300px;
+  border: 1px solid var(--color-border-input);
+  border-radius: 4px;
+  box-shadow: rgba(39, 54, 78, 0.08) 0px 2px 10px 0px,
+    rgba(39, 54, 78, 0.1) 4px 12px 40px 0px;
+
+  & > .head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--color-background-popup);
+    padding: 12px 16px;
+    font-size: 14px;
+    line-height: 1;
+    color: var(--color-title);
+  }
+
+  .blank {
+    height: 70%;
+    img {
+      padding: 16px;
+      opacity: 0.9;
+    }
+  }
+
+  :deep(.t-collapse) {
+    .t-collapse-panel__header {
+      .t-input {
+        border-color: transparent;
+        &:hover {
+          border-color: var(--color-border-input);
+        }
+      }
+    }
+
+    .t-collapse-panel__icon:hover {
+      background: none;
+      svg {
+        color: var(--color-primary);
+      }
+    }
+  }
+}
+</style>

src/views/components/AnimatesFrame.vue

@@ -1,309 +0,0 @@
-<template>
-  <div class="animates">
-    <template v-if="pen.animates.length">
-      <t-collapse
-        v-model="openedCollapses"
-        :borderless="true"
-        :expand-on-row-click="false"
-      >
-        <t-collapse-panel v-for="(item, i) in pen.animates" :value="i">
-          <template #header>
-            <t-input v-model="item.name" autoWidth class="mr-8" />
-            <t-icon
-              v-if="isPlaying"
-              name="stop-circle-1"
-              class="hover primary"
-              style="font-size: 16px"
-              @click="stop"
-            />
-            <t-icon
-              v-else
-              name="play-circle"
-              class="hover"
-              style="font-size: 16px"
-              @click="play(i)"
-            />
-          </template>
-          <template #headerRightContent>
-            <t-space size="small">
-              <t-icon name="edit" class="hover mr-4" />
-
-              <t-popconfirm
-                content="确认删除该动画吗"
-                placement="left"
-                @confirm="pen.animates.splice(i, 1)"
-              >
-                <t-icon name="delete" class="hover" />
-              </t-popconfirm>
-            </t-space>
-          </template>
-          <div class="form-item">
-            <label>动画类型</label>
-            <t-select
-              v-model="item.animate"
-              clearable
-              placeholder="动画"
-              :options="animateList"
-              @change="changeAnimate(item)"
-            />
-          </div>
-          <div class="form-item mt-8">
-            <label>播放次数</label>
-            <t-input-number
-              v-model="item.animateCycle"
-              theme="column"
-              :min="1"
-              placeholder="无限"
-              title="缺省无限循环播放"
-            />
-          </div>
-          <div class="form-item mt-8">
-            <label>结束状态</label>
-            <t-select v-model="item.keepAnimateState" placeholder="初始状态">
-              <t-option :key="false" :value="false" label="初始状态" />
-              <t-option :key="true" :value="true" label="当前状态" />
-            </t-select>
-          </div>
-          <div class="form-item mt-8">
-            <label>线性播放</label>
-            <t-tooltip content="仅支持数字属性匀速线性播放" placement="top">
-              <t-select v-model="item.linear" placeholder="是">
-                <t-option :key="true" :value="true" label="是" />
-                <t-option :key="false" :value="false" label="否" />
-              </t-select>
-            </t-tooltip>
-          </div>
-          <div class="form-item mt-8">
-            <label>下个动画</label>
-            <t-tree-select
-              v-model="item.nextAnimate"
-              :data="penTree"
-              filterable
-              placeholder="下个动画对象"
-            />
-          </div>
-          <div class="form-item mt-8">
-            <label>自动播放</label>
-            <t-switch class="ml-8 mt-8" size="small" v-model="item.autoPlay" />
-          </div>
-        </t-collapse-panel>
-      </t-collapse>
-      <div class="mt-8 px-16">
-        <t-button class="w-full" @click="addAnimate" style="height: 30px">
-          添加动画
-        </t-button>
-      </div>
-    </template>
-    <div class="flex column center blank" v-else>
-      <img src="/img/blank.png" />
-      <div class="gray center">还没有动画</div>
-      <div class="mt-8">
-        <t-button @click="addAnimate" style="height: 30px">添加动画</t-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { onBeforeMount, ref, toRaw } from 'vue';
-
-import { getPenTree } from '@/services/common';
-import { deepClone } from '@meta2d/core';
-
-const { pen } = defineProps<{
-  pen: any;
-}>();
-
-const penTree: any = ref([]);
-
-const openedCollapses = ref([0]);
-
-const animateList = [
-  {
-    label: '闪烁',
-    value: '闪烁',
-    data: [
-      {
-        visible: true,
-        duration: 100,
-      },
-      {
-        visible: false,
-        duration: 100,
-      },
-    ],
-  },
-  {
-    label: '缩放',
-    value: '缩放',
-    data: [
-      {
-        scale: 1.1,
-        duration: 100,
-      },
-      {
-        scale: 1,
-        duration: 400,
-      },
-    ],
-  },
-  {
-    label: '旋转',
-    value: '旋转',
-    data: [
-      {
-        rotate: 360,
-        duration: 1000,
-      },
-    ],
-  },
-  {
-    label: '上下跳动',
-    value: '上下跳动',
-    data: [
-      {
-        y: -10,
-        duration: 100,
-      },
-      { y: 0, duration: 100 },
-      { y: -10, duration: 200 },
-    ],
-  },
-  {
-    label: '左右跳动',
-    value: '左右跳动',
-    data: [
-      {
-        x: -10,
-        duration: 100,
-      },
-      {
-        x: 10,
-        duration: 80,
-      },
-      {
-        x: -10,
-        duration: 50,
-      },
-      {
-        x: 10,
-        duration: 30,
-      },
-      {
-        x: 0,
-        duration: 300,
-      },
-    ],
-  },
-  {
-    label: '颜色变化',
-    value: '颜色变化',
-    data: [
-      { color: '#4583ff', duration: 200 },
-      { color: '#ff4000', duration: 200 },
-    ],
-  },
-  {
-    label: '文字变化',
-    value: '文字变化',
-    data: [
-      { text: '乐吾乐', duration: 200 },
-      { text: 'le5le', duration: 200 },
-    ],
-  },
-  {
-    label: '状态变化',
-    value: '状态变化',
-    data: [
-      { showChild: 0, duration: 200 },
-      { showChild: 1, duration: 200 },
-    ],
-  },
-  {
-    label: '翻转',
-    value: '翻转',
-    data: [
-      { flipX: true, flipY: true, duration: 200 },
-      { flipX: false, flipY: false, duration: 200 },
-    ],
-  },
-  {
-    label: '自定义',
-    value: 'custom',
-    data: [],
-  },
-];
-
-const isPlaying = ref(false);
-
-onBeforeMount(() => {
-  if (!pen.animates) {
-    pen.animates = [];
-  }
-
-  const p = meta2d.findOne(pen.id);
-  isPlaying.value = !!p?.calculative?.start;
-
-  penTree.value = getPenTree();
-});
-
-const addAnimate = () => {
-  openedCollapses.value.push(pen.animates.length);
-  pen.animates.push({
-    name: '动画' + (pen.animates.length + 1),
-  });
-};
-
-const changeAnimate = (item: any) => {
-  const animate: any = animateList.find((elem: any) => {
-    return elem.label === item.animate;
-  });
-
-  if (!animate) {
-    return;
-  }
-
-  item.frames = deepClone(animate.data);
-};
-
-const play = (i: number) => {
-  meta2d.startAnimate(pen.id, i);
-  isPlaying.value = true;
-};
-
-const stop = () => {
-  meta2d.stopAnimate(pen.id);
-  isPlaying.value = false;
-};
-</script>
-<style lang="postcss" scoped>
-.animates {
-  height: 100%;
-
-  .blank {
-    height: 70%;
-    img {
-      padding: 16px;
-      opacity: 0.9;
-    }
-  }
-
-  :deep(.t-collapse) {
-    .t-collapse-panel__header {
-      .t-input {
-        border-color: transparent;
-        &:hover {
-          border-color: var(--color-border-input);
-        }
-      }
-    }
-
-    .t-collapse-panel__icon:hover {
-      background: none;
-      svg {
-        color: var(--color-primary);
-      }
-    }
-  }
-}
-</style>

src/views/components/PenAnimates.vue

@@ -4,40 +4,129 @@
       <t-collapse
         v-model="openedCollapses"
         :borderless="true"
-        :expand-on-row-click="false"
+        :expand-on-row-click="true"
       >
         <t-collapse-panel v-for="(item, i) in pen.animations" :value="i">
           <template #header>
-            <t-input v-model="item.name" autoWidth class="mr-8" />
-            <t-icon
-              v-if="isPlaying === i"
-              name="stop-circle-1"
-              class="hover primary"
-              style="font-size: 16px"
-              @click="stop"
-            />
-            <t-icon
-              v-else
-              name="play-circle"
-              class="hover"
-              style="font-size: 16px"
-              @click="play(i)"
-            />
+            <div class="flex middle" @click.stop>
+              <t-input v-model="item.name" autoWidth class="mr-8" />
+              <t-icon
+                v-if="isPlaying === i"
+                name="stop-circle-1"
+                class="hover primary"
+                style="font-size: 16px"
+                @click="stop"
+              />
+              <t-icon
+                v-else
+                name="play-circle"
+                class="hover"
+                style="font-size: 16px"
+                @click="play(i)"
+              />
+            </div>
           </template>
           <template #headerRightContent>
-            <t-space size="small">
-              <t-icon v-if="!pen.type" name="edit" class="hover mr-4" />
+            <t-space size="small" @click.stop>
+              <t-icon
+                v-if="!pen.type && item.animate"
+                name="edit"
+                class="hover mr-4"
+                @click="animate = item"
+              />
 
               <t-popconfirm
                 content="确认删除该动画吗"
                 placement="left"
-                @confirm="pen.animations.splice(i, 1)"
+                @confirm="
+                  pen.animations.splice(i, 1);
+                  animate = undefined;
+                "
               >
                 <t-icon name="delete" class="hover" />
               </t-popconfirm>
             </t-space>
           </template>
-          <template v-if="pen.type"></template>
+          <template v-if="pen.type">
+            <div class="form-item">
+              <label>动画类型</label>
+              <t-select v-model="item.lineAnimateType" placeholder="水流">
+                <t-option :key="0" :value="0" label="水流" />
+                <t-option :key="1" :value="1" label="水珠" />
+                <t-option :key="2" :value="2" label="圆点" />
+              </t-select>
+            </div>
+
+            <div class="form-item mt-8">
+              <label>运动速度</label>
+              <t-slider
+                class="ml-12"
+                v-model="item.animateSpan"
+                :show-tooltip="true"
+                :min="1"
+                :max="10"
+              />
+            </div>
+            <div class="form-item mt-8">
+              <label>动画颜色</label>
+              <t-color-picker
+                class="w-full"
+                format="CSS"
+                :enable-alpha="true"
+                :color-modes="['monochrome']"
+                :show-primary-color-preview="false"
+                :clearable="true"
+                v-model="item.animateColor"
+              />
+            </div>
+            <div class="form-item mt-8">
+              <label>轨迹宽度</label>
+              <t-input-number
+                v-model="item.animateLineWidth"
+                theme="column"
+                :min="1"
+                placeholder="同连线宽度"
+              />
+            </div>
+            <div class="form-item mt-8">
+              <label>反向流动</label>
+              <t-switch
+                class="ml-8 mt-8"
+                size="small"
+                v-model="item.animateReverse"
+              />
+            </div>
+            <div class="form-item mt-8">
+              <label>播放次数</label>
+              <t-input-number
+                v-model="item.animateCycle"
+                theme="column"
+                :min="1"
+                placeholder="无限"
+                title="缺省无限循环播放"
+              />
+            </div>
+            <div class="form-item mt-8">
+              <label>自动播放</label>
+              <t-switch
+                class="ml-8 mt-8"
+                size="small"
+                v-model="item.autoPlay"
+              />
+            </div>
+            <div
+              class="form-item mt-8"
+              title="当前动画结束后自动播放下一个对象的动画"
+            >
+              <label>下个动画</label>
+              <t-tree-select
+                v-model="item.nextAnimate"
+                :data="penTree"
+                filterable
+                placeholder="无"
+              />
+            </div>
+          </template>
           <template v-else>
             <div class="form-item">
               <label>动画类型</label>
@@ -78,15 +167,6 @@
                 </t-select>
               </t-tooltip>
             </div>
-            <div class="form-item mt-8">
-              <label>下个动画</label>
-              <t-tree-select
-                v-model="item.nextAnimate"
-                :data="penTree"
-                filterable
-                placeholder="下个动画对象"
-              />
-            </div>
             <div class="form-item mt-8">
               <label>自动播放</label>
               <t-switch
@@ -95,10 +175,23 @@
                 v-model="item.autoPlay"
               />
             </div>
+            <div
+              class="form-item mt-8"
+              title="当前动画结束后自动播放下一个对象的动画"
+            >
+              <label>下个动画</label>
+              <t-tree-select
+                v-model="item.nextAnimate"
+                :data="penTree"
+                filterable
+                placeholder="无"
+              />
+            </div>
           </template>
         </t-collapse-panel>
       </t-collapse>
-      <div class="mt-8 px-16">
+      <t-divider />
+      <div class="mt-16 px-16">
         <t-button class="w-full" @click="addAnimate" style="height: 30px">
           添加动画
         </t-button>
@@ -112,14 +205,21 @@
       </div>
     </div>
   </div>
+  <AnimateFrames
+    v-if="animate"
+    :animate="animate"
+    @close="animate = undefined"
+  />
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, ref, toRaw } from 'vue';
+import { onBeforeMount, ref } from 'vue';
 
 import { getPenTree } from '@/services/common';
 import { deepClone } from '@meta2d/core';
 
+import AnimateFrames from './AnimateFrames.vue';
+
 const { pen } = defineProps<{
   pen: any;
 }>();
@@ -128,6 +228,8 @@ const penTree: any = ref([]);
 
 const openedCollapses = ref([0]);
 
+const animate: any = ref(undefined);
+
 const animateList = [
   {
     label: '闪烁',
@@ -213,6 +315,14 @@ const animateList = [
       { color: '#ff4000', duration: 200 },
     ],
   },
+  {
+    label: '背景变化',
+    value: '背景变化',
+    data: [
+      { background: '#4583ff', duration: 200 },
+      { background: '#ff4000', duration: 200 },
+    ],
+  },
   {
     label: '文字变化',
     value: '文字变化',
@@ -269,7 +379,7 @@ const addAnimate = () => {
 
 const changeAnimate = (item: any) => {
   const animate: any = animateList.find((elem: any) => {
-    return elem.label === item.animate;
+    return elem.value === item.animate;
   });
 
   if (!animate) {