react-ui-animate 2.0.0-rc.7 → 3.0.0-rc.0

package/src/animation/core/controllers/SpringAnimation.ts

@@ -0,0 +1,218 @@
+import { Animation } from './Animation';
+import {
+  RequestAnimationFrame,
+  CancelAnimationFrame,
+} from './RequestAnimationFrame';
+
+import type { FluidValueConfig, ResultType } from '../types/animation';
+
+/**
+ * Class implementing spring based animation
+ */
+export class SpringAnimation extends Animation {
+  _overshootClamping: boolean;
+  _restDisplacementThreshold: number;
+  _restSpeedThreshold: number;
+  _initialVelocity?: number;
+  _lastVelocity: number;
+  _startPosition: number;
+  _lastPosition: number;
+  _position: number;
+  _fromValue: number;
+  _toValue: any;
+  _mass: number;
+  _tension: number;
+  _friction: number;
+  _lastTime: number;
+  _onFrame: (value: number) => void;
+  _animationFrame: any;
+  _timeout: any;
+
+  // Modifiers
+  _delay: number;
+  _onRest?: (value: ResultType) => void;
+  _onChange?: (value: number) => void;
+
+  constructor({
+    initialPosition,
+    config,
+  }: {
+    initialPosition: number;
+    config?: Omit<FluidValueConfig, 'duration' | 'easing'>;
+  }) {
+    super();
+
+    this._overshootClamping = false;
+    this._initialVelocity = 0;
+    this._lastVelocity = 0;
+    this._startPosition = initialPosition;
+    this._position = this._startPosition;
+
+    this._restDisplacementThreshold = config?.restDistance ?? 0.001;
+    this._restSpeedThreshold = config?.restDistance ?? 0.001;
+    this._mass = config?.mass ?? 1;
+    this._tension = config?.tension ?? 170;
+    this._friction = config?.friction ?? 26;
+    this._delay = config?.delay ?? 0;
+
+    this._onRest = config?.onRest;
+    this._onChange = config?.onChange;
+  }
+
+  onChange(value: number) {
+    this._onFrame(value);
+
+    if (this._lastPosition !== value) {
+      if (this._onChange) {
+        this._onChange(value);
+      }
+    }
+
+    this._lastPosition = value;
+  }
+
+  onUpdate() {
+    var now = Date.now();
+
+    const deltaTime = Math.min(now - this._lastTime, 64);
+    this._lastTime = now;
+
+    const c = this._friction;
+    const m = this._mass;
+    const k = this._tension;
+
+    const v0 = -this._lastVelocity;
+    const x0 = this._toValue - this._position;
+
+    const zeta = c / (2 * Math.sqrt(k * m)); // damping ratio
+    const omega0 = Math.sqrt(k / m); // undamped angular frequency of the oscillator (rad/ms)
+    const omega1 = omega0 * Math.sqrt(1 - zeta ** 2); // exponential decay
+
+    const t = deltaTime / 1000;
+
+    const sin1 = Math.sin(omega1 * t);
+    const cos1 = Math.cos(omega1 * t);
+
+    // under damped
+    const underDampedEnvelope = Math.exp(-zeta * omega0 * t);
+    const underDampedFrag1 =
+      underDampedEnvelope *
+      (sin1 * ((v0 + zeta * omega0 * x0) / omega1) + x0 * cos1);
+
+    const underDampedPosition = this._toValue - underDampedFrag1;
+    // This looks crazy -- it's actually just the derivative of the oscillation function
+    const underDampedVelocity =
+      zeta * omega0 * underDampedFrag1 -
+      underDampedEnvelope *
+        (cos1 * (v0 + zeta * omega0 * x0) - omega1 * x0 * sin1);
+
+    // critically damped
+    const criticallyDampedEnvelope = Math.exp(-omega0 * t);
+    const criticallyDampedPosition =
+      this._toValue - criticallyDampedEnvelope * (x0 + (v0 + omega0 * x0) * t);
+
+    const criticallyDampedVelocity =
+      criticallyDampedEnvelope *
+      (v0 * (t * omega0 - 1) + t * x0 * omega0 * omega0);
+
+    this.onChange(this._position);
+
+    const isOvershooting = () => {
+      if (this._overshootClamping && this._tension !== 0) {
+        return this._position < this._toValue
+          ? this._position > this._toValue
+          : this._position < this._toValue;
+      } else {
+        return false;
+      }
+    };
+
+    const isVelocity = Math.abs(this._lastVelocity) < this._restSpeedThreshold;
+    const isDisplacement =
+      this._tension === 0 ||
+      Math.abs(this._toValue - this._position) <
+        this._restDisplacementThreshold;
+
+    if (zeta < 1) {
+      this._position = underDampedPosition;
+      this._lastVelocity = underDampedVelocity;
+    } else {
+      this._position = criticallyDampedPosition;
+      this._lastVelocity = criticallyDampedVelocity;
+    }
+
+    if (isOvershooting() || (isVelocity && isDisplacement)) {
+      if (this._tension !== 0) {
+        this._lastVelocity = 0;
+        this._position = this._toValue;
+
+        this.onChange(this._position);
+      }
+      // clear lastTimestamp to avoid using stale value by the next spring animation that starts after this one
+      this._lastTime = 0;
+
+      this._debounceOnEnd({ finished: true, value: this._toValue });
+
+      return;
+    }
+
+    this._animationFrame = RequestAnimationFrame.current(
+      this.onUpdate.bind(this)
+    );
+  }
+
+  stop() {
+    this._active = false;
+    clearTimeout(this._timeout);
+    CancelAnimationFrame.current(this._animationFrame);
+    this._debounceOnEnd({ finished: false, value: this._position });
+  }
+
+  // Set value
+  set(toValue: number) {
+    this.stop();
+    this._position = toValue;
+    this._lastTime = 0;
+    this._lastVelocity = 0;
+    this.onChange(toValue);
+  }
+
+  start({
+    toValue,
+    onFrame,
+    previousAnimation,
+    onEnd,
+  }: {
+    toValue: number;
+    onFrame: (value: number) => void;
+    previousAnimation?: SpringAnimation;
+    onEnd?: (result: ResultType) => void;
+  }) {
+    const onStart: any = () => {
+      this._onFrame = onFrame;
+      this._active = true;
+      this._toValue = toValue;
+      this._onEnd = onEnd;
+
+      const now = Date.now();
+
+      if (previousAnimation instanceof SpringAnimation) {
+        this._lastVelocity =
+          previousAnimation._lastVelocity || this._lastVelocity || 0;
+        this._lastTime = previousAnimation._lastTime || now;
+      } else {
+        this._lastTime = now;
+      }
+
+      this._animationFrame = RequestAnimationFrame.current(
+        this.onUpdate.bind(this)
+      );
+    };
+
+    if (this._delay !== 0) {
+      this._timeout = setTimeout(() => onStart(), this._delay);
+    } else {
+      onStart();
+    }
+  }
+}

