[Feat 0000] 风门SVG动画开发

src/hooks/vent/useSvgAnimation.ts

@@ -0,0 +1,57 @@
+import { ref } from 'vue';
+
+/**
+ * svg二维模型动画使用的钩子，需要配合指定的组件使用，即svg模型组件（README里有更详细的说明）
+ *
+ * 备注：一个元素的动画仅有两种状态，正常播放、倒放；例如：`triggerAnimation(id1, false)`代表触发id1对应的动画，false代表触发正常播放的动画
+ */
+export function useSvgAnimation() {
+  /** 管理节点是否处于初始状态 */
+  const animationManager = ref<{ [id: string]: boolean }>({});
+
+  /**
+   * 触发动画函数，该函数用来根据id查找SVG图片中的对应group，然后触发绑定在此group上的动画
+   *
+   * 动画有且仅有两个状态，一种是初始状态，一种是结束状态，当动画触发后，会根据reverse传参自动切换状态
+   *
+   * @param id 标识符号（可以在页面中使用元素选择器选择具体元素后查询其id），可以传数组
+   * @param reverse 是否需要反向执行动画，如果id传了数组该参数可以传数组以一一匹配，默认为false
+   */
+  function triggerAnimation(id: string | string[], reverse: boolean | boolean[] = false) {
+    const idArray = typeof id === 'string' ? [id] : id;
+    const reverseArray = typeof reverse === 'boolean' ? idArray.map(() => reverse) : reverse;
+
+    idArray.forEach((id, index) => {
+      if (animationManager.value[id] === undefined) {
+        animationManager.value[id] = true;
+      }
+      const unchanged = animationManager.value[id];
+
+      //   const element = document.querySelector(`#${id}`) as SVGElement;
+      //   if (!element) return;
+      //   const group = element.parentElement?.parentElement;
+      //   console.log('debug rrrr', element, group);
+      //   if (!group) return;
+
+      const reverse = reverseArray[index] || false;
+      // 不指定反向播放且group处于初始状态时播放正常动画
+      if (!reverse && unchanged) {
+        // group.classList.remove(`${id}_animate_reverse`);
+        // group.classList.add(`${id}_animate`);
+        animationManager.value[id] = false;
+        return;
+      }
+      if (reverse && !unchanged) {
+        // group.classList.remove(`${id}_animate`);
+        // group.classList.add(`${id}_animate_reverse`);
+        animationManager.value[id] = true;
+        return;
+      }
+    });
+  }
+
+  return {
+    animationManager,
+    triggerAnimation,
+  };
+}