mky-vent-base/src/hooks/vent/useSvgAnimation.ts

import { ref } from 'vue';
import _ from 'lodash';

/**
 * svg二维模型动画使用的钩子，需要配合指定的组件使用，即svg模型组件（README里有更详细的说明）
 *
 * 备注：一个元素的动画仅有两种状态，正常播放、倒放；例如：`triggerAnimation(id1, false)`代表触发id1对应的动画，false代表触发正常播放的动画
 */
export function useSvgAnimation(elementInfo: Map<string, { key: string; transforms?: string[]; opacity?: string[] }>) {
  /** 所有动画元素 */
  const animationElements = new Map<string, HTMLElement>();
  /** 管理节点是否处于初始状态 */
  const animationManager = ref<{ [id: string]: boolean }>({});

  /**
   * 触发动画函数，该函数用来根据id查找SVG图片中的对应group，然后触发绑定在此group上的动画
   *
   * 动画有且仅有两个状态，一种是初始状态，一种是结束状态，当动画触发后，会根据reverse传参自动切换状态
   *
   * @param id 标识符号（可以在页面中使用元素选择器选择具体元素后查询其id），可以传数组
   * @param reverse 是否需要反向执行动画，如果id传了数组该参数可以传数组以一一匹配，默认为false
   * @param config.duration 动画持续时长，越长动画执行的越慢
   * @param config.progress 指定动画执行的进度，默认为1，即动画执行到100%，该数字范围为0-1
   */
  function triggerAnimation(
    id: string | string[],
    reverse: boolean | boolean[] = false,
    config: {
      duration?: number;
      progress?: number;
    } = {}
  ) {
    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 reverse = reverseArray[index] || false;
      // 不指定反向播放且group处于初始状态时播放正常动画
      if (!reverse && unchanged) {
        animationManager.value[id] = false;
        animateByKey(id, false, config);
        return;
      }
      if (reverse && !unchanged) {
        animationManager.value[id] = true;
        animateByKey(id, true, config);
        return;
      }
    });
  }

  // 直接控制动画的方法
  const animateElement = (
    elementId: string,
    reverse: boolean = false,
    config: {
      duration?: number;
      progress?: number;
    } = {}
  ) => {
    const { duration = 3000, progress = 1 } = config;
    const el = animationElements.get(elementId);
    const info = elementInfo.get(elementId);
    const percentage = _.clamp(progress, 0, 1);

    if (!el || !info) return;

    // 应用动画
    if (info.transforms && info.transforms.length > 1) {
      const endTransform = info.transforms[Math.floor((info.transforms.length - 1) * percentage)];
      const startTransform = info.transforms[Math.floor((info.transforms.length - 1) * (1 - percentage))];
      el.style.transition = `transform ${duration}ms`;
      el.setAttribute('transform', reverse ? startTransform : endTransform);
    }
    if (info.opacity && info.opacity.length > 1) {
      const endOpacity = info.opacity[Math.floor((info.opacity.length - 1) * percentage)];
      const startOpacity = info.opacity[Math.floor((info.opacity.length - 1) * (1 - percentage))];
      el.style.transition = `opacity ${duration}ms`;
      el.setAttribute('opacity', reverse ? startOpacity : endOpacity);
    }
  };

  // 批量控制同一key的所有元素
  const animateByKey = (
    key: string,
    reverse: boolean = false,
    config: {
      duration?: number;
      progress?: number;
    } = {}
  ) => {
    animationElements.forEach((__, elementId) => {
      const info = elementInfo.get(elementId);
      if (info && info.key === key) {
        animateElement(elementId, reverse, config);
      }
    });
  };

  return {
    animationElements,
    triggerAnimation,
    animateElement,
    animateByKey,
  };
}