Class Animation

adev/src/app/features/home/animation/animation.ts:46–507

 * CSS animation player/processor.
 */
export class Animation {
  private renderer: Renderer2;

  /** Parsed rules. Time is in milliseconds. */
  private rules: AnimationRule<ParsedStyles>[] = [];
  private config: AnimationConfig;
  private currentTime: number = 0;
  private allObjects = new Map<string, Element | Element[]>(); // selector; element(s)
  private activeStyles = new Map<string, ParsedStyles>(); // selector; ParsedStyles
  private animationFrameId: number | null = null;
  private completed: boolean = false;
  private plugins: AnimationPlugin[] = [];
  private _duration: number = 0;
  private readonly _isPlaying = signal<boolean>(false);
  private readonly _progress = signal<number>(0);

  /** Returns whether the animation is playing or not */
  isPlaying = this._isPlaying.asReadonly();

  /** Returns the animation progress (`[0,1]`) */
  progress = this._progress.asReadonly();

  constructor(
    layers: readonly AnimationLayerDirective[],
    injector: Injector,
    config?: Partial<AnimationConfig>,
  ) {
    this.renderer = injector.get(RendererFactory2).createRenderer(null, null);
    this.config = {...DEFAULT_CONFIG, ...(config || {})};

    // Set layer elements in the objects map.
    this.allObjects = new Map(layers.map((f) => [f.id(), f.elementRef.nativeElement]));
  }

  /** Animation duration. In milliseconds */
  get duration() {
    return this._duration;
  }

  /** Animation timestep (config). In milliseconds */
  get timestep() {
    return this.config.timestep;
  }

  /**
   * Define the animation.
   *
   * @param definition Definition (i.e. `AnimationRule` array)
   * @returns The animation
   */
  define(definition: AnimationDefinition) {
    this.reset();
    this.extractObjectsAndValidateRules(definition);

    // Parse the rules.
    // IMPORTANT: Parsed rules use milliseconds instead of seconds.
    this.rules = definition
      .sort((a, b) => getStartTime(a) - getStartTime(b))