package/src/animation/core/controllers/TimingAnimation.ts

@@ -0,0 +1,152 @@
+import { Animation } from './Animation';
+import {
+  RequestAnimationFrame,
+  CancelAnimationFrame,
+} from './RequestAnimationFrame';
+import { Easing } from '../easing/Easing';
+
+import type { FluidValueConfig, ResultType } from '../types/animation';
+
+/**
+ * Class implementing timing based animation
+ */
+export class TimingAnimation extends Animation {
+  _startTime: number;
+  _fromValue: number;
+  _toValue: any;
+  _duration: number;
+  _easing: (value: number) => number;
+  _onFrame: (value: number) => void;
+  _animationFrame: any;
+  _timeout: any;
+  _lastPosition: number;
+  _position: number;
+
+  // Modifiers
+  _delay: number;
+  _tempDuration: number;
+  _onRest?: (value: ResultType) => void;
+  _onChange?: (value: number) => void;
+
+  constructor({
+    initialPosition,
+    config,
+  }: {
+    initialPosition: number;
+    config?: Omit<FluidValueConfig, 'mass' | 'friction' | 'tension'>;
+  }) {
+    super();
+
+    this._fromValue = initialPosition;
+    this._position = this._fromValue;
+    this._easing = config?.easing ?? Easing.linear;
+    this._duration = config?.duration ?? 500;
+    this._tempDuration = this._duration;
+
+    // Modifiers
+    // here immediate acts like duration: 0
+    if (config?.immediate) {
+      this._duration = 0;
+    }
+
+    this._delay = config?.delay ?? 0;
+    this._onRest = config?.onRest;
+    this._onChange = config?.onChange;
+  }
+
+  onChange(value: number) {
+    this._onFrame(value);
+
+    if (this._lastPosition !== value) {
+      if (this._onChange) {
+        this._onChange(value);
+      }
+    }
+
+    this._lastPosition = value;
+  }
+
+  onUpdate() {
+    const now = Date.now();
+
+    const runTime = now - this._startTime;
+
+    if (runTime >= this._duration) {
+      this._startTime = 0;
+      this._position = this._toValue;
+
+      this.onChange(this._position);
+
+      this._debounceOnEnd({ finished: true, value: this._position });
+      return;
+    }
+
+    const progress = this._easing(runTime / this._duration);
+
+    this._position =
+      this._fromValue + (this._toValue - this._fromValue) * progress;
+
+    this.onChange(this._position);
+
+    this._animationFrame = RequestAnimationFrame.current(
+      this.onUpdate.bind(this)
+    );
+  }
+
+  stop() {
+    this._active = false;
+    clearTimeout(this._timeout);
+    CancelAnimationFrame.current(this._animationFrame);
+    this._debounceOnEnd({ finished: false, value: this._position });
+  }
+
+  // Set value
+  set(toValue: number) {
+    this.stop();
+    this._position = toValue;
+    this.onChange(toValue);
+  }
+
+  start({
+    toValue,
+    onFrame,
+    previousAnimation,
+    onEnd,
+  }: {
+    toValue: number;
+    onFrame: (value: number) => void;
+    previousAnimation?: TimingAnimation;
+    onEnd?: (result: ResultType) => void;
+  }) {
+    const onStart: any = () => {
+      this._onFrame = onFrame;
+      this._active = true;
+      this._onEnd = onEnd;
+      this._toValue = toValue;
+
+      if (
+        previousAnimation &&
+        previousAnimation instanceof TimingAnimation &&
+        previousAnimation._toValue === toValue &&
+        previousAnimation._startTime
+      ) {
+        this._startTime = previousAnimation._startTime;
+        this._fromValue = previousAnimation._fromValue;
+      } else {
+        const now = Date.now();
+        this._startTime = now;
+        this._fromValue = this._position;
+      }
+
+      this._animationFrame = RequestAnimationFrame.current(
+        this.onUpdate.bind(this)
+      );
+    };
+
+    if (this._delay !== 0) {
+      this._timeout = setTimeout(() => onStart(), this._delay);
+    } else {
+      onStart();
+    }
+  }
+}

