react-native-worklets 0.0.1-alpha → 0.1.0

package/nodes/AnimatedStyle.js

@@ -1,89 +0,0 @@
-import AnimatedNode from './AnimatedNode';
-import AnimatedTransform from './AnimatedTransform';
-import AnimatedWithInput from './AnimatedWithInput';
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
-
-import flattenStyle from 'flattenStyle';
-
-export default class AnimatedStyle extends AnimatedWithInput {
-  constructor(style) {
-    style = flattenStyle(style) || {};
-    if (style.transform) {
-      style = {
-        ...style,
-        transform: new AnimatedTransform(style.transform),
-      };
-    }
-    super(Object.values(style));
-    this._style = style;
-  }
-
-  // Recursively get values for nested styles (like iOS's shadowOffset)
-  _walkStyleAndGetValues(style) {
-    const updatedStyle = {};
-    for (const key in style) {
-      const value = style[key];
-      if (value instanceof AnimatedNode) {
-        if (!value.__isNative) {
-          // We cannot use value of natively driven nodes this way as the value we have access from
-          // JS may not be up to date.
-          updatedStyle[key] = value.__getProps();
-        }
-      } else if (value && !Array.isArray(value) && typeof value === 'object') {
-        // Support animating nested values (for example: shadowOffset.height)
-        updatedStyle[key] = this._walkStyleAndGetValues(value);
-      } else {
-        updatedStyle[key] = value;
-      }
-    }
-    return updatedStyle;
-  }
-
-  __getProps() {
-    return this._walkStyleAndGetValues(this._style);
-  }
-
-  _walkStyleAndGetAnimatedValues(style) {
-    const updatedStyle = {};
-    for (const key in style) {
-      const value = style[key];
-      if (value instanceof AnimatedNode) {
-        updatedStyle[key] = value.__getValue();
-      } else if (value && !Array.isArray(value) && typeof value === 'object') {
-        // Support animating nested values (for example: shadowOffset.height)
-        updatedStyle[key] = this._walkStyleAndGetAnimatedValues(value);
-      }
-    }
-    return updatedStyle;
-  }
-
-  __onEvaluate() {
-    return this._walkStyleAndGetAnimatedValues(this._style);
-  }
-
-  __makeNative() {
-    super.__makeNative();
-    for (const key in this._style) {
-      const value = this._style[key];
-      if (value instanceof AnimatedNode) {
-        value.__makeNative();
-      }
-    }
-  }
-
-  __getNativeConfig() {
-    const styleConfig = {};
-    for (const styleKey in this._style) {
-      if (this._style[styleKey] instanceof AnimatedNode) {
-        styleConfig[styleKey] = this._style[styleKey].__getNativeTag();
-      }
-      // Non-animated styles are set using `setNativeProps`, no need
-      // to pass those as a part of the node config
-    }
-    NativeAnimatedHelper.validateStyles(styleConfig);
-    return {
-      type: 'style',
-      style: styleConfig,
-    };
-  }
-}

package/nodes/AnimatedTracking.js

@@ -1,36 +0,0 @@
-import AnimatedNode from './AnimatedNode';
-
-export default class AnimatedTracking extends AnimatedNode {
-  constructor(value, parent, animationClass, animationConfig, callback) {
-    super();
-    this._value = value;
-    this._parent = parent;
-    this._animationClass = animationClass;
-    this._animationConfig = animationConfig;
-    this._callback = callback;
-    this.__attach();
-  }
-
-  __getValue() {
-    return this._parent.__getValue();
-  }
-
-  __attach() {
-    this._parent.__addChild(this);
-  }
-
-  __detach() {
-    this._parent.__removeChild(this);
-    super.__detach();
-  }
-
-  update() {
-    this._value.animate(
-      new this._animationClass({
-        ...this._animationConfig,
-        toValue: this._animationConfig.toValue.__getValue(),
-      }),
-      this._callback
-    );
-  }
-}

package/nodes/AnimatedTransform.js

