react-native-reanimated 2.16.0 → 2.17.0

package/lib/reanimated1/Easing.js

@@ -0,0 +1,231 @@
+import {
+  cond,
+  lessThan,
+  multiply,
+  pow,
+  cos,
+  sqrt,
+  sub,
+  add,
+  divide,
+} from './base';
+import AnimatedBezier from './core/AnimatedBezier';
+
+/**
+ * The `Easing` module implements common easing functions. This module is used
+ * by [Animate.timing()](docs/animate.html#timing) to convey physically
+ * believable motion in animations.
+ *
+ * You can find a visualization of some common easing functions at
+ * http://easings.net/
+ *
+ * ### Predefined animations
+ *
+ * The `Easing` module provides several predefined animations through the
+ * following methods:
+ *
+ * - [`back`](docs/easing.html#back) provides a simple animation where the
+ *   object goes slightly back before moving forward
+ * - [`bounce`](docs/easing.html#bounce) provides a bouncing animation
+ * - [`ease`](docs/easing.html#ease) provides a simple inertial animation
+ * - [`elastic`](docs/easing.html#elastic) provides a simple spring interaction
+ *
+ * ### Standard functions
+ *
+ * Three standard easing functions are provided:
+ *
+ * - [`linear`](docs/easing.html#linear)
+ * - [`quad`](docs/easing.html#quad)
+ * - [`cubic`](docs/easing.html#cubic)
+ *
+ * The [`poly`](docs/easing.html#poly) function can be used to implement
+ * quartic, quintic, and other higher power functions.
+ *
+ * ### Additional functions
+ *
+ * Additional mathematical functions are provided by the following methods:
+ *
+ * - [`bezier`](docs/easing.html#bezier) provides a cubic bezier curve
+ * - [`circle`](docs/easing.html#circle) provides a circular function
+ * - [`sin`](docs/easing.html#sin) provides a sinusoidal function
+ * - [`exp`](docs/easing.html#exp) provides an exponential function
+ *
+ * The following helpers are used to modify other easing functions.
+ *
+ * - [`in`](docs/easing.html#in) runs an easing function forwards
+ * - [`inOut`](docs/easing.html#inout) makes any easing function symmetrical
+ * - [`out`](docs/easing.html#out) runs an easing function backwards
+ */
+export default class Easing {
+  /**
+   * A linear function, `f(t) = t`. Position correlates to elapsed time one to
+   * one.
+   *
+   * http://cubic-bezier.com/#0,0,1,1
+   */
+  static linear(t) {
+    return t;
+  }
+
+  /**
+   * A simple inertial interaction, similar to an object slowly accelerating to
+   * speed.
+   *
+   * http://cubic-bezier.com/#.42,0,1,1
+   */
+  static ease(t) {
+    return new AnimatedBezier(t, 0.42, 0, 1, 1);
+  }
+
+  /**
+   * A quadratic function, `f(t) = t * t`. Position equals the square of elapsed
+   * time.
+   *
+   * http://easings.net/#easeInQuad
+   */
+  static quad(t) {
+    return multiply(t, t);
+  }
+
+  /**
+   * A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed
+   * time.
+   *
+   * http://easings.net/#easeInCubic
+   */
+  static cubic(t) {
+    return multiply(t, t, t);
+  }
+
+  /**
+   * A power function. Position is equal to the Nth power of elapsed time.
+   *
+   * n = 4: http://easings.net/#easeInQuart
+   * n = 5: http://easings.net/#easeInQuint
+   */
+  static poly(n) {
+    return (t) => pow(t, n);
+  }
+
+  /**
+   * A sinusoidal function.
+   *
+   * http://easings.net/#easeInSine
+   */
+  static sin(t) {
+    return sub(1, cos(multiply(t, Math.PI, 0.5)));
+  }
+
+  /**
+   * A circular function.
+   *
+   * http://easings.net/#easeInCirc
+   */
+  static circle(t) {
+    return sub(1, sqrt(sub(1, multiply(t, t))));
+  }
+
+  /**
+   * An exponential function.
+   *
+   * http://easings.net/#easeInExpo
+   */
+  static exp(t) {
+    return pow(2, multiply(10, sub(t, 1)));
+  }
+
+  /**
+   * A simple elastic interaction, similar to a spring oscillating back and
+   * forth.
+   *
+   * 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.
+   *
+   * http://easings.net/#easeInElastic
+   */
+  static elastic(bounciness = 1) {
+    const p = bounciness * Math.PI;
+    return (t) =>
+      sub(
+        1,
+        multiply(pow(cos(multiply(t, Math.PI, 0.5)), 3), cos(multiply(t, p)))
+      );
+  }
+
+  /**
+   * Use with `Animated.parallel()` to create a simple effect where the object
+   * animates back slightly as the animation starts.
+   *
+   * Wolfram Plot:
+   *
+   * - http://tiny.cc/back_default (s = 1.70158, default)
+   */
+  static back(s) {
+    if (s === undefined) {
+      s = 1.70158;
+    }
+    return (t) => multiply(t, t, sub(multiply(add(s, 1), t), s));
+  }
+
+  /**
+   * Provides a simple bouncing effect.
+   *
+   * http://easings.net/#easeInBounce
+   */
+  static bounce(t) {
+    const sq = (v) => multiply(7.5625, v, v);
+    return cond(
+      lessThan(t, 1 / 2.75),
+      sq(t),
+      cond(
+        lessThan(t, 2 / 2.75),
+        add(0.75, sq(sub(t, 1.5 / 2.75))),
+        cond(
+          lessThan(t, 2.5 / 2.76),
+          add(0.9375, sq(sub(t, 2.25 / 2.75))),
+          add(0.984375, sq(sub(t, 2.625 / 2.75)))
+        )
+      )
+    );
+  }
+
+  /**
+   * Provides a cubic bezier curve, equivalent to CSS Transitions'
+   * `transition-timing-function`.
+   *
+   * A useful tool to visualize cubic bezier curves can be found at
+   * http://cubic-bezier.com/
+   */
+  static bezier(x1, y1, x2, y2) {
+    return (t) => new AnimatedBezier(t, x1, y1, x2, y2);
+  }
+
+  /**
+   * Runs an easing function forwards.
+   */
+  static in(easing) {
+    return easing;
+  }
+
+  /**
+   * Runs an easing function backwards.
+   */
+  static out(easing) {
+    return (t) => sub(1, easing(sub(1, t)));
+  }
+
+  /**
+   * Makes any easing function symmetrical. The easing function will run
+   * forwards for half of the duration, then backwards for the rest of the
+   * duration.
+   */
+  static inOut(easing) {
+    return (t) =>
+      cond(
+        lessThan(t, 0.5),
+        divide(easing(multiply(t, 2)), 2),
+        sub(1, divide(easing(multiply(sub(1, t), 2)), 2))
+      );
+  }
+}

