@iconsets/svg-morpheus-ts/dist/types.d.ts

ESM TypeScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions. Refactored with modern TypeScript + Vite + pnpm stack. Supports both Chinese and English documentation.

import { default as Color } from 'colorjs.io';
export type EasingFunction = (t: number) => number;
/**
 * 可用的旋转方式
 */
export declare const rotations: readonly ["clock", "counterclock", "none", "random"];
/**
 * 动画图标的旋转方式
 */
export type Rotation = (typeof rotations)[number];
/**
 * {@link SVGMorpheus} 的配置选项
 */
export interface SVGMorpheusOptions extends ToMethodOptions {
    /**
     * Initial icon ID to display | 初始显示的图标 ID
     * Specifies which icon to display by default when SVGMorpheus is instantiated | 指定 SVGMorpheus 实例化后默认显示哪个图标
     * If not specified, the last icon in the SVG will be used as default | 如果不指定，将使用 SVG 中的最后一个图标作为默认图标
     */
    iconId?: string;
    /**
     * 只关注形状变化
     *
     * @remarks
     * 如果是单色的 svg 集合，此值为值，有一定的性能提升。
     */
    lite?: boolean;
}
export interface RawStyle {
    fill?: string;
    stroke?: string;
    opacity?: string;
    'fill-opacity'?: string;
    'stroke-opacity'?: string;
    'stroke-width'?: string;
}
export interface NormalizedStyle {
    /** Fill color or gradient reference | 填充颜色或渐变引用 */
    fill?: Color | string;
    /** Stroke color or gradient reference | 描边颜色或渐变引用 */
    stroke?: Color | string;
    /** Overall opacity | 整体透明度 */
    opacity?: number;
    /** Fill opacity | 填充透明度 */
    'fill-opacity'?: number;
    /** Stroke opacity | 描边透明度 */
    'stroke-opacity'?: number;
    /** Stroke width | 描边宽度 */
    'stroke-width'?: number;
}
export interface Transform {
    /** Rotation: [angle, centerX, centerY] | 旋转: [角度, 中心 X, 中心 Y] */
    rotate?: [number, number, number];
}
export type CurveSegment = (string | number)[];
export type CurveData = CurveSegment[];
export interface IconItem {
    /** SVG path data | SVG 路径数据 */
    path: string;
    /** Element attributes | 元素属性，比如 fill="red" */
    attrs: RawStyle;
    /** Element styles | 元素样式，比如 style="fill:red" */
    style: RawStyle;
    /** Curve data for animation | 用于动画的曲线数据 */
    curve?: CurveData;
    /** Normalized attributes | 标准化属性 */
    attrsNorm?: NormalizedStyle;
    /** Normalized styles | 标准化样式 */
    styleNorm?: NormalizedStyle;
    /** Transform data | 变换数据 */
    trans?: Transform;
    /** Transform string | 变换字符串 */
    transStr?: string;
}
export interface ViewBoxInfo {
    /** ViewBox values: [x, y, width, height] | ViewBox 值 */
    values: [number, number, number, number];
    /** Original viewBox string | 原始 viewBox 字符串 */
    original: string;
}
export interface DefsInfo {
    /** Gradient definitions | 渐变定义 */
    gradients: Record<string, string>;
    /** Pattern definitions | 图案定义 */
    patterns: Record<string, string>;
    /** Other definitions | 其他定义 */
    others: Record<string, string>;
    /** Raw defs element | 原始 defs 元素 */
    raw?: string;
}
export interface Icon {
    /** Icon identifier | 图标标识符 */
    id: string;
    /** Array of icon items | 图标项数组 */
    items: IconItem[];
    /** ViewBox information | ViewBox 信息 */
    viewBox?: ViewBoxInfo;
    /** SVG definitions | SVG 定义 */
    defs?: DefsInfo;
    /** Original SVG root attributes | 原始 SVG 根属性 */
    rootAttrs?: Record<string, string>;
}
export interface MorphNode {
    /** SVG path element | SVG 路径元素 */
    node: SVGPathElement;
    /** Source icon item index | 源图标项索引 */
    fromIconItemIdx: number;
    /** Target icon item index | 目标图标项索引 */
    toIconItemIdx: number;
}
export interface BoundingBox {
    /** X coordinate | X 坐标 */
    x: number;
    /** Y coordinate | Y 坐标 */
    y: number;
    /** Width | 宽度 */
    w: number;
    /** Height | 高度 */
    h: number;
    /** Center X coordinate | 中心 X 坐标 */
    cx: number;
    /** Center Y coordinate | 中心 Y 坐标 */
    cy: number;
}
export interface ToMethodOptions {
    /**
     * Animation duration in milliseconds | 动画持续时间（毫秒）
     * Overrides the instance default animation duration, only applies to current morph | 覆盖实例默认的动画持续时间，仅对当前这次变形生效
     * @example 0 // No animation | 没有动画
     * @example 500 // 0.5 second fast morph | 0.5 秒的快速变形
     */
    duration?: number;
    /**
     * Animation easing function name | 动画缓动函数名称
     * Overrides the instance default easing function, only applies to current morph | 覆盖实例默认的缓动函数，仅对当前这次变形生效
     * @example 'ease-in-out' // Slow start and end animation effect | 慢进慢出的动画效果
     */
    easing?: string;
    /**
     * Icon rotation direction | 图标旋转方向
     * Overrides the instance default rotation behavior, only applies to current morph | 覆盖实例默认的旋转行为，仅对当前这次变形生效
     * - 'clock': Clockwise rotation | 顺时针旋转
     * - 'counterclock': Counterclockwise rotation | 逆时针旋转
     * - 'none': No rotation | 不旋转
     * - 'random': Random rotation direction | 随机旋转方向
     */
    rotation?: Rotation;
}
/**
 * Callback function type for animation completion | 动画完成时的回调函数类型
 * Called after icon morphing animation completes, used for executing subsequent operations | 在图标变形动画完成后被调用，用于执行后续操作
 * @example
 * const callback = () => {
 *   console.log('Animation completed!'); // 动画已完成！
 * };
 */
export type CallbackFunction = () => void;
export interface EasingMap {
    [key: string]: EasingFunction;
}
//# sourceMappingURL=types.d.ts.map