@@ -1,93 +0,0 @@
-import AnimatedNode from './AnimatedNode';
-import AnimatedWithInput from './AnimatedWithInput';
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
-
-function extractAnimatedParentNodes(transforms) {
-  const parents = [];
-  transforms.forEach(transform => {
-    const result = {};
-    for (const key in transform) {
-      const value = transform[key];
-      if (value instanceof AnimatedNode) {
-        parents.push(value);
-      }
-    }
-  });
-  return parents;
-}
-
-export default class AnimatedTransform extends AnimatedWithInput {
-  constructor(transforms) {
-    super(extractAnimatedParentNodes(transforms));
-    this._transforms = transforms;
-  }
-
-  __makeNative() {
-    super.__makeNative();
-    this._transforms.forEach(transform => {
-      for (const key in transform) {
-        const value = transform[key];
-        if (value instanceof AnimatedNode) {
-          value.__makeNative();
-        }
-      }
-    });
-  }
-
-  __getProps() {
-    return this._transforms.map(transform => {
-      const result = {};
-      for (const key in transform) {
-        const value = transform[key];
-        if (value instanceof AnimatedNode) {
-          result[key] = value.__getProps();
-        } else {
-          result[key] = value;
-        }
-      }
-      return result;
-    });
-  }
-
-  __onEvaluate() {
-    return this._transforms.map(transform => {
-      const result = {};
-      for (const key in transform) {
-        const value = transform[key];
-        if (value instanceof AnimatedNode) {
-          result[key] = value.__getValue();
-        }
-      }
-      return result;
-    });
-  }
-
-  __getNativeConfig() {
-    const transConfigs = [];
-
-    this._transforms.forEach(transform => {
-      for (const key in transform) {
-        const value = transform[key];
-        if (value instanceof AnimatedNode) {
-          transConfigs.push({
-            type: 'animated',
-            property: key,
-            nodeTag: value.__getNativeTag(),
-          });
-        } else {
-          transConfigs.push({
-            type: 'static',
-            property: key,
-            value,
-          });
-        }
-      }
-    });
-
-    NativeAnimatedHelper.validateTransform(transConfigs);
-    return {
-      type: 'transform',
-      transforms: transConfigs,
-    };
-  }
-}

package/nodes/AnimatedValue.js