package/lib/reanimated1/SpringConfig.js

@@ -0,0 +1,79 @@
+function stiffnessFromOrigamiValue(oValue) {
+  return (oValue - 30) * 3.62 + 194;
+}
+
+function dampingFromOrigamiValue(oValue) {
+  return (oValue - 8) * 3 + 25;
+}
+
+function fromOrigamiTensionAndFriction(tension, friction) {
+  return {
+    stiffness: stiffnessFromOrigamiValue(tension),
+    damping: dampingFromOrigamiValue(friction),
+  };
+}
+
+function fromBouncinessAndSpeed(bounciness, speed) {
+  function normalize(value, startValue, endValue) {
+    return (value - startValue) / (endValue - startValue);
+  }
+
+  function projectNormal(n, start, end) {
+    return start + n * (end - start);
+  }
+
+  function linearInterpolation(t, start, end) {
+    return t * end + (1 - t) * start;
+  }
+
+  function quadraticOutInterpolation(t, start, end) {
+    return linearInterpolation(2 * t - t * t, start, end);
+  }
+
+  function b3Friction1(x) {
+    return 0.0007 * Math.pow(x, 3) - 0.031 * Math.pow(x, 2) + 0.64 * x + 1.28;
+  }
+
+  function b3Friction2(x) {
+    return 0.000044 * Math.pow(x, 3) - 0.006 * Math.pow(x, 2) + 0.36 * x + 2;
+  }
+
+  function b3Friction3(x) {
+    return (
+      0.00000045 * Math.pow(x, 3) -
+      0.000332 * Math.pow(x, 2) +
+      0.1078 * x +
+      5.84
+    );
+  }
+
+  function b3Nobounce(tension) {
+    if (tension <= 18) {
+      return b3Friction1(tension);
+    } else if (tension > 18 && tension <= 44) {
+      return b3Friction2(tension);
+    } else {
+      return b3Friction3(tension);
+    }
+  }
+
+  var b = normalize(bounciness / 1.7, 0, 20);
+  b = projectNormal(b, 0, 0.8);
+  var s = normalize(speed / 1.7, 0, 20);
+  var bouncyTension = projectNormal(s, 0.5, 200);
+  var bouncyFriction = quadraticOutInterpolation(
+    b,
+    b3Nobounce(bouncyTension),
+    0.01
+  );
+
+  return {
+    stiffness: stiffnessFromOrigamiValue(bouncyTension),
+    damping: dampingFromOrigamiValue(bouncyFriction),
+  };
+}
+
+module.exports = {
+  fromOrigamiTensionAndFriction,
+  fromBouncinessAndSpeed,
+};

