silphius/app/util/transition.js

import {Ticker} from '@/util/promise.js';

import * as Easing from './easing';

export default function transition(object, properties) {
  const transitions = {};
  for (const key in properties) {
    const property = properties[key];
    const transition = {
      elapsed: 0,
      start: object[key],
      ...property,
    };
    if (!transition.easing) {
      transition.easing = Easing.easeOutQuad;
    }
    else {
      if ('string' === typeof transition.easing) {
        transition.easing = Easing[transition.easing];
      }
    }
    transitions[key] = transition;
  }
  let stop;
  const promise = new Ticker(
    (resolve) => {
      stop = resolve;
    },
    (elapsed, resolve) => {
      for (const key in transitions) {
        const transition = transitions[key];
        transition.elapsed += elapsed;
        if (transition.elapsed >= transition.duration) {
          object[key] = transition.start + transition.magnitude;
          resolve();
          return;
        }
        object[key] = transition.easing(
          transition.elapsed,
          transition.start,
          transition.magnitude,
          transition.duration,
        );
      }
    },
  );
  return {stop, transitions, promise};
}