@@ -1,271 +0,0 @@
-import AnimatedInterpolation from './AnimatedInterpolation';
-import AnimatedWithInput from './AnimatedWithInput';
-import InteractionManager from 'InteractionManager';
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
-import { onNodeUpdated } from '../CoreAnimated';
-
-const NativeAnimatedAPI = NativeAnimatedHelper.API;
-
-let _uniqueId = 1;
-
-/**
- * Standard value for driving animations.  One `Animated.Value` can drive
- * multiple properties in a synchronized fashion, but can only be driven by one
- * mechanism at a time.  Using a new mechanism (e.g. starting a new animation,
- * or calling `setValue`) will stop any previous ones.
- *
- * See http://facebook.github.io/react-native/docs/animatedvalue.html
- */
-export default class AnimatedValue extends AnimatedWithInput {
-  constructor(value) {
-    super();
-    this._startingValue = this._value = value;
-    this._offset = 0;
-    this._animation = null;
-    this._listeners = {};
-  }
-
-  __detach() {
-    this.stopAnimation();
-    super.__detach();
-  }
-
-  __onEvaluate() {
-    return this._value + this._offset;
-  }
-
-  __makeNative() {
-    super.__makeNative();
-
-    if (Object.keys(this._listeners).length) {
-      this._startListeningToNativeValueUpdates();
-    }
-  }
-
-  /**
-   * Directly set the value.  This will stop any animations running on the value
-   * and update all the bound properties.
-   *
-   * See http://facebook.github.io/react-native/docs/animatedvalue.html#setvalue
-   */
-  setValue(value) {
-    if (this._animation) {
-      this._animation.stop();
-      this._animation = null;
-    }
-    this._updateValue(
-      value,
-      !this.__isNative /* don't perform a flush for natively driven values */
-    );
-    if (this.__isNative) {
-      NativeAnimatedAPI.setAnimatedNodeValue(this.__getNativeTag(), value);
-    }
-  }
-
-  /**
-   * Sets an offset that is applied on top of whatever value is set, whether via
-   * `setValue`, an animation, or `Animated.event`.  Useful for compensating
-   * things like the start of a pan gesture.
-   *
-   * See http://facebook.github.io/react-native/docs/animatedvalue.html#setoffset
-   */
-  setOffset(offset) {
-    this._offset = offset;
-    if (this.__isNative) {
-      NativeAnimatedAPI.setAnimatedNodeOffset(this.__getNativeTag(), offset);
-    }
-  }
-
-  /**
-   * Merges the offset value into the base value and resets the offset to zero.
-   * The final output of the value is unchanged.
-   *
-   * See http://facebook.github.io/react-native/docs/animatedvalue.html#flattenoffset
-   */
-  flattenOffset() {
-    this._value += this._offset;
-    this._offset = 0;
-    if (this.__isNative) {
-      NativeAnimatedAPI.flattenAnimatedNodeOffset(this.__getNativeTag());
-    }
-  }
-
-  /**
-   * Sets the offset value to the base value, and resets the base value to zero.
-   * The final output of the value is unchanged.
-   *
-   * See http://facebook.github.io/react-native/docs/animatedvalue.html#extractoffset
-   */
-  extractOffset() {
-    this._offset += this._value;
-    this._value = 0;
-    if (this.__isNative) {
-      NativeAnimatedAPI.extractAnimatedNodeOffset(this.__getNativeTag());
-    }
-  }
-
-  /**
-   * Adds an asynchronous listener to the value so you can observe updates from
-   * animations.  This is useful because there is no way to
-   * synchronously read the value because it might be driven natively.
-   *
-   * See http://facebook.github.io/react-native/docs/animatedvalue.html#addlistener
-   */
-  addListener(callback) {
-    const id = String(_uniqueId++);
-    this._listeners[id] = callback;
-    if (this.__isNative) {
-      this._startListeningToNativeValueUpdates();
-    }
-    return id;
-  }
-
-  /**
-   * Unregister a listener. The `id` param shall match the identifier
-   * previously returned by `addListener()`.
-   *
-   * See http://facebook.github.io/react-native/docs/animatedvalue.html#removelistener
-   */
-  removeListener(id) {
-    delete this._listeners[id];
-    if (this.__isNative && Object.keys(this._listeners).length === 0) {
-      this._stopListeningForNativeValueUpdates();
-    }
-  }
-
-  /**
-   * Remove all registered listeners.
-   *
-   * See http://facebook.github.io/react-native/docs/animatedvalue.html#removealllisteners
-   */
-  removeAllListeners() {
-    this._listeners = {};
-    if (this.__isNative) {
-      this._stopListeningForNativeValueUpdates();
-    }
-  }
-
-  _startListeningToNativeValueUpdates() {
-    if (this.__nativeAnimatedValueListener) {
-      return;
-    }
-
-    NativeAnimatedAPI.startListeningToAnimatedNodeValue(this.__getNativeTag());
-    this.__nativeAnimatedValueListener = NativeAnimatedHelper.nativeEventEmitter.addListener(
-      'onAnimatedValueUpdate',
-      data => {
-        if (data.tag !== this.__getNativeTag()) {
-          return;
-        }
-        this._updateValue(data.value, false /* flush */);
-      }
-    );
-  }
-
-  _stopListeningForNativeValueUpdates() {
-    if (!this.__nativeAnimatedValueListener) {
-      return;
-    }
-
-    this.__nativeAnimatedValueListener.remove();
-    this.__nativeAnimatedValueListener = null;
-    NativeAnimatedAPI.stopListeningToAnimatedNodeValue(this.__getNativeTag());
-  }
-
-  /**
-   * Stops any running animation or tracking. `callback` is invoked with the
-   * final value after stopping the animation, which is useful for updating
-   * state to match the animation position with layout.
-   *
-   * See http://facebook.github.io/react-native/docs/animatedvalue.html#stopanimation
-   */
-  stopAnimation(callback) {
-    this.stopTracking();
-    this._animation && this._animation.stop();
-    this._animation = null;
-    callback && callback(this.__getValue());
-  }
-
-  /**
-   * Stops any animation and resets the value to its original.
-   *
-   * See http://facebook.github.io/react-native/docs/animatedvalue.html#resetanimation
-   */
-  resetAnimation(callback) {
-    this.stopAnimation(callback);
-    this._value = this._startingValue;
-  }
-
-  /**
-   * Interpolates the value before updating the property, e.g. mapping 0-1 to
-   * 0-10.
-   */
-  interpolate(config) {
-    return new AnimatedInterpolation(this, config);
-  }
-
-  /**
-   * Typically only used internally, but could be used by a custom Animation
-   * class.
-   *
-   * See http://facebook.github.io/react-native/docs/animatedvalue.html#animate
-   */
-  animate(animation, callback) {
-    let handle = null;
-    if (animation.__isInteraction) {
-      handle = InteractionManager.createInteractionHandle();
-    }
-    const previousAnimation = this._animation;
-    this._animation && this._animation.stop();
-    this._animation = animation;
-    animation.start(this);
-    //   this._value,
-    //   value => {
-    //     // Natively driven animations will never call into that callback, therefore we can always
-    //     // pass flush = true to allow the updated value to propagate to native with setNativeProps
-    //     this._updateValue(value, true /* flush */);
-    //   },
-    //   result => {
-    //     this._animation = null;
-    //     if (handle !== null) {
-    //       InteractionManager.clearInteractionHandle(handle);
-    //     }
-    //     callback && callback(result);
-    //   },
-    //   previousAnimation,
-    //   this,
-    // );
-  }
-
-  /**
-   * Typically only used internally.
-   */
-  stopTracking() {
-    this._tracking && this._tracking.__detach();
-    this._tracking = null;
-  }
-
-  /**
-   * Typically only used internally.
-   */
-  track(tracking) {
-    this.stopTracking();
-    this._tracking = tracking;
-  }
-
-  _updateValue(value, flush) {
-    this._value = value;
-    onNodeUpdated(this);
-    for (const key in this._listeners) {
-      this._listeners[key]({ value: this.__getValue() });
-    }
-  }
-
-  __getNativeConfig() {
-    return {
-      type: 'value',
-      value: this._value,
-      offset: this._offset,
-    };
-  }
-}

