Method define

adev/src/app/features/home/animation/animation.ts:96–137

* Define the animation. * * @param definition Definition (i.e. `AnimationRule` array) * @returns The animation

(definition: AnimationDefinition)

   * @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))
      .map((rule) => {
        if (rule.timeframe) {
          const from: ParsedStyles = {};
          const to: ParsedStyles = {};

          for (const [prop, val] of Object.entries(rule.from)) {
            from[prop] = cssValueParser(val);
          }
          for (const [prop, val] of Object.entries(rule.to)) {
            to[prop] = cssValueParser(val);
          }
          // Convert to milliseconds.
          const msTimeframe = rule.timeframe.map((t) => t * MS) as [number, number];

          return {...rule, from, to, timeframe: msTimeframe};
        } else {
          const styles: ParsedStyles = {};

          for (const [prop, val] of Object.entries(rule.styles)) {
            styles[prop] = cssValueParser(val);
          }
          // Convert to milliseconds.
          const msAt = rule.at * MS;

          return {...rule, styles, at: msAt};
        }
      });

    // Calculate the duration of the animation.
    // IMPORTANT: Use parsed rules with milliseconds.
    this._duration = Math.max(...this.rules.map((r) => getEndTime(r)));

    return this;
  }

  /** Play the animation. */
  play() {