rax-scrollview/es/timer.js

ScrollView component for Rax.

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { isWeb } from 'universal-env';
var requestAnimationFrame = isWeb && typeof window.requestAnimationFrame !== 'undefined' ? window.requestAnimationFrame : function (job) {
  return setTimeout(job, 16);
};
var cancelAnimationFrame = isWeb && typeof window.cancelAnimationFrame !== 'undefined' ? window.cancelAnimationFrame : clearTimeout;
var TYPES = {
  START: 'start',
  END: 'end',
  RUN: 'run',
  STOP: 'stop'
};
var easing = {
  easeOutSine: function easeOutSine(x) {
    return Math.sin(x * Math.PI / 2);
  }
};
var MIN_DURATION = 1;
var noop = function () {};
var Timer = /*#__PURE__*/function () {
  function Timer(config) {
    this.config = {
      easing: 'linear',
      duration: Infinity,
      onStart: noop,
      onRun: noop,
      onStop: noop,
      onEnd: noop
    };
    this.isfinished = false;
    this.start = void 0;
    this.percent = void 0;
    this.easingFn = void 0;
    this.now = void 0;
    this.t = void 0;
    this.duration = void 0;
    this.progress = void 0;
    this._hasFinishedPercent = void 0;
    this._stop = void 0;
    this._raf = void 0;
    this.config = _extends({}, this.config, config);
  }
  var _proto = Timer.prototype;
  _proto.run = function run() {
    var _this$config = this.config,
      duration = _this$config.duration,
      onStart = _this$config.onStart,
      onRun = _this$config.onRun;
    if (duration <= MIN_DURATION) {
      this.isfinished = true;
      onRun({
        percent: 1
      });
      this.stop();
    }
    if (this.isfinished) return;
    this._hasFinishedPercent = this._stop && this._stop.percent || 0;
    this._stop = null;
    this.start = Date.now();
    this.percent = 0;
    onStart({
      percent: 0,
      type: TYPES.START
    });
    // epsilon determines the precision of the solved values
    // let epsilon = 1000 / 60 / duration / 4;
    this.easingFn = easing[this.config.easing];
    this._run();
  };
  _proto._run = function _run() {
    var _this = this;
    var _this$config2 = this.config,
      onRun = _this$config2.onRun,
      onStop = _this$config2.onStop;
    this._raf && cancelAnimationFrame(this._raf);
    this._raf = requestAnimationFrame(function () {
      _this.now = Date.now();
      _this.t = _this.now - _this.start;
      _this.duration = _this.now - _this.start >= _this.config.duration ? _this.config.duration : _this.now - _this.start;
      _this.progress = _this.easingFn(_this.duration / _this.config.duration);
      _this.percent = _this.duration / _this.config.duration + _this._hasFinishedPercent;
      if (_this.percent >= 1 || _this._stop) {
        _this.percent = _this._stop && _this._stop.percent ? _this._stop.percent : 1;
        _this.duration = _this._stop && _this._stop.duration ? _this._stop.duration : _this.duration;
        onRun({
          percent: _this.progress,
          originPercent: _this.percent,
          t: _this.t,
          type: TYPES.RUN
        });
        onStop({
          percent: _this.percent,
          t: _this.t,
          type: TYPES.STOP
        });
        if (_this.percent >= 1) {
          _this.isfinished = true;
          _this.stop();
        }
        return;
      }
      onRun({
        percent: _this.progress,
        originPercent: _this.percent,
        t: _this.t,
        type: TYPES.RUN
      });
      _this._run();
    });
  };
  _proto.stop = function stop() {
    var onEnd = this.config.onEnd;
    this._stop = {
      percent: this.percent,
      now: this.now
    };
    onEnd({
      percent: 1,
      t: this.t,
      type: TYPES.END
    });
    cancelAnimationFrame(this._raf);
  };
  return Timer;
}();
export default Timer;