package/nodes/AnimatedWithInput.js

@@ -1,21 +0,0 @@
-import AnimatedNode from './AnimatedNode';
-
-export default class AnimatedWithInput extends AnimatedNode {
-  constructor(inputNodes) {
-    super();
-    this.__inputNodes =
-      inputNodes && inputNodes.filter(node => node instanceof AnimatedNode);
-  }
-
-  __attach() {
-    super.__attach();
-    this.__inputNodes &&
-      this.__inputNodes.forEach(node => node.__addChild(this));
-  }
-
-  __detach() {
-    this.__inputNodes &&
-      this.__inputNodes.forEach(node => node.__removeChild(this));
-    super.__detach();
-  }
-}

package/nodes/SpringNode.js

@@ -1,106 +0,0 @@
-import AnimatedWithInput from './AnimatedWithInput';
-import { proxyAnimatedObject, val } from '../utils';
-
-const MAX_STEPS_MS = 64;
-
-function spring(now, toValue, state, config) {
-  const lastTimeMs = state.time || now;
-  const lastPosition = state.position;
-  const lastVelocity = state.velocity;
-
-  const deltaTimeMs = Math.min(now - lastTimeMs, MAX_STEPS_MS);
-
-  const c = config.damping;
-  const m = config.mass;
-  const k = config.stiffness;
-  const v0 = -lastVelocity;
-  const x0 = toValue - lastPosition;
-
-  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
-
-  let position = 0.0;
-  let velocity = 0.0;
-  const t = deltaTimeMs / 1000.0; // in seconds
-  // throw new Error('ddd');
-  if (zeta < 1) {
-    // Under damped
-    const envelope = Math.exp(-zeta * omega0 * t);
-    position =
-      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 = toValue - envelope * (x0 + (v0 + omega0 * x0) * t);
-    velocity = envelope * (v0 * (t * omega0 - 1) + t * x0 * (omega0 * omega0));
-  }
-
-  // updates
-  state.time = now;
-  state.velocity = velocity;
-  state.position = position;
-
-  // Conditions for stopping the spring animation
-  let isOvershooting = false;
-  if (config.overshootClamping && config.stiffness !== 0) {
-    if (lastPosition < toValue) {
-      isOvershooting = position > toValue;
-    } else {
-      isOvershooting = position < toValue;
-    }
-  }
-  const isVelocity = Math.abs(velocity) <= config.restSpeedThreshold;
-  let isDisplacement = true;
-  if (config.stiffness !== 0) {
-    isDisplacement =
-      Math.abs(toValue - position) <= config.restDisplacementThreshold;
-  }
-
-  if (isOvershooting || (isVelocity && isDisplacement)) {
-    if (config.stiffness !== 0) {
-      // Ensure that we end up with a round value
-      state.velocity = 0;
-      state.position = toValue;
-    }
-
-    state.finished = true;
-  }
-}
-
-export default class SpringNode extends AnimatedWithInput {
-  _clock;
-  _state;
-  _config;
-  _toValue;
-
-  constructor(clock, toValue, state, config) {
-    super([clock]);
-    this._clock = clock;
-    this._state = proxyAnimatedObject(state);
-    this._toValue = toValue;
-    this._config = config;
-  }
-
-  update() {
-    val(this);
-  }
-
-  __onEvaluate() {
-    spring(val(this._clock), val(this._toValue), this._state, this._config);
-  }
-}