package/lib/reanimated1/Transitioning.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import { View, findNodeHandle } from 'react-native';
+import ReanimatedModule from '../ReanimatedModule';
+
+const TransitioningContext = React.createContext();
+
+function configFromProps(type, props) {
+  const config = { type };
+  if ('durationMs' in props) {
+    config.durationMs = props.durationMs;
+  }
+  if ('interpolation' in props) {
+    config.interpolation = props.interpolation;
+  }
+  if ('type' in props) {
+    config.animation = props.type;
+  }
+  if ('delayMs' in props) {
+    config.delayMs = props.delayMs;
+  }
+  if ('propagation' in props) {
+    config.propagation = props.propagation;
+  }
+  return config;
+}
+
+/**
+ * The below wrapper is used to support legacy context API with Context.Consumer
+ * render prop. We need it as we want to access `context` from within
+ * `componentDidMount` callback. If we decided to drop support for older
+ * react native we could rewrite it using hooks or `static contextType` API.
+ */
+function wrapTransitioningContext(Comp) {
+  return (props) => {
+    return (
+      <TransitioningContext.Consumer>
+        {(context) => <Comp context={context} {...props} />}
+      </TransitioningContext.Consumer>
+    );
+  };
+}
+
+class In extends React.Component {
+  componentDidMount() {
+    this.props.context.push(configFromProps('in', this.props));
+  }
+
+  render() {
+    return this.props.children || null;
+  }
+}
+
+class Change extends React.Component {
+  componentDidMount() {
+    this.props.context.push(configFromProps('change', this.props));
+  }
+
+  render() {
+    return this.props.children || null;
+  }
+}
+
+class Out extends React.Component {
+  componentDidMount() {
+    this.props.context.push(configFromProps('out', this.props));
+  }
+
+  render() {
+    return this.props.children || null;
+  }
+}
+
+class Together extends React.Component {
+  transitions = [];
+  componentDidMount() {
+    const config = configFromProps('group', this.props);
+    config.transitions = this.transitions;
+    this.props.context.push(config);
+  }
+
+  render() {
+    return (
+      <TransitioningContext.Provider value={this.transitions}>
+        {this.props.children}
+      </TransitioningContext.Provider>
+    );
+  }
+}
+
+class Sequence extends React.Component {
+  transitions = [];
+  componentDidMount() {
+    const config = configFromProps('group', this.props);
+    config.sequence = true;
+    config.transitions = this.transitions;
+    this.props.context.push(config);
+  }
+
+  render() {
+    return (
+      <TransitioningContext.Provider value={this.transitions}>
+        {this.props.children}
+      </TransitioningContext.Provider>
+    );
+  }
+}
+
+function createTransitioningComponent(Component) {
+  class Wrapped extends React.Component {
+    propTypes = Component.propTypes;
+    transitions = [];
+    viewRef = React.createRef();
+
+    componentDidMount() {
+      if (this.props.animateMount) {
+        this.animateNextTransition();
+      }
+    }
+
+    setNativeProps(props) {
+      this.viewRef.current.setNativeProps(props);
+    }
+
+    animateNextTransition() {
+      const viewTag = findNodeHandle(this.viewRef.current);
+      ReanimatedModule.animateNextTransition(viewTag, {
+        transitions: this.transitions,
+      });
+    }
+
+    render() {
+      const { transition, ...rest } = this.props;
+      return (
+        <React.Fragment>
+          <TransitioningContext.Provider value={this.transitions}>
+            {transition}
+          </TransitioningContext.Provider>
+          <Component {...rest} ref={this.viewRef} collapsable={false} />
+        </React.Fragment>
+      );
+    }
+  }
+  return Wrapped;
+}
+
+const Transitioning = {
+  View: createTransitioningComponent(View),
+};
+
+const Transition = {
+  Sequence: wrapTransitioningContext(Sequence),
+  Together: wrapTransitioningContext(Together),
+  In: wrapTransitioningContext(In),
+  Out: wrapTransitioningContext(Out),
+  Change: wrapTransitioningContext(Change),
+};
+
+export { Transitioning, Transition, createTransitioningComponent };

