Method updateFrame

adev/src/app/features/home/animation/animation.ts:289–371

* Update the frame/animation by a given time. * * @param time Time at which the animation should be rendered.

(time: number)

   * @param time Time at which the animation should be rendered.
   */
  private updateFrame(time: number) {
    const completedRules = this.rules.filter((r) => time >= getEndTime(r));
    const inProgressDynamicRules = this.rules.filter((r) => {
      const start = getStartTime(r);
      const end = getEndTime(r);
      // We exclude the static animation rules by `start < end` since `start == end`.
      return start < end && start <= time && time <= end;
    }) as DynamicAnimationRule<ParsedStyles>[];

    // All styles/styles state at `time`.
    const stylesState = new Map<string, ParsedStyles>();

    // Extract the completed rules (their styles) directly ...
    for (const rule of completedRules) {
      let objectStyles = stylesState.get(rule.selector) || {};
      objectStyles = {...objectStyles, ...getEndStyles(rule)};
      stylesState.set(rule.selector, objectStyles);
    }

    const deltaTime = time - this.currentTime;

    // ... and then calculate the change of the dynamic rules in progress.
    for (const rule of inProgressDynamicRules) {
      let timespan: number;
      let targetStyles: ParsedStyles; // Direction styles
      let sourceStyles: ParsedStyles; // Opposite direction styles
      let relativeDeltaT: number;

      // Determine the change direction. Negative Dt means going back in time; positive – forward.
      //
      // It's important to calculate the relative time since the global current time might go out of
      // rule boundaries which will scew the final change rate calculations.
      //
      // For example:
      // If the currentTime = 0; time = 2; for a rule active between [1, 5];
      // the Dt = 2, but only one second has passed from the rule's timespan,
      // i.e. we have to use a relative time which in this case is equal to timespan[0].
      // relativeDt = 1 (not 2); timespan = 4 (not 5); changeRate = 0.25 (not 0.4)
      if (deltaTime > 0) {
        const relativeTime = rule.timeframe[0];
        relativeDeltaT = time - relativeTime;
        timespan = getEndTime(rule) - relativeTime;
        targetStyles = rule.to;
        sourceStyles = rule.from;
      } else {
        const relativeTime = rule.timeframe[1];
        relativeDeltaT = time - relativeTime;
        timespan = relativeTime - getStartTime(rule);
        targetStyles = rule.from;
        sourceStyles = rule.to;
      }

      const changeRate = Math.abs(relativeDeltaT / timespan);
      const styles = stylesState.get(rule.selector) || {};

      for (const [prop, target] of Object.entries(targetStyles)) {
        const source = sourceStyles[prop];
        styles[prop] = calculateNextCssValue(source, target, changeRate);