package/nodes/TimingStep.js

@@ -1,44 +0,0 @@
-import AnimatedWithInput from './AnimatedWithInput';
-import { val } from '../utils';
-
-function timing(now, state, config, easing) {
-  const time = state.time || now;
-  const dt = now - time;
-  const frameTime = state.frameTime;
-  const position = state.position;
-
-  if (frameTime + dt >= config.duration) {
-    state.position = config.toValue;
-    state.finished = 1;
-  } else {
-    const lastProgress = easing(frameTime / config.duration);
-    const dp = easing((frameTime + dt) / config.duration) - lastProgress;
-    const remaining = config.toValue - position;
-    state.position = position + remaining * dp / (1 - lastProgress);
-  }
-  state.frameTime = frameTime + dt;
-  state.time = now;
-}
-
-export default class TimingStep extends AnimatedWithInput {
-  _state;
-  _config;
-  _easing;
-  _clock;
-
-  constructor(clock, state, config, easing) {
-    super([clock]);
-    this._clock = clock;
-    this._state = state;
-    this._config = config;
-    this._easing = easing;
-  }
-
-  update() {
-    val(this);
-  }
-
-  __onEvaluate() {
-    timing(val(this._clock), this._state, this._config, this._easing);
-  }
-}

package/utils.js

@@ -1,28 +0,0 @@
-import AnimatedBlock from './nodes/AnimatedBlock';
-import AnimatedNode from './nodes/AnimatedNode';
-
-export function adapt(v) {
-  return Array.isArray(v) ? new AnimatedBlock(v.map(node => adapt(node))) : v;
-}
-
-export function val(v) {
-  return v.__getValue ? v.__getValue() : v;
-}
-
-export function proxyAnimatedObject(target) {
-  const handler = {
-    get(target, key) {
-      return val(target[key]);
-    },
-    set(target, key, val) {
-      const value = target[key];
-      if (value instanceof AnimatedNode) {
-        return value._updateValue(val);
-      } else {
-        target[key] = val;
-      }
-      return true;
-    },
-  };
-  return new Proxy(target, handler);
-}