package/lib/reanimated1/animations/Animation.js

@@ -0,0 +1,32 @@
+import AnimatedValue from '../core/InternalAnimatedValue';
+
+class Animation {
+  static springDefaultState() {
+    return {
+      position: new AnimatedValue(0),
+      finished: new AnimatedValue(0),
+      velocity: new AnimatedValue(0),
+      time: new AnimatedValue(0),
+    };
+  }
+
+  static decayDefaultState() {
+    return {
+      position: new AnimatedValue(0),
+      finished: new AnimatedValue(0),
+      velocity: new AnimatedValue(0),
+      time: new AnimatedValue(0),
+    };
+  }
+
+  static timingDefaultState() {
+    return {
+      position: new AnimatedValue(0),
+      finished: new AnimatedValue(0),
+      time: new AnimatedValue(0),
+      frameTime: new AnimatedValue(0),
+    };
+  }
+}
+
+export default Animation;

package/lib/reanimated1/animations/SpringUtils.js

@@ -0,0 +1,199 @@
+import {
+  cond,
+  sub,
+  divide,
+  multiply,
+  add,
+  pow,
+  lessOrEq,
+  and,
+  greaterThan,
+} from './../base';
+import AnimatedValue from './../core/InternalAnimatedValue';
+
+function stiffnessFromOrigamiValue(oValue) {
+  return (oValue - 30) * 3.62 + 194;
+}
+
+function dampingFromOrigamiValue(oValue) {
+  return (oValue - 8) * 3 + 25;
+}
+
+function stiffnessFromOrigamiNode(oValue) {
+  return add(multiply(sub(oValue, 30), 3.62), 194);
+}
+
+function dampingFromOrigamiNode(oValue) {
+  return add(multiply(sub(oValue, 8), 3), 25);
+}
+
+function makeConfigFromOrigamiTensionAndFriction(prevConfig) {
+  const { tension, friction, ...rest } = prevConfig;
+  return {
+    ...rest,
+    stiffness:
+      typeof tension === 'number'
+        ? stiffnessFromOrigamiValue(tension)
+        : stiffnessFromOrigamiNode(tension),
+    damping:
+      typeof friction === 'number'
+        ? dampingFromOrigamiValue(friction)
+        : dampingFromOrigamiNode(friction),
+  };
+}
+
+function makeConfigFromBouncinessAndSpeed(prevConfig) {
+  const { bounciness, speed, ...rest } = prevConfig;
+  if (typeof bounciness === 'number' && typeof speed === 'number') {
+    return fromBouncinessAndSpeedNumbers(bounciness, speed, rest);
+  }
+  return fromBouncinessAndSpeedNodes(bounciness, speed, rest);
+}
+
+function fromBouncinessAndSpeedNodes(bounciness, speed, rest) {
+  function normalize(value, startValue, endValue) {
+    return divide(sub(value, startValue), sub(endValue, startValue));
+  }
+
+  function projectNormal(n, start, end) {
+    return add(start, multiply(n, sub(end, start)));
+  }
+
+  function linearInterpolation(t, start, end) {
+    return add(multiply(t, end), multiply(sub(1, t), start));
+  }
+
+  function quadraticOutInterpolation(t, start, end) {
+    return linearInterpolation(sub(multiply(2, t), multiply(t, t)), start, end);
+  }
+
+  function b3Friction1(x) {
+    return add(
+      sub(multiply(0.0007, pow(x, 3)), multiply(0.031, pow(x, 2))),
+      multiply(0.64, x),
+      1.28
+    );
+  }
+
+  function b3Friction2(x) {
+    return add(
+      sub(multiply(0.000044, pow(x, 3)), multiply(0.006, pow(x, 2))),
+      multiply(0.36, x),
+      2
+    );
+  }
+
+  function b3Friction3(x) {
+    return add(
+      sub(multiply(0.00000045, pow(x, 3)), multiply(0.000332, pow(x, 2))),
+      multiply(0.1078, x),
+      5.84
+    );
+  }
+
+  function b3Nobounce(tension) {
+    return cond(
+      lessOrEq(tension, 18),
+      b3Friction1(tension),
+      cond(
+        and(greaterThan(tension, 18), lessOrEq(tension, 44)),
+        b3Friction2(tension),
+        b3Friction3(tension)
+      )
+    );
+  }
+
+  let b = normalize(divide(bounciness, 1.7), 0, 20);
+  b = projectNormal(b, 0, 0.8);
+  const s = normalize(divide(speed, 1.7), 0, 20);
+  const bouncyTension = projectNormal(s, 0.5, 200);
+  const bouncyFriction = quadraticOutInterpolation(
+    b,
+    b3Nobounce(bouncyTension),
+    0.01
+  );
+  return {
+    ...rest,
+    stiffness: stiffnessFromOrigamiNode(bouncyTension),
+    damping: dampingFromOrigamiNode(bouncyFriction),
+  };
+}
+
+function fromBouncinessAndSpeedNumbers(bounciness, speed, rest) {
+  function normalize(value, startValue, endValue) {
+    return (value - startValue) / (endValue - startValue);
+  }
+
+  function projectNormal(n, start, end) {
+    return start + n * (end - start);
+  }
+
+  function linearInterpolation(t, start, end) {
+    return t * end + (1 - t) * start;
+  }
+
+  function quadraticOutInterpolation(t, start, end) {
+    return linearInterpolation(2 * t - t * t, start, end);
+  }
+
+  function b3Friction1(x) {
+    return 0.0007 * Math.pow(x, 3) - 0.031 * Math.pow(x, 2) + 0.64 * x + 1.28;
+  }
+
+  function b3Friction2(x) {
+    return 0.000044 * Math.pow(x, 3) - 0.006 * Math.pow(x, 2) + 0.36 * x + 2;
+  }
+
+  function b3Friction3(x) {
+    return (
+      0.00000045 * Math.pow(x, 3) -
+      0.000332 * Math.pow(x, 2) +
+      0.1078 * x +
+      5.84
+    );
+  }
+
+  function b3Nobounce(tension) {
+    if (tension <= 18) {
+      return b3Friction1(tension);
+    } else if (tension > 18 && tension <= 44) {
+      return b3Friction2(tension);
+    } else {
+      return b3Friction3(tension);
+    }
+  }
+
+  let b = normalize(bounciness / 1.7, 0, 20);
+  b = projectNormal(b, 0, 0.8);
+  const s = normalize(speed / 1.7, 0, 20);
+  const bouncyTension = projectNormal(s, 0.5, 200);
+  const bouncyFriction = quadraticOutInterpolation(
+    b,
+    b3Nobounce(bouncyTension),
+    0.01
+  );
+
+  return {
+    ...rest,
+    stiffness: stiffnessFromOrigamiValue(bouncyTension),
+    damping: dampingFromOrigamiValue(bouncyFriction),
+  };
+}
+
+function makeDefaultConfig() {
+  return {
+    stiffness: new AnimatedValue(100),
+    mass: new AnimatedValue(1),
+    damping: new AnimatedValue(10),
+    overshootClamping: false,
+    restSpeedThreshold: 0.001,
+    restDisplacementThreshold: 0.001,
+    toValue: new AnimatedValue(0),
+  };
+}
+
+export default {
+  makeDefaultConfig,
+  makeConfigFromBouncinessAndSpeed,
+  makeConfigFromOrigamiTensionAndFriction,
+};