package/src/animation/core/easing/Bezier.ts

@@ -0,0 +1,146 @@
+/**
+ * https://github.com/gre/bezier-easing
+ * BezierEasing - use bezier curve for transition easing function
+ * by Gaëtan Renaudeau 2014 - 2015 – MIT License
+ */
+
+// These values are established by empiricism with tests (tradeoff: performance VS precision)
+var NEWTON_ITERATIONS = 4;
+var NEWTON_MIN_SLOPE = 0.001;
+var SUBDIVISION_PRECISION = 0.0000001;
+var SUBDIVISION_MAX_ITERATIONS = 10;
+
+var kSplineTableSize = 11;
+var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+var float32ArraySupported = typeof Float32Array === "function";
+
+function A(aA1: number, aA2: number) {
+  return 1.0 - 3.0 * aA2 + 3.0 * aA1;
+}
+function B(aA1: number, aA2: number) {
+  return 3.0 * aA2 - 6.0 * aA1;
+}
+function C(aA1: number) {
+  return 3.0 * aA1;
+}
+
+// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+function calcBezier(aT: number, aA1: number, aA2: number) {
+  return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
+}
+
+// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+function getSlope(aT: number, aA1: number, aA2: number) {
+  return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
+}
+
+function binarySubdivide(
+  aX: number,
+  aA: number,
+  aB: number,
+  mX1: number,
+  mX2: number
+) {
+  var currentX,
+    currentT,
+    i = 0;
+  do {
+    currentT = aA + (aB - aA) / 2.0;
+    currentX = calcBezier(currentT, mX1, mX2) - aX;
+    if (currentX > 0.0) {
+      aB = currentT;
+    } else {
+      aA = currentT;
+    }
+  } while (
+    Math.abs(currentX) > SUBDIVISION_PRECISION &&
+    ++i < SUBDIVISION_MAX_ITERATIONS
+  );
+  return currentT;
+}
+
+function newtonRaphsonIterate(
+  aX: number,
+  aGuessT: number,
+  mX1: number,
+  mX2: number
+) {
+  for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
+    var currentSlope = getSlope(aGuessT, mX1, mX2);
+    if (currentSlope === 0.0) {
+      return aGuessT;
+    }
+    var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+    aGuessT -= currentX / currentSlope;
+  }
+  return aGuessT;
+}
+
+function LinearEasing(x: number) {
+  return x;
+}
+
+function bezier(mX1: number, mY1: number, mX2: number, mY2: number) {
+  if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
+    throw new Error("bezier x values must be in [0, 1] range");
+  }
+
+  if (mX1 === mY1 && mX2 === mY2) {
+    return LinearEasing;
+  }
+
+  // Precompute samples table
+  var sampleValues = float32ArraySupported
+    ? new Float32Array(kSplineTableSize)
+    : new Array(kSplineTableSize);
+  for (var i = 0; i < kSplineTableSize; ++i) {
+    sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+  }
+
+  function getTForX(aX: number) {
+    var intervalStart = 0.0;
+    var currentSample = 1;
+    var lastSample = kSplineTableSize - 1;
+
+    for (
+      ;
+      currentSample !== lastSample && sampleValues[currentSample] <= aX;
+      ++currentSample
+    ) {
+      intervalStart += kSampleStepSize;
+    }
+    --currentSample;
+
+    // Interpolate to provide an initial guess for t
+    var dist =
+      (aX - sampleValues[currentSample]) /
+      (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+    var guessForT = intervalStart + dist * kSampleStepSize;
+
+    var initialSlope = getSlope(guessForT, mX1, mX2);
+    if (initialSlope >= NEWTON_MIN_SLOPE) {
+      return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+    } else if (initialSlope === 0.0) {
+      return guessForT;
+    } else {
+      return binarySubdivide(
+        aX,
+        intervalStart,
+        intervalStart + kSampleStepSize,
+        mX1,
+        mX2
+      );
+    }
+  }
+
+  return function BezierEasing(x: number) {
+    // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+    if (x === 0 || x === 1) {
+      return x;
+    }
+    return calcBezier(getTForX(x), mY1, mY2);
+  };
+}
+
+export { bezier };

