addimated/lib/TimingAnimation.js

An always interruptable, declarative animation library for React

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import invariant from "invariant";
import warning from "warning";
import { Animation } from "./Animation";
import * as Easing from "./Easing";
import { withDefault } from "./WithDefault";
var easeInOut = Easing.inOut(Easing.ease);

var TimingAnimation =
/*#__PURE__*/
function (_Animation) {
  _inherits(TimingAnimation, _Animation);

  function TimingAnimation(config) {
    var _this;

    _classCallCheck(this, TimingAnimation);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(TimingAnimation).call(this));
    _this.startTime = null;
    _this.currentTime = null;
    _this.toValue = config.toValue;
    _this.easing = withDefault(config.easing, easeInOut);
    _this.duration = withDefault(config.duration, 500);
    _this.delay = withDefault(config.delay, 0);
    return _this;
  }

  _createClass(TimingAnimation, [{
    key: "start",
    value: function start(animatedVal, fromValue, onEnd) {
      animatedVal.model = this.toValue;
      this.active = true;
      this.fromValue = fromValue - this.toValue;
      this.toValue = 0;
      this.endCallback = onEnd;
      this.currentTime = performance.now();
      this.startTime = this.currentTime + this.delay;
      return animatedVal.animations.concat(this);
    }
  }, {
    key: "step",
    value: function step(timestamp) {
      var startTime = this.startTime;
      process.env.NODE_ENV !== "production" ? warning(startTime != null, "Attempted to step an animation which hasn't started") : void 0;

      if (!this.ended && timestamp >= startTime + this.duration) {
        this.stop(true);
      }

      this.currentTime = timestamp;
    }
  }, {
    key: "getValue",
    value: function getValue() {
      var toValue = this.toValue;
      var fromValue = this.fromValue;
      var currentTime = this.currentTime;
      var startTime = this.startTime;
      !(currentTime && startTime) ? process.env.NODE_ENV !== "production" ? invariant(false, "Attempted to get the value of an animation which hasn't started") : invariant(false) : void 0;

      if (currentTime <= startTime) {
        return fromValue;
      } else {
        return fromValue + this.easing((currentTime - startTime) / this.duration) * (toValue - fromValue);
      }
    }
  }, {
    key: "stop",
    value: function stop() {
      var finished = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
      this.ended = true;
      this.endCallback && this.endCallback({
        finished: finished
      });
    }
  }]);

  return TimingAnimation;
}(Animation);

export { TimingAnimation };
//# sourceMappingURL=TimingAnimation.js.map