tweenkle/es/Tween.js

Lightweight tweening library for all your tweening and animation needs.

import Sister from 'sister';
import Linear from './easing/Linear';
var CSS_UNIT_REGEX = /([0-9]*)([a-zA-Z%]*)/;

var calculateValue = function calculateValue(startValue, endValue, ease, duration, progress) {
  /**
   * TODO: Setup CSS support for basic unit support. - @ryan
   */
  if (duration === 0) {
    return endValue;
  } // if (typeof startValue === 'string' || typeof endValue === 'string') {
  //   const [matchStart, start, unit] = CSS_UNIT_REGEX.exec(startValue);
  //   const [matchEnd, end] = CSS_UNIT_REGEX.exec(endValue);
  // }


  var diff = startValue > endValue ? -(startValue - endValue) : endValue - startValue;
  var value = ease(duration * progress, startValue, diff, duration);
  return startValue > endValue ? Math.max(endValue, Math.min(startValue, value)) : Math.max(startValue, Math.min(endValue, value));
};

var updateValue = function updateValue(ref) {
  if (ref.startValue instanceof Object) {
    var nextValue = {};
    Object.keys(ref.startValue).forEach(function (key) {
      nextValue[key] = calculateValue(ref.startValue[key], ref.endValue[key], ref.ease, ref.duration, ref.progress);
    });
    ref.value = nextValue;
    return;
  }

  ref.value = calculateValue(ref.startValue, ref.endValue, ref.ease, ref.duration, ref.progress);
};

var Tween = /*#__PURE__*/function () {
  function Tween(_ref) {
    var start = _ref.start,
        end = _ref.end,
        _ref$duration = _ref.duration,
        duration = _ref$duration === void 0 ? 1000 : _ref$duration,
        _ref$ease = _ref.ease,
        ease = _ref$ease === void 0 ? Linear : _ref$ease,
        _ref$delay = _ref.delay,
        delay = _ref$delay === void 0 ? 0 : _ref$delay;
    var emitter = new Sister();
    this.on = emitter.on;
    this.off = emitter.off;
    this.trigger = emitter.trigger;
    this.value = this.startValue = start;
    this.endValue = end;
    this.duration = duration;
    this.ease = ease;
    this.delay = delay;
    this.active = false;
    this.complete = false;
    this.progress = 0;
    this.endTime = null;
  }

  var _proto = Tween.prototype;

  _proto.start = function start() {
    this.endTime = Date.now() + this.duration * (1 - this.progress);
    this.trigger('start', {
      start: this.start,
      end: this.end,
      duration: this.duration,
      progress: this.progress,
      ease: this.ease,
      value: this.value
    });
    this.animationFrame = requestAnimationFrame(this.tick.bind(this));
    this.active = true;
    this.complete = false;
    return this;
  };

  _proto.stop = function stop() {
    if (this.animationFrame) {
      cancelAnimationFrame(this.animationFrame);
    }

    this.progress = this.progress + (this.endTime - Date.now()) / this.duration;
    this.endTime = null;
    this.active = false;
    updateValue(this);
    this.trigger('stop', {
      start: this.start,
      end: this.end,
      duration: this.duration,
      progress: this.progress,
      ease: this.ease,
      value: this.value
    });
    return this;
  };

  _proto.tick = function tick() {
    this.progress = Math.max(0, Math.min(1, 1 - (this.endTime - Date.now()) / this.duration));
    updateValue(this);
    var tickResponse = {
      start: this.startValue,
      end: this.endValue,
      duration: this.duration,
      progress: this.progress,
      ease: this.ease,
      value: this.value
    };
    this.trigger('tick', tickResponse);

    if (this.progress === 1 || this.duration === 0) {
      this.active = false;
      this.complete = true;
      return this.trigger('complete', tickResponse);
    }

    this.animationFrame = requestAnimationFrame(this.tick.bind(this));
  };

  return Tween;
}();

export default Tween;