@react-native-oh/react-native-harmony 0.72.86 → 0.77.18-1

package/Libraries/Animated/animations/SpringAnimation.js

@@ -0,0 +1,372 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type AnimatedInterpolation from '../nodes/AnimatedInterpolation';
+import type AnimatedValue from '../nodes/AnimatedValue';
+import type AnimatedValueXY from '../nodes/AnimatedValueXY';
+import type {AnimationConfig, EndCallback} from './Animation';
+
+import AnimatedColor from '../nodes/AnimatedColor';
+import * as SpringConfig from '../SpringConfig';
+import Animation from './Animation';
+import invariant from 'invariant';
+
+export type SpringAnimationConfig = $ReadOnly<{
+  ...AnimationConfig,
+  toValue:
+    | number
+    | AnimatedValue
+    | {
+        x: number,
+        y: number,
+        ...
+      }
+    | AnimatedValueXY
+    | {
+        r: number,
+        g: number,
+        b: number,
+        a: number,
+        ...
+      }
+    | AnimatedColor
+    | AnimatedInterpolation<number>,
+  overshootClamping?: boolean,
+  restDisplacementThreshold?: number,
+  restSpeedThreshold?: number,
+  velocity?:
+    | number
+    | $ReadOnly<{
+        x: number,
+        y: number,
+        ...
+      }>,
+  bounciness?: number,
+  speed?: number,
+  tension?: number,
+  friction?: number,
+  stiffness?: number,
+  damping?: number,
+  mass?: number,
+  delay?: number,
+  ...
+}>;
+
+export type SpringAnimationConfigSingle = $ReadOnly<{
+  ...AnimationConfig,
+  toValue: number,
+  overshootClamping?: boolean,
+  restDisplacementThreshold?: number,
+  restSpeedThreshold?: number,
+  velocity?: number,
+  bounciness?: number,
+  speed?: number,
+  tension?: number,
+  friction?: number,
+  stiffness?: number,
+  damping?: number,
+  mass?: number,
+  delay?: number,
+  ...
+}>;
+
+opaque type SpringAnimationInternalState = $ReadOnly<{
+  lastPosition: number,
+  lastVelocity: number,
+  lastTime: number,
+}>;
+
+export default class SpringAnimation extends Animation {
+  _overshootClamping: boolean;
+  _restDisplacementThreshold: number;
+  _restSpeedThreshold: number;
+  _lastVelocity: number;
+  _startPosition: number;
+  _lastPosition: number;
+  _fromValue: number;
+  _toValue: number;
+  _stiffness: number;
+  _damping: number;
+  _mass: number;
+  _initialVelocity: number;
+  _delay: number;
+  _timeout: ?TimeoutID;
+  _startTime: number;
+  _lastTime: number;
+  _frameTime: number;
+  _onUpdate: (value: number) => void;
+  _animationFrame: ?AnimationFrameID;
+  _platformConfig: ?PlatformConfig;
+
+  constructor(config: SpringAnimationConfigSingle) {
+    super(config);
+
+    this._overshootClamping = config.overshootClamping ?? false;
+    this._restDisplacementThreshold = config.restDisplacementThreshold ?? 0.001;
+    this._restSpeedThreshold = config.restSpeedThreshold ?? 0.001;
+    this._initialVelocity = config.velocity ?? 0;
+    this._lastVelocity = config.velocity ?? 0;
+    this._toValue = config.toValue;
+    this._delay = config.delay ?? 0;
+    this._platformConfig = config.platformConfig;
+
+    if (
+      config.stiffness !== undefined ||
+      config.damping !== undefined ||
+      config.mass !== undefined
+    ) {
+      invariant(
+        config.bounciness === undefined &&
+          config.speed === undefined &&
+          config.tension === undefined &&
+          config.friction === undefined,
+        'You can define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one',
+      );
+      this._stiffness = config.stiffness ?? 100;
+      this._damping = config.damping ?? 10;
+      this._mass = config.mass ?? 1;
+    } else if (config.bounciness !== undefined || config.speed !== undefined) {
+      // Convert the origami bounciness/speed values to stiffness/damping
+      // We assume mass is 1.
+      invariant(
+        config.tension === undefined &&
+          config.friction === undefined &&
+          config.stiffness === undefined &&
+          config.damping === undefined &&
+          config.mass === undefined,
+        'You can define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one',
+      );
+      const springConfig = SpringConfig.fromBouncinessAndSpeed(
+        config.bounciness ?? 8,
+        config.speed ?? 12,
+      );
+      this._stiffness = springConfig.stiffness;
+      this._damping = springConfig.damping;
+      this._mass = 1;
+    } else {
+      // Convert the origami tension/friction values to stiffness/damping
+      // We assume mass is 1.
+      const springConfig = SpringConfig.fromOrigamiTensionAndFriction(
+        config.tension ?? 40,
+        config.friction ?? 7,
+      );
+      this._stiffness = springConfig.stiffness;
+      this._damping = springConfig.damping;
+      this._mass = 1;
+    }
+
+    invariant(this._stiffness > 0, 'Stiffness value must be greater than 0');
+    invariant(this._damping > 0, 'Damping value must be greater than 0');
+    invariant(this._mass > 0, 'Mass value must be greater than 0');
+  }
+
+  __getNativeAnimationConfig(): $ReadOnly<{
+    damping: number,
+    initialVelocity: number,
+    iterations: number,
+    mass: number,
+    platformConfig: ?PlatformConfig,
+    overshootClamping: boolean,
+    restDisplacementThreshold: number,
+    restSpeedThreshold: number,
+    stiffness: number,
+    toValue: number,
+    type: 'spring',
+    ...
+  }> {
+    return {
+      type: 'spring',
+      overshootClamping: this._overshootClamping,
+      restDisplacementThreshold: this._restDisplacementThreshold,
+      restSpeedThreshold: this._restSpeedThreshold,
+      stiffness: this._stiffness,
+      damping: this._damping,
+      mass: this._mass,
+      initialVelocity: this._initialVelocity ?? this._lastVelocity,
+      toValue: this._toValue,
+      iterations: this.__iterations,
+      platformConfig: this._platformConfig,
+    };
+  }
+
+  start(
+    fromValue: number,
+    onUpdate: (value: number) => void,
+    onEnd: ?EndCallback,
+    previousAnimation: ?Animation,
+    animatedValue: AnimatedValue,
+  ): void {
+    super.start(fromValue, onUpdate, onEnd, previousAnimation, animatedValue);
+
+    this._startPosition = fromValue;
+    this._lastPosition = this._startPosition;
+
+    this._onUpdate = onUpdate;
+    this._lastTime = Date.now();
+    this._frameTime = 0.0;
+
+    if (previousAnimation instanceof SpringAnimation) {
+      const internalState = previousAnimation.getInternalState();
+      this._lastPosition = internalState.lastPosition;
+      this._lastVelocity = internalState.lastVelocity;
+      // Set the initial velocity to the last velocity
+      this._initialVelocity = this._lastVelocity;
+      this._lastTime = internalState.lastTime;
+    }
+
+    const start = () => {
+      const useNativeDriver = this.__startAnimationIfNative(animatedValue);
+      if (!useNativeDriver) {
+        this.onUpdate();
+      }
+    };
+
+    //  If this._delay is more than 0, we start after the timeout.
+    if (this._delay) {
+      this._timeout = setTimeout(start, this._delay);
+    } else {
+      start();
+    }
+  }
+
+  getInternalState(): SpringAnimationInternalState {
+    return {
+      lastPosition: this._lastPosition,
+      lastVelocity: this._lastVelocity,
+      lastTime: this._lastTime,
+    };
+  }
+
+  /**
+   * This spring model is based off of a damped harmonic oscillator
+   * (https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator).
+   *
+   * We use the closed form of the second order differential equation:
+   *
+   * x'' + (2ζ⍵_0)x' + ⍵^2x = 0
+   *
+   * where
+   *    ⍵_0 = √(k / m) (undamped angular frequency of the oscillator),
+   *    ζ = c / 2√mk (damping ratio),
+   *    c = damping constant
+   *    k = stiffness
+   *    m = mass
+   *
+   * The derivation of the closed form is described in detail here:
+   * http://planetmath.org/sites/default/files/texpdf/39745.pdf
+   *
+   * This algorithm happens to match the algorithm used by CASpringAnimation,
+   * a QuartzCore (iOS) API that creates spring animations.
+   */
+  onUpdate(): void {
+    // If for some reason we lost a lot of frames (e.g. process large payload or
+    // stopped in the debugger), we only advance by 4 frames worth of
+    // computation and will continue on the next frame. It's better to have it
+    // running at faster speed than jumping to the end.
+    const MAX_STEPS = 64;
+    let now = Date.now();
+    if (now > this._lastTime + MAX_STEPS) {
+      now = this._lastTime + MAX_STEPS;
+    }
+
+    const deltaTime = (now - this._lastTime) / 1000;
+    this._frameTime += deltaTime;
+
+    const c: number = this._damping;
+    const m: number = this._mass;
+    const k: number = this._stiffness;
+    const v0: number = -this._initialVelocity;
+
+    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.0 - zeta * zeta); // exponential decay
+    const x0 = this._toValue - this._startPosition; // calculate the oscillation from x0 = 1 to x = 0
+
+    let position = 0.0;
+    let velocity = 0.0;
+    const t = this._frameTime;
+    if (zeta < 1) {
+      // Under damped
+      const envelope = Math.exp(-zeta * omega0 * t);
+      position =
+        this._toValue -
+        envelope *
+          (((v0 + zeta * omega0 * x0) / omega1) * Math.sin(omega1 * t) +
+            x0 * Math.cos(omega1 * t));
+      // This looks crazy -- it's actually just the derivative of the
+      // oscillation function
+      velocity =
+        zeta *
+          omega0 *
+          envelope *
+          ((Math.sin(omega1 * t) * (v0 + zeta * omega0 * x0)) / omega1 +
+            x0 * Math.cos(omega1 * t)) -
+        envelope *
+          (Math.cos(omega1 * t) * (v0 + zeta * omega0 * x0) -
+            omega1 * x0 * Math.sin(omega1 * t));
+    } else {
+      // Critically damped
+      const envelope = Math.exp(-omega0 * t);
+      position = this._toValue - envelope * (x0 + (v0 + omega0 * x0) * t);
+      velocity =
+        envelope * (v0 * (t * omega0 - 1) + t * x0 * (omega0 * omega0));
+    }
+
+    this._lastTime = now;
+    this._lastPosition = position;
+    this._lastVelocity = velocity;
+
+    this._onUpdate(position);
+    if (!this.__active) {
+      // a listener might have stopped us in _onUpdate
+      return;
+    }
+
+    // Conditions for stopping the spring animation
+    let isOvershooting = false;
+    if (this._overshootClamping && this._stiffness !== 0) {
+      if (this._startPosition < this._toValue) {
+        isOvershooting = position > this._toValue;
+      } else {
+        isOvershooting = position < this._toValue;
+      }
+    }
+    const isVelocity = Math.abs(velocity) <= this._restSpeedThreshold;
+    let isDisplacement = true;
+    if (this._stiffness !== 0) {
+      isDisplacement =
+        Math.abs(this._toValue - position) <= this._restDisplacementThreshold;
+    }
+
+    if (isOvershooting || (isVelocity && isDisplacement)) {
+      if (this._stiffness !== 0) {
+        // Ensure that we end up with a round value
+        this._lastPosition = this._toValue;
+        this._lastVelocity = 0;
+        this._onUpdate(this._toValue);
+      }
+
+      this.__notifyAnimationEnd({finished: true});
+      return;
+    }
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+    this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
+  }
+
+  stop(): void {
+    super.stop();
+    clearTimeout(this._timeout);
+    if (this._animationFrame != null) {
+      global.cancelAnimationFrame(this._animationFrame);
+    }
+    this.__notifyAnimationEnd({finished: false});
+  }
+}

