@douyinfe/semi-animation 2.0.8 → 2.1.0-next.0

package/lib/cjs/index.d.ts

@@ -0,0 +1,6 @@
+import getEasing, { easingMap } from './src/getEasing';
+import { events } from './src/constants';
+export { default as Animation } from './src/Animation';
+export { default as interpolate } from './src/interpolate';
+export { default as presets } from './src/presets';
+export { getEasing, easingMap, events };

package/lib/cjs/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "Animation", {
+  enumerable: true,
+  get: function () {
+    return _Animation.default;
+  }
+});
+
+_Object$defineProperty(exports, "easingMap", {
+  enumerable: true,
+  get: function () {
+    return _getEasing.easingMap;
+  }
+});
+
+_Object$defineProperty(exports, "events", {
+  enumerable: true,
+  get: function () {
+    return _constants.events;
+  }
+});
+
+_Object$defineProperty(exports, "getEasing", {
+  enumerable: true,
+  get: function () {
+    return _getEasing.default;
+  }
+});
+
+_Object$defineProperty(exports, "interpolate", {
+  enumerable: true,
+  get: function () {
+    return _interpolate.default;
+  }
+});
+
+_Object$defineProperty(exports, "presets", {
+  enumerable: true,
+  get: function () {
+    return _presets.default;
+  }
+});
+
+var _getEasing = _interopRequireWildcard(require("./src/getEasing"));
+
+var _constants = require("./src/constants");
+
+var _Animation = _interopRequireDefault(require("./src/Animation"));
+
+var _interpolate = _interopRequireDefault(require("./src/interpolate"));
+
+var _presets = _interopRequireDefault(require("./src/presets"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/cjs/src/Animation.d.ts

@@ -0,0 +1,55 @@
+import Event from './utils/Event';
+/**
+ * @summary
+ *
+ * Lifecycle hook:
+ * start, pause, resume, stop, frame, rest
+ *
+ * Binding method:
+ * const animation = new Animation (); animation.on ('start | frame | rest ', () => {});
+ */
+export default class Animation extends Event {
+    _config: Record<string, any>;
+    _props: Record<string, any>;
+    _from: Record<string, any>;
+    _to: Record<string, any>;
+    _delay: number;
+    _currentVelocity: Record<string, any>;
+    _currentStyle: Record<string, any>;
+    _lastIdealStyle: Record<string, any>;
+    _lastIdealVelocity: Record<string, any>;
+    _frameCount: number;
+    _prevTime: number;
+    _timer: any;
+    _startedTime: number;
+    _ended: boolean;
+    _stopped: boolean;
+    _wasAnimating: boolean;
+    _started: boolean;
+    _paused: boolean;
+    _accumulatedTime: Record<string, any>;
+    _pausedTime: number;
+    _destroyed: boolean;
+    constructor(props?: {}, config?: {});
+    _wrapConfig(object: {
+        [x: string]: any;
+    }, config: {
+        delay?: string;
+    }): {};
+    initStates(props?: Record<string, any>, config?: Record<string, any>): void;
+    animate(): void;
+    start(): void;
+    end(): void;
+    pause(): void;
+    resume(): void;
+    stop(): void;
+    destroy(): void;
+    resetPlayStates(): void;
+    reset(): void;
+    reverse(): void;
+    getCurrentStates(): {
+        [x: string]: any;
+    };
+    getInitialStates(): {};
+    getFinalStates(): {};
+}

package/lib/cjs/src/Animation.js

@@ -0,0 +1,323 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _now = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/date/now"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _parseInt2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-int"));
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _Event = _interopRequireDefault(require("./utils/Event"));
+
+var _shouldStopAnimation = _interopRequireDefault(require("./shouldStopAnimation"));
+
+var _shouldUseBezier = _interopRequireDefault(require("./shouldUseBezier"));
+
+var _stripStyle = _interopRequireDefault(require("./stripStyle"));
+
+var _stepper = _interopRequireDefault(require("./stepper"));
+
+var _mapToZero = _interopRequireDefault(require("./mapToZero"));
+
+var _wrapValue = _interopRequireDefault(require("./wrapValue"));
+
+/* eslint-disable max-depth */
+
+/* eslint-disable eqeqeq */
+
+/* eslint-disable max-lines-per-function */
+const now = () => (0, _now.default)();
+
+const msPerFrame = 1000 / 60;
+/**
+ * @summary
+ *
+ * Lifecycle hook:
+ * start, pause, resume, stop, frame, rest
+ *
+ * Binding method:
+ * const animation = new Animation (); animation.on ('start | frame | rest ', () => {});
+ */
+
+class Animation extends _Event.default {
+  constructor() {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    super();
+    this._props = (0, _assign.default)({}, props);
+    this._config = (0, _assign.default)({}, config);
+    this.initStates();
+  }
+
+  _wrapConfig(object, config) {
+    config = config && typeof config === 'object' ? config : this._config;
+    const ret = {};
+
+    for (const key of (0, _keys.default)(object)) {
+      ret[key] = (0, _wrapValue.default)(object[key], config);
+    }
+
+    return ret;
+  }
+
+  initStates(props, config) {
+    props = props && typeof props === 'object' ? props : this._props;
+    config = config && typeof config === 'object' ? config : this._config;
+    const {
+      from,
+      to
+    } = props;
+    this._from = {};
+
+    if (from && typeof from) {
+      for (const key of (0, _keys.default)(from)) {
+        this._from[key] = typeof from[key] === 'object' && from[key].val ? from[key].val : from[key];
+      }
+    }
+
+    this._to = this._wrapConfig(to, config);
+    this._delay = (0, _parseInt2.default)(config.delay) || 0;
+    const currentStyle = this._from && (0, _stripStyle.default)(this._from) || (0, _stripStyle.default)(this._to);
+    const currentVelocity = (0, _mapToZero.default)(currentStyle);
+    this._currentStyle = (0, _assign.default)({}, currentStyle);
+    this._currentVelocity = (0, _assign.default)({}, currentVelocity);
+    this._lastIdealStyle = (0, _assign.default)({}, currentStyle);
+    this._lastIdealVelocity = (0, _assign.default)({}, currentVelocity);
+    this.resetPlayStates();
+    this._frameCount = 0;
+    this._prevTime = 0;
+  }
+
+  animate() {
+    if (this._timer != null) {
+      return;
+    }
+
+    this._timer = requestAnimationFrame(timestamp => {
+      const nowTime = now(); // stop animation and emit onRest event
+
+      if ((0, _shouldStopAnimation.default)(this._currentStyle, this._to, this._currentVelocity, this._startedTime || nowTime, nowTime) || this._ended || this._stopped) {
+        if (this._wasAnimating && !this._ended && !this._stopped) {
+          // should emit reset in settimeout for delay msPerframe
+          this._timer = (0, _setTimeout2.default)(() => {
+            clearTimeout(this._timer);
+            this._timer = null;
+            this._ended = true;
+            this.emit('rest', this.getCurrentStates());
+          }, msPerFrame);
+        }
+
+        this.resetPlayStates();
+        return;
+      }
+
+      if (!this._started) {
+        this._started = true;
+        this.emit('start', this.getCurrentStates());
+      }
+
+      this._stopped = false;
+      this._paused = false;
+      this._wasAnimating = true;
+
+      if (this._startedTime === 0) {
+        this._startedTime = nowTime;
+      }
+
+      const currentTime = nowTime;
+      const timeDelta = currentTime - this._prevTime;
+      this._prevTime = currentTime;
+
+      if (currentTime - this._startedTime < this._delay) {
+        this._timer = null;
+        this.animate();
+      }
+
+      const newLastIdealStyle = {};
+      const newLastIdealVelocity = {};
+      const newCurrentStyle = {};
+      const newCurrentVelocity = {};
+      const toKeys = this._to && (0, _keys.default)(this._to) || [];
+
+      for (const key of toKeys) {
+        const styleValue = this._to[key];
+        this._accumulatedTime[key] = typeof this._accumulatedTime[key] !== 'number' ? timeDelta : this._accumulatedTime[key] + timeDelta;
+        const from = this._from[key] != null && typeof this._from[key] === 'object' ? this._from[key].val : this._from[key];
+        const to = styleValue.val;
+
+        if (typeof styleValue === 'number') {
+          newCurrentStyle[key] = styleValue;
+          newCurrentVelocity[key] = 0;
+          newLastIdealStyle[key] = styleValue;
+          newLastIdealVelocity[key] = 0;
+        } else {
+          let newLastIdealStyleValue = this._lastIdealStyle[key];
+          let newLastIdealVelocityValue = this._lastIdealVelocity[key];
+
+          if ((0, _shouldUseBezier.default)(this._config) || (0, _shouldUseBezier.default)(styleValue)) {
+            // easing
+            const {
+              easing,
+              duration
+            } = styleValue;
+            newLastIdealStyleValue = from + easing((currentTime - this._startedTime) / duration) * (to - from);
+
+            if (currentTime >= this._startedTime + duration) {
+              newLastIdealStyleValue = to;
+              styleValue.done = true;
+            }
+
+            newLastIdealStyle[key] = newLastIdealStyleValue;
+            newCurrentStyle[key] = newLastIdealStyleValue;
+          } else if (to != null && to === this._currentStyle[key]) {
+            newCurrentStyle[key] = to;
+            newCurrentVelocity[key] = 0;
+            newLastIdealStyle[key] = to;
+            newLastIdealVelocity[key] = 0;
+          } else {
+            // spring
+            const currentFrameCompletion = (this._accumulatedTime[key] - Math.floor(this._accumulatedTime[key] / msPerFrame) * msPerFrame) / msPerFrame;
+            const framesToCatchUp = Math.floor(this._accumulatedTime[key] / msPerFrame);
+
+            for (let i = 0; i < framesToCatchUp; i++) {
+              [newLastIdealStyleValue, newLastIdealVelocityValue] = (0, _stepper.default)(msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.tension, styleValue.friction, styleValue.precision);
+            }
+
+            const [nextIdealX, nextIdealV] = (0, _stepper.default)(msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.tension, styleValue.friction, styleValue.precision);
+            newCurrentStyle[key] = newLastIdealStyleValue + (nextIdealX - newLastIdealStyleValue) * currentFrameCompletion;
+            newCurrentVelocity[key] = newLastIdealVelocityValue + (nextIdealV - newLastIdealVelocityValue) * currentFrameCompletion;
+            newLastIdealStyle[key] = newLastIdealStyleValue;
+            newLastIdealVelocity[key] = newLastIdealVelocityValue;
+            this._accumulatedTime[key] -= framesToCatchUp * msPerFrame;
+          }
+        }
+      }
+
+      this._timer = null;
+      this._currentStyle = (0, _assign.default)({}, newCurrentStyle);
+      this._currentVelocity = (0, _assign.default)({}, newCurrentVelocity);
+      this._lastIdealStyle = (0, _assign.default)({}, newLastIdealStyle);
+      this._lastIdealVelocity = (0, _assign.default)({}, newLastIdealVelocity); // console.log(newCurrentStyle);
+
+      if (!this._destroyed) {
+        this.emit('frame', this.getCurrentStates());
+        this.animate();
+      }
+    });
+  }
+
+  start() {
+    this._prevTime = now();
+    this._startedTime = now();
+    this.animate();
+  }
+
+  end() {
+    if (!this._ended) {
+      this._ended = true;
+      this._currentStyle = this.getFinalStates();
+      this.emit('frame', this.getFinalStates());
+      this.emit('rest', this.getFinalStates());
+    }
+
+    this.destroy();
+  }
+
+  pause() {
+    if (!this._paused) {
+      this._pausedTime = now();
+      this._paused = true;
+      this.emit('pause', this.getCurrentStates());
+      this.destroy();
+      this._destroyed = false;
+    }
+  }
+
+  resume() {
+    if (this._started && this._paused) {
+      const nowTime = now();
+      const pausedDuration = nowTime - this._pausedTime;
+      this._paused = false; // should add with pausedDuration
+
+      this._startedTime += pausedDuration;
+      this._prevTime += pausedDuration;
+      this._pausedTime = 0;
+      this.emit('resume', this.getCurrentStates());
+      this.animate();
+    }
+  }
+
+  stop() {
+    this.destroy();
+
+    if (!this._stopped) {
+      this._stopped = true; // this.emit('frame', this.getInitialStates());
+
+      this.emit('stop', this.getInitialStates());
+      this.initStates();
+    }
+  }
+
+  destroy() {
+    cancelAnimationFrame(this._timer);
+    clearTimeout(this._timer);
+    this._timer = null;
+    this._destroyed = true;
+  }
+
+  resetPlayStates() {
+    this._started = false;
+    this._stopped = false;
+    this._ended = false;
+    this._paused = false;
+    this._destroyed = false;
+    this._timer = null;
+    this._wasAnimating = false;
+    this._accumulatedTime = {};
+    this._startedTime = 0;
+    this._pausedTime = 0;
+  }
+
+  reset() {
+    this.destroy();
+    this.initStates();
+  }
+
+  reverse() {
+    this.destroy();
+    const props = (0, _assign.default)({}, this._props);
+    const [from, to] = [props.to, props.from];
+    props.from = from;
+    props.to = to;
+    this._props = (0, _assign.default)({}, props);
+    this.initStates();
+  }
+
+  getCurrentStates() {
+    return (0, _assign.default)({}, this._currentStyle);
+  }
+
+  getInitialStates() {
+    return (0, _assign.default)({}, (0, _stripStyle.default)(this._props.from));
+  }
+
+  getFinalStates() {
+    return (0, _assign.default)({}, (0, _stripStyle.default)(this._props.to));
+  }
+
+}
+
+exports.default = Animation;