package/src/animation/core/easing/Easing.ts

@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { bezier as _bezier } from "./Bezier";
+
+/**
+ * This class implements common easing functions. The math is pretty obscure,
+ * but this cool website has nice visual illustrations of what they represent:
+ * http://xaedes.de/dev/transitions/
+ */
+export class Easing {
+  static step0(n: number) {
+    return n > 0 ? 1 : 0;
+  }
+
+  static step1(n: number) {
+    return n >= 1 ? 1 : 0;
+  }
+
+  static linear(t: number) {
+    return t;
+  }
+
+  static ease(t: number): number {
+    return ease(t);
+  }
+
+  static quad(t: number) {
+    return t * t;
+  }
+
+  static cubic(t: number) {
+    return t * t * t;
+  }
+
+  static poly(n: number) {
+    return (t: number) => Math.pow(t, n);
+  }
+
+  static sin(t: number) {
+    return 1 - Math.cos((t * Math.PI) / 2);
+  }
+
+  static circle(t: number) {
+    return 1 - Math.sqrt(1 - t * t);
+  }
+
+  static exp(t: number) {
+    return Math.pow(2, 10 * (t - 1));
+  }
+
+  /**
+   * A simple elastic interaction, similar to a spring.  Default bounciness
+   * is 1, which overshoots a little bit once.  0 bounciness doesn't overshoot
+   * at all, and bounciness of N > 1 will overshoot about N times.
+   *
+   * Wolfram Plots:
+   *
+   *   http://tiny.cc/elastic_b_1 (default bounciness = 1)
+   *   http://tiny.cc/elastic_b_3 (bounciness = 3)
+   */
+  static elastic(bounciness: number = 1): (t: number) => number {
+    var p = bounciness * Math.PI;
+    return (t) =>
+      1 - Math.pow(Math.cos((t * Math.PI) / 2), 3) * Math.cos(t * p);
+  }
+
+  static back(s: number): (t: number) => number {
+    if (s === undefined) {
+      s = 1.70158;
+    }
+    return (t) => t * t * ((s + 1) * t - s);
+  }
+
+  static bounce(t: number): number {
+    if (t < 1 / 2.75) {
+      return 7.5625 * t * t;
+    }
+
+    if (t < 2 / 2.75) {
+      t -= 1.5 / 2.75;
+      return 7.5625 * t * t + 0.75;
+    }
+
+    if (t < 2.5 / 2.75) {
+      t -= 2.25 / 2.75;
+      return 7.5625 * t * t + 0.9375;
+    }
+
+    t -= 2.625 / 2.75;
+    return 7.5625 * t * t + 0.984375;
+  }
+
+  static bezier(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number
+  ): (t: number) => number {
+    return _bezier(x1, y1, x2, y2);
+  }
+
+  static in(easing: (t: number) => number): (t: number) => number {
+    return easing;
+  }
+
+  /**
+   * Runs an easing function backwards.
+   */
+  static out(easing: (t: number) => number): (t: number) => number {
+    return (t) => 1 - easing(1 - t);
+  }
+
+  /**
+   * Makes any easing function symmetrical.
+   */
+  static inOut(easing: (t: number) => number): (t: number) => number {
+    return (t) => {
+      if (t < 0.5) {
+        return easing(t * 2) / 2;
+      }
+      return 1 - easing((1 - t) * 2) / 2;
+    };
+  }
+}
+
+var ease = Easing.bezier(0.42, 0, 1, 1);

package/src/animation/core/helpers/camelCaseToKebabCase.ts

@@ -0,0 +1,10 @@
+/**
+ * Converts a camelCase string to kebab-case.
+ * e.g. backgroundColor -> background-color
+ *
+ * @param str - The camelCase string to convert.
+ * @returns The converted kebab-case string.
+ */
+export function camelCaseToKebabCase(str: string): string {
+  return str.replace(/([A-Z])/g, (match) => '-' + match.toLowerCase());
+}

package/src/animation/core/helpers/getCleanProps.ts

@@ -0,0 +1,16 @@
+import { isFluidValue } from './isFluidValue';
+
+/**
+ * Filters out properties with fluid values from a given props object.
+ * This function removes any properties that are considered fluid values,
+ * typically those that subscribe to updates and therefore should not be
+ * included in a static props object.
+ *
+ * @param props - The original props object, which may include fluid values.
+ * @returns A new props object with fluid values removed.
+ */
+export const getCleanProps = ({ style, ...props }: any) => {
+  return Object.fromEntries(
+    Object.entries(props).filter(([_, value]) => !isFluidValue(value))
+  ) as any;
+};