package/Libraries/Animated/animations/TimingAnimation.js

@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {RgbaValue} from '../nodes/AnimatedColor';
+import type AnimatedInterpolation from '../nodes/AnimatedInterpolation';
+import type AnimatedValue from '../nodes/AnimatedValue';
+import type AnimatedValueXY from '../nodes/AnimatedValueXY';
+import type {AnimationConfig, EndCallback} from './Animation';
+
+import AnimatedColor from '../nodes/AnimatedColor';
+import Animation from './Animation';
+
+export type TimingAnimationConfig = $ReadOnly<{
+  ...AnimationConfig,
+  toValue:
+    | number
+    | AnimatedValue
+    | $ReadOnly<{
+        x: number,
+        y: number,
+        ...
+      }>
+    | AnimatedValueXY
+    | RgbaValue
+    | AnimatedColor
+    | AnimatedInterpolation<number>,
+  easing?: (value: number) => number,
+  duration?: number,
+  delay?: number,
+  ...
+}>;
+
+export type TimingAnimationConfigSingle = $ReadOnly<{
+  ...AnimationConfig,
+  toValue: number,
+  easing?: (value: number) => number,
+  duration?: number,
+  delay?: number,
+  ...
+}>;
+
+let _easeInOut;
+function easeInOut() {
+  if (!_easeInOut) {
+    const Easing = require('../Easing').default;
+    _easeInOut = Easing.inOut(Easing.ease);
+  }
+  return _easeInOut;
+}
+
+export default class TimingAnimation extends Animation {
+  _startTime: number;
+  _fromValue: number;
+  _toValue: number;
+  _duration: number;
+  _delay: number;
+  _easing: (value: number) => number;
+  _onUpdate: (value: number) => void;
+  _animationFrame: ?AnimationFrameID;
+  _timeout: ?TimeoutID;
+  _platformConfig: ?PlatformConfig;
+
+  constructor(config: TimingAnimationConfigSingle) {
+    super(config);
+
+    this._toValue = config.toValue;
+    this._easing = config.easing ?? easeInOut();
+    this._duration = config.duration ?? 500;
+    this._delay = config.delay ?? 0;
+    this._platformConfig = config.platformConfig;
+  }
+
+  __getNativeAnimationConfig(): $ReadOnly<{
+    type: 'frames',
+    frames: $ReadOnlyArray<number>,
+    toValue: number,
+    iterations: number,
+    platformConfig: ?PlatformConfig,
+    ...
+  }> {
+    const frameDuration = 1000.0 / 60.0;
+    const frames = [];
+    const numFrames = Math.round(this._duration / frameDuration);
+    for (let frame = 0; frame < numFrames; frame++) {
+      frames.push(this._easing(frame / numFrames));
+    }
+    frames.push(this._easing(1));
+    return {
+      type: 'frames',
+      frames,
+      toValue: this._toValue,
+      iterations: this.__iterations,
+      platformConfig: this._platformConfig,
+    };
+  }
+
+  start(
+    fromValue: number,
+    onUpdate: (value: number) => void,
+    onEnd: ?EndCallback,
+    previousAnimation: ?Animation,
+    animatedValue: AnimatedValue,
+  ): void {
+    super.start(fromValue, onUpdate, onEnd, previousAnimation, animatedValue);
+
+    this._fromValue = fromValue;
+    this._onUpdate = onUpdate;
+
+    const start = () => {
+      this._startTime = Date.now();
+
+      const useNativeDriver = this.__startAnimationIfNative(animatedValue);
+      if (!useNativeDriver) {
+        // Animations that sometimes have 0 duration and sometimes do not
+        // still need to use the native driver when duration is 0 so as to
+        // not cause intermixed JS and native animations.
+        if (this._duration === 0) {
+          this._onUpdate(this._toValue);
+          this.__notifyAnimationEnd({finished: true});
+        } else {
+          this._animationFrame = requestAnimationFrame(() => this.onUpdate());
+        }
+      }
+    };
+    if (this._delay) {
+      this._timeout = setTimeout(start, this._delay);
+    } else {
+      start();
+    }
+  }
+
+  onUpdate(): void {
+    const now = Date.now();
+    if (now >= this._startTime + this._duration) {
+      if (this._duration === 0) {
+        this._onUpdate(this._toValue);
+      } else {
+        this._onUpdate(
+          this._fromValue + this._easing(1) * (this._toValue - this._fromValue),
+        );
+      }
+      this.__notifyAnimationEnd({finished: true});
+      return;
+    }
+
+    this._onUpdate(
+      this._fromValue +
+        this._easing((now - this._startTime) / this._duration) *
+          (this._toValue - this._fromValue),
+    );
+    if (this.__active) {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+      this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
+    }
+  }
+
+  stop(): void {
+    super.stop();
+    clearTimeout(this._timeout);
+    if (this._animationFrame != null) {
+      global.cancelAnimationFrame(this._animationFrame);
+    }
+    this.__notifyAnimationEnd({finished: false});
+  }
+}