package/lib/cjs/src/constants.d.ts

@@ -0,0 +1 @@
+export declare const events: string[];

package/lib/cjs/src/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.events = void 0;
+const events = ['start', 'frame', 'pause', 'resume', 'stop', 'rest'];
+exports.events = events;

package/lib/cjs/src/getEasing.d.ts

@@ -0,0 +1,10 @@
+export declare type BezierArgs = [number, number, number, number];
+export declare const easingMap: {
+    linear: number[];
+};
+/**
+ * get easing function
+ * @param {string|Function} easing
+ * @returns {Function}
+ */
+export default function getEasing(easing: string): any;

package/lib/cjs/src/getEasing.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = getEasing;
+exports.easingMap = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _parseFloat2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-float"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
+
+var _bezierEasing = _interopRequireDefault(require("bezier-easing"));
+
+function minMax(val, min, max) {
+  return Math.min(Math.max(val, min), max);
+}
+
+function parseEasingParameters(string) {
+  var _context;
+
+  const match = /\(([^)]+)\)/.exec(string);
+  return match ? (0, _map.default)(_context = match[1].split(',')).call(_context, p => (0, _parseFloat2.default)(p)) : [];
+} // Elastic easing adapted from jQueryUI http://api.jqueryui.com/easings/
+
+
+function elastic() {
+  let amplitude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  let period = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
+  const a = minMax(amplitude, 1, 10);
+  const p = minMax(period, 0.1, 2);
+  return t => t === 0 || t === 1 ? t : -a * Math.pow(2, 10 * (t - 1)) * Math.sin((t - 1 - p / (Math.PI * 2) * Math.asin(1 / a)) * (Math.PI * 2) / p);
+} // anime.js/src/index.js
+
+
+const easingMap = (() => {
+  const names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Elastic']; // Approximated Penner equations http://matthewlein.com/ceaser/
+
+  const curves = {
+    In: [[0.55, 0.085, 0.68, 0.53]
+    /* inQuad */
+    , [0.55, 0.055, 0.675, 0.19]
+    /* inCubic */
+    , [0.895, 0.03, 0.685, 0.22]
+    /* inQuart */
+    , [0.755, 0.05, 0.855, 0.06]
+    /* inQuint */
+    , [0.47, 0.0, 0.745, 0.715]
+    /* inSine */
+    , [0.95, 0.05, 0.795, 0.035]
+    /* inExpo */
+    , [0.6, 0.04, 0.98, 0.335]
+    /* inCirc */
+    , [0.6, -0.28, 0.735, 0.045]
+    /* inBack */
+    , elastic
+    /* inElastic */
+    ],
+    Out: [[0.25, 0.46, 0.45, 0.94]
+    /* outQuad */
+    , [0.215, 0.61, 0.355, 1.0]
+    /* outCubic */
+    , [0.165, 0.84, 0.44, 1.0]
+    /* outQuart */
+    , [0.23, 1.0, 0.32, 1.0]
+    /* outQuint */
+    , [0.39, 0.575, 0.565, 1.0]
+    /* outSine */
+    , [0.19, 1.0, 0.22, 1.0]
+    /* outExpo */
+    , [0.075, 0.82, 0.165, 1.0]
+    /* outCirc */
+    , [0.175, 0.885, 0.32, 1.275]
+    /* outBack */
+    , (a, p) => t => 1 - elastic(a, p)(1 - t)
+    /* outElastic */
+    ],
+    InOut: [[0.455, 0.03, 0.515, 0.955]
+    /* inOutQuad */
+    , [0.645, 0.045, 0.355, 1.0]
+    /* inOutCubic */
+    , [0.77, 0.0, 0.175, 1.0]
+    /* inOutQuart */
+    , [0.86, 0.0, 0.07, 1.0]
+    /* inOutQuint */
+    , [0.445, 0.05, 0.55, 0.95]
+    /* inOutSine */
+    , [1.0, 0.0, 0.0, 1.0]
+    /* inOutExpo */
+    , [0.785, 0.135, 0.15, 0.86]
+    /* inOutCirc */
+    , [0.68, -0.55, 0.265, 1.55]
+    /* inOutBack */
+    , (a, p) => t => t < 0.5 ? elastic(a, p)(t * 2) / 2 : 1 - elastic(a, p)(t * -2 + 2) / 2
+    /* inOutElastic */
+    ]
+  };
+  const eases = {
+    linear: [0.25, 0.25, 0.75, 0.75]
+  };
+
+  for (const coords of (0, _keys.default)(curves)) {
+    var _context2;
+
+    (0, _forEach.default)(_context2 = curves[coords]).call(_context2, (ease, i) => {
+      eases['ease' + coords + names[i]] = ease;
+    });
+  }
+
+  return eases;
+})();
+/**
+ * get easing function
+ * @param {string|Function} easing
+ * @returns {Function}
+ */
+
+
+exports.easingMap = easingMap;
+
+function getEasing(easing) {
+  if (typeof easing === 'function') {
+    return easing;
+  }
+
+  if (!easing || typeof easing !== 'string') {
+    easing = 'linear';
+  } else {
+    easing = (0, _trim.default)(easing).call(easing);
+  }
+
+  let name = easing.split('(')[0];
+  const args = parseEasingParameters(easing);
+  let ease;
+
+  if (name === 'cubic-bezier' || name === 'cubicBezier') {
+    return (0, _bezierEasing.default)(...(args.length ? args : easingMap.linear));
+  } else {
+    // eslint-disable-next-line eqeqeq
+    if (!name || typeof name !== 'string' || typeof name === 'string' && easingMap[name] == null) {
+      name = 'linear';
+    }
+
+    ease = easingMap[name];
+
+    if (typeof ease === 'function') {
+      return ease(...args);
+    } else if (args.length) {
+      return (0, _bezierEasing.default)(...args);
+    } else {
+      return (0, _bezierEasing.default)(...ease);
+    }
+  }
+}

package/lib/cjs/src/interpolate.d.ts

@@ -0,0 +1,13 @@
+/**
+ *
+ * @param {number|number[]|string|string[]} from
+ * @param {number|number[]|string|string[]} to
+ * @param {number} ratio
+ * @param {Function} [parser]
+ * @param {Function} [formatter]
+ * @returns {any}
+*/
+export declare type FromTo = string | number | (string | number)[];
+export declare type Parser = (value: FromTo) => any;
+export declare type Formatter = (value: any[]) => any;
+export default function interpolate(from: FromTo, to: FromTo, ratio?: number, parser?: Parser, formatter?: Formatter): any;