import lottie from 'lottie-web'

lottie.loadAnimation({
  container: element, 
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' 
});

bodymovin.loadAnimation({
  container: element,  
  renderer: 'svg', //canvas/html
  loop: true,
  autoplay: true,
  path: 'data.json' 
});

export type AnimationDirection = 1 | -1;//播放方向
export type AnimationSegment = [number, number];
export type AnimationEventName = 'enterFrame' | 'loopComplete' | 'complete' | 'segmentStart' | 'destroy' | 'config_ready' | 'data_ready' | 'DOMLoaded' | 'error';
export type AnimationEventCallback<T = any> = (args: T) => void;

export type AnimationItem = {
    play(): void;//播放动画
    stop(): void;//停止动画
    pause(): void;//暂停动画
    resize(): void; 
    setLocationHref(href: string): void;
    setSpeed(speed: number): void;
    goToAndPlay(value: number, isFrame?: boolean): void; //跳到某一帧动画，并播放
    goToAndStop(value: number, isFrame?: boolean): void; //跳到某一帧动画，并停止
    setDirection(direction: AnimationDirection): void;//方向
    playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag?: boolean): void;
    setSubframe(useSubFrames: boolean): void;
    destroy(): void;
    getDuration(inFrames?: boolean): number;
    triggerEvent<T = any>(name: AnimationEventName, args: T): void; //触发事件 AnimationEventName
    addEventListener<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;//监听事件
    removeEventListener<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;//移除
}

export type BaseRendererConfig = {
    imagePreserveAspectRatio?: string;
    className?: string;
};

export type SVGRendererConfig = BaseRendererConfig & {
    title?: string;
    description?: string;
    preserveAspectRatio?: string;
    progressiveLoad?: boolean;
    hideOnTransparent?: boolean;
    viewBoxOnly?: boolean;
    viewBoxSize?: string;
    focusable?: boolean;
};

export type CanvasRendererConfig = BaseRendererConfig & {
    clearCanvas?: boolean;
    context?: CanvasRenderingContext2D;
    progressiveLoad?: boolean;
    preserveAspectRatio?: string;
};

export type HTMLRendererConfig = BaseRendererConfig & {
    hideOnTransparent?: boolean;
};

export type AnimationConfig = {
    container: Element;//挂载dom
    renderer?: 'svg' | 'canvas' | 'html';//渲染类型
    loop?: boolean | number;//是否循环
    autoplay?: boolean;//是否自动播放
    name?: string;//名字
    rendererSettings?: SVGRendererConfig | CanvasRendererConfig | HTMLRendererConfig;
}

export type AnimationConfigWithPath = AnimationConfig & {
    path?: string;// path设置
}

export type AnimationConfigWithData = AnimationConfig & {
    animationData?: any; //data设置
}

type LottiePlayer = {
    play(name?: string): void; //播放动画
    stop(name?: string): void; //停止播放动画
    setSpeed(speed: number, name?: string): void;//设置播放速度
    setDirection(direction: AnimationDirection, name?: string): void; // 设置播放方向
    searchAnimations(animationData?: any, standalone?: boolean, renderer?: string): void;
    loadAnimation(params: AnimationConfigWithPath | AnimationConfigWithData): AnimationItem;//加载动画，并返回一个 AnimationItem类型
    destroy(name?: string): void;//销毁
    registerAnimation(element: Element, animationData?: any): void; //注册动画
    setQuality(quality: string | number): void;
};

declare const Lottie: LottiePlayer;

export default Lottie;

let item:AnimationItem = lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

{
    "fr": 30, // 帧率
    "ip": 0, // 起始关键帧
    "op": 20, // 结束关键帧
    "w": 150, // 视图宽
    "h": 130, // 视图高
    "assets": [], // 资源集合 
    "layers": [{ // 图层
        "ty": 0, // 图层类型。
        "refId": "comp_0", // 引用的资源，图片/预合成层
        "ks": {}, // 变换。对应AE中的变换设置，下面有详细介绍
        layer: [], // 该图层包含的子图层
        shapes: [], // 形状图层
        "w": 1334,
        "h": 750,
        "bm": 0
    }], // 图层集合
    "masker": [] // 蒙层集合
}