package/Libraries/Animated/bezier.js

@@ -0,0 +1,164 @@
+/**
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ */
+
+/**
+ * BezierEasing - use bezier curve for transition easing function
+ * https://github.com/gre/bezier-easing
+ * @copyright 2014-2015 Gaëtan Renaudeau. MIT License.
+ */
+
+'use strict';
+
+// These values are established by empiricism with tests (tradeoff: performance VS precision)
+const NEWTON_ITERATIONS = 4;
+const NEWTON_MIN_SLOPE = 0.001;
+const SUBDIVISION_PRECISION = 0.0000001;
+const SUBDIVISION_MAX_ITERATIONS = 10;
+
+const kSplineTableSize = 11;
+const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+const 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,
+) {
+  let currentX,
+    currentT,
+    i = 0,
+    aA = _aA,
+    aB = _aB;
+  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,
+) {
+  let aGuessT = _aGuessT;
+  for (let i = 0; i < NEWTON_ITERATIONS; ++i) {
+    const currentSlope = getSlope(aGuessT, mX1, mX2);
+    if (currentSlope === 0.0) {
+      return aGuessT;
+    }
+    const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+    aGuessT -= currentX / currentSlope;
+  }
+  return aGuessT;
+}
+
+export default function bezier(
+  mX1: number,
+  mY1: number,
+  mX2: number,
+  mY2: number,
+): (x: number) => number {
+  if (!(mX1 >= 0 && mX1 <= 1 && mX2 >= 0 && mX2 <= 1)) {
+    throw new Error('bezier x values must be in [0, 1] range');
+  }
+
+  // Precompute samples table
+  const sampleValues = float32ArraySupported
+    ? new Float32Array(kSplineTableSize)
+    : new Array<number>(kSplineTableSize);
+  if (mX1 !== mY1 || mX2 !== mY2) {
+    for (let i = 0; i < kSplineTableSize; ++i) {
+      sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+    }
+  }
+
+  function getTForX(aX: number) {
+    let intervalStart = 0.0;
+    let currentSample = 1;
+    const lastSample = kSplineTableSize - 1;
+
+    for (
+      ;
+      currentSample !== lastSample && sampleValues[currentSample] <= aX;
+      ++currentSample
+    ) {
+      intervalStart += kSampleStepSize;
+    }
+    --currentSample;
+
+    // Interpolate to provide an initial guess for t
+    const dist =
+      (aX - sampleValues[currentSample]) /
+      (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+    const guessForT = intervalStart + dist * kSampleStepSize;
+
+    const 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): number {
+    if (mX1 === mY1 && mX2 === mY2) {
+      return x; // linear
+    }
+    // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+    if (x === 0) {
+      return 0;
+    }
+    if (x === 1) {
+      return 1;
+    }
+    return calcBezier(getTForX(x), mY1, mY2);
+  };
+}