LottieSprite.ts

LottieSprite.ts

import {IDestroyOptions,Sprite,Texture} from "pixi.js"
import lottie, { AnimationConfigWithPath, AnimationDirection, AnimationItem, AnimationSegment } from "lottie-web";

interface LottieSpriteParams{
  path?:string;
  animationData?:Object;
  loop?:boolean;
  autoplay?:boolean;
  onConfigReady?:()=>void,
}


export default class LottieSprite extends Sprite{
  private _context:CanvasRenderingContext2D;
  private _animationItem:AnimationItem;
  constructor(params:LottieSpriteParams){
    const canvas=document.createElement("canvas")!;
    const texture=Texture.from(canvas);
    super(texture);
    this._context=canvas.getContext("2d")!;

    interface MyLottieParams extends AnimationConfigWithPath<"canvas">{
      animationData?:Object;
    }
    const lottieParams:MyLottieParams={
      container: null as any as HTMLDivElement,
      renderer:"canvas",
      loop:params.loop,
      autoplay:params.autoplay,
      path:params.path,
      animationData:params.animationData,
      rendererSettings:{
        context:this._context,
      },
    };
    this._animationItem=lottie.loadAnimation(lottieParams);

    const onConfigReadyInternal=()=>{
      interface AnimationData{
        w:number;
        h:number;
      };
      const animationData=((this._animationItem as any ).animationData as AnimationData);
      this._context.canvas.width=animationData.w;
      this._context.canvas.height=animationData.h;

      this._animationItem.renderer.updateContainerSize();
      if(params.onConfigReady){
        params.onConfigReady();
      }
    };

    if(params.animationData){
      // callback later
      setTimeout(onConfigReadyInternal,0);
    }else{
      this._animationItem.addEventListener("config_ready",onConfigReadyInternal);
  
    }

    this._animationItem.addEventListener("enterFrame",()=>{
      this.texture.update();
    });

  }

  public destroy(options?: boolean | IDestroyOptions | undefined): void {
    super.destroy(options);
    this._animationItem.destroy();
  }

  public play(){
    this._animationItem.play();
  }
  public stop(){
    this._animationItem.stop();
  }
  public togglePause(){
    this._animationItem.togglePause();
  }
  public pause(){
    this._animationItem.pause();
  }
  public goToAndStop(value:number|string,isFrame?:boolean){
    this._animationItem.goToAndStop(value,isFrame);
  }
  public goToAndPlay(value:number|string,isFrame?:boolean){
    this._animationItem.goToAndPlay(value,isFrame);
  }
  
  public setSpeed(speed:number){
    this._animationItem.setSpeed(speed);
  }
  public setDirection(direction:AnimationDirection){
    this._animationItem.setDirection(direction);
  }
  public playSegments(segments:AnimationSegment|AnimationSegment[],forceFlag?:boolean){
    this._animationItem.playSegments(segments,forceFlag);
  }
  public setSubframe(useSubFrames:boolean){
    this._animationItem.setSubframe(useSubFrames);
  }

  public get currentFrame():number{
    return this._animationItem.currentFrame;
  }
  public get firstFrame():number{
    return this._animationItem.firstFrame;
  }
  public get totalFrames():number{
    return this._animationItem.totalFrames;
  }
  public get frameRate():number{
    return this._animationItem.frameRate;
  }


}