react-native-reanimated 2.3.0-alpha.1 → 2.3.0-beta.2

package/src/reanimated2/animation/styleAnimation.ts

@@ -0,0 +1,253 @@
+import { defineAnimation } from './util';
+import {
+  Timestamp,
+  HigherOrderAnimation,
+  AnimationCallback,
+  PrimitiveValue,
+  AnimationObject,
+  Animation,
+} from './commonTypes';
+import {
+  AnimatedStyle,
+  NestedObject,
+  NestedObjectValues,
+  StyleProps,
+} from '../commonTypes';
+import { withTiming } from './timing';
+
+export interface StyleLayoutAnimation extends HigherOrderAnimation {
+  current: StyleProps;
+  styleAnimations: AnimatedStyle;
+  onFrame: (animation: StyleLayoutAnimation, timestamp: Timestamp) => boolean;
+  onStart: (
+    nextAnimation: StyleLayoutAnimation,
+    current: AnimatedStyle,
+    timestamp: Timestamp,
+    previousAnimation: StyleLayoutAnimation
+  ) => void;
+  callback?: AnimationCallback;
+}
+
+// resolves path to value for nested objects
+// if path cannot be resolved returns undefined
+export function resolvePath<T>(
+  obj: NestedObject<T>,
+  path: PrimitiveValue[] | PrimitiveValue
+): NestedObjectValues<T> | undefined {
+  'worklet';
+  const keys: PrimitiveValue[] = Array.isArray(path) ? path : [path];
+  return keys.reduce<NestedObjectValues<T> | undefined>((acc, current) => {
+    if (Array.isArray(acc) && typeof current === 'number') {
+      return acc[current];
+    } else if (typeof acc === 'object' && current in acc) {
+      return (acc as { [key: string]: NestedObjectValues<T> })[current];
+    }
+    return undefined;
+  }, obj);
+}
+
+// set value at given path
+export function setPath<T>(
+  obj: NestedObject<T>,
+  path: PrimitiveValue[] | PrimitiveValue,
+  value: NestedObjectValues<T>
+): void {
+  'worklet';
+  const keys: PrimitiveValue[] = Array.isArray(path) ? path : [path];
+  let currObj: NestedObjectValues<T> = obj;
+  for (let i = 0; i < keys.length - 1; i++) {
+    // creates entry if there isn't one
+    currObj = currObj as { [key: string]: NestedObjectValues<T> };
+    if (!currObj[keys[i]]) {
+      // if next key is a number create an array
+      if (typeof keys[i + 1] === 'number') {
+        currObj[keys[i]] = [];
+      } else {
+        currObj[keys[i]] = {};
+      }
+    }
+    currObj = currObj[keys[i]];
+  }
+
+  (currObj as { [key: string]: NestedObjectValues<T> })[
+    keys[keys.length - 1]
+  ] = value;
+}
+
+interface NestedObjectEntry<T> {
+  value: NestedObjectValues<T>;
+  path: PrimitiveValue[];
+}
+
+export function withStyleAnimation(
+  styleAnimations: AnimatedStyle
+): StyleLayoutAnimation {
+  'worklet';
+  return defineAnimation<StyleLayoutAnimation>({}, () => {
+    'worklet';
+
+    const onFrame = (
+      animation: StyleLayoutAnimation,
+      now: Timestamp
+    ): boolean => {
+      let stillGoing = false;
+      const entriesToCheck: NestedObjectEntry<AnimationObject>[] = [
+        { value: animation.styleAnimations, path: [] },
+      ];
+      while (entriesToCheck.length > 0) {
+        const currentEntry: NestedObjectEntry<AnimationObject> = entriesToCheck.pop() as NestedObjectEntry<AnimationObject>;
+        if (Array.isArray(currentEntry.value)) {
+          for (let index = 0; index < currentEntry.value.length; index++) {
+            entriesToCheck.push({
+              value: currentEntry.value[index],
+              path: currentEntry.path.concat(index),
+            });
+          }
+        } else if (
+          typeof currentEntry.value === 'object' &&
+          currentEntry.value.onFrame === undefined
+        ) {
+          // nested object
+          for (const key of Object.keys(currentEntry.value)) {
+            entriesToCheck.push({
+              value: currentEntry.value[key],
+              path: currentEntry.path.concat(key),
+            });
+          }
+        } else {
+          const currentStyleAnimation: AnimationObject = currentEntry.value as AnimationObject;
+          if (currentStyleAnimation.finished) {
+            continue;
+          }
+          const finished = currentStyleAnimation.onFrame(
+            currentStyleAnimation,
+            now
+          );
+          if (finished) {
+            currentStyleAnimation.finished = true;
+            if (currentStyleAnimation.callback) {
+              currentStyleAnimation.callback(true);
+            }
+          } else {
+            stillGoing = true;
+          }
+          setPath(
+            animation.current,
+            currentEntry.path,
+            currentStyleAnimation.current
+          );
+        }
+      }
+      return !stillGoing;
+    };
+
+    const onStart = (
+      animation: StyleLayoutAnimation,
+      value: AnimatedStyle,
+      now: Timestamp,
+      previousAnimation: StyleLayoutAnimation
+    ): void => {
+      const entriesToCheck: NestedObjectEntry<
+        AnimationObject | PrimitiveValue
+      >[] = [{ value: styleAnimations, path: [] }];
+      while (entriesToCheck.length > 0) {
+        const currentEntry: NestedObjectEntry<
+          AnimationObject | PrimitiveValue
+        > = entriesToCheck.pop() as NestedObjectEntry<
+          AnimationObject | PrimitiveValue
+        >;
+        if (Array.isArray(currentEntry.value)) {
+          for (let index = 0; index < currentEntry.value.length; index++) {
+            entriesToCheck.push({
+              value: currentEntry.value[index],
+              path: currentEntry.path.concat(index),
+            });
+          }
+        } else if (
+          typeof currentEntry.value === 'object' &&
+          currentEntry.value.onStart === undefined
+        ) {
+          for (const key of Object.keys(currentEntry.value)) {
+            entriesToCheck.push({
+              value: currentEntry.value[key],
+              path: currentEntry.path.concat(key),
+            });
+          }
+        } else {
+          const prevAnimation = resolvePath(
+            previousAnimation?.styleAnimations,
+            currentEntry.path
+          );
+          let prevVal = resolvePath(value, currentEntry.path);
+          if (prevAnimation && !prevVal) {
+            prevVal = prevAnimation.current;
+          }
+          setPath(animation.current, currentEntry.path, prevVal);
+          let currentAnimation: AnimationObject;
+          if (
+            typeof currentEntry.value !== 'object' ||
+            !currentEntry.value.onStart
+          ) {
+            currentAnimation = withTiming(
+              currentEntry.value as PrimitiveValue,
+              { duration: 0 }
+            );
+            setPath(
+              animation.styleAnimations,
+              currentEntry.path,
+              currentAnimation
+            );
+          } else {
+            currentAnimation = currentEntry.value as Animation<AnimationObject>;
+          }
+          currentAnimation.onStart(
+            currentAnimation,
+            prevVal,
+            now,
+            prevAnimation
+          );
+        }
+      }
+    };
+
+    const callback = (finished: boolean): void => {
+      if (!finished) {
+        const animationsToCheck: NestedObjectValues<AnimationObject>[] = [
+          styleAnimations,
+        ];
+        while (animationsToCheck.length > 0) {
+          const currentAnimation: NestedObjectValues<AnimationObject> = animationsToCheck.pop() as NestedObjectValues<AnimationObject>;
+          if (Array.isArray(currentAnimation)) {
+            for (const element of currentAnimation) {
+              animationsToCheck.push(element);
+            }
+          } else if (
+            typeof currentAnimation === 'object' &&
+            currentAnimation.onStart === undefined
+          ) {
+            for (const value of Object.values(currentAnimation)) {
+              animationsToCheck.push(value);
+            }
+          } else {
+            const currentStyleAnimation: AnimationObject = currentAnimation as AnimationObject;
+            if (
+              !currentStyleAnimation.finished &&
+              currentStyleAnimation.callback
+            ) {
+              currentStyleAnimation.callback(false);
+            }
+          }
+        }
+      }
+    };
+
+    return {
+      isHigherOrder: true,
+      onFrame,
+      onStart,
+      current: {},
+      styleAnimations,
+      callback,
+    } as StyleLayoutAnimation;
+  });
+}

package/src/reanimated2/animation/timing.ts

@@ -0,0 +1,109 @@
+import { Easing, EasingFn, EasingFactoryFn } from '../Easing';
+import { defineAnimation } from './util';
+import {
+  Animation,
+  AnimationCallback,
+  Timestamp,
+  PrimitiveValue,
+} from './commonTypes';
+
+interface TimingConfig {
+  duration?: number;
+  easing?: EasingFn | EasingFactoryFn;
+}
+
+export interface TimingAnimation extends Animation<TimingAnimation> {
+  type: string;
+  easing: EasingFn;
+  startValue: PrimitiveValue;
+  startTime: Timestamp;
+  progress: number;
+  toValue: PrimitiveValue;
+  current: PrimitiveValue;
+}
+
+export interface InnerTimingAnimation
+  extends Omit<TimingAnimation, 'toValue' | 'current'> {
+  toValue: number;
+  current: number;
+}
+
+export function withTiming(
+  toValue: PrimitiveValue,
+  userConfig?: TimingConfig,
+  callback?: AnimationCallback
+): Animation<TimingAnimation> {
+  'worklet';
+
+  return defineAnimation<TimingAnimation>(toValue, () => {
+    'worklet';
+    const config: Required<TimingConfig> = {
+      duration: 300,
+      easing: Easing.inOut(Easing.quad),
+    };
+    if (userConfig) {
+      Object.keys(userConfig).forEach(
+        (key) =>
+          ((config as any)[key] = userConfig[key as keyof typeof userConfig])
+      );
+    }
+
+    function timing(animation: InnerTimingAnimation, now: Timestamp): boolean {
+      const { toValue, startTime, startValue } = animation;
+      const runtime = now - startTime;
+
+      if (runtime >= config.duration) {
+        // reset startTime to avoid reusing finished animation config in `start` method
+        animation.startTime = 0;
+        animation.current = toValue;
+        return true;
+      }
+      const progress = animation.easing(runtime / config.duration);
+      animation.current =
+        (startValue as number) + (toValue - (startValue as number)) * progress;
+      return false;
+    }
+
+    function onStart(
+      animation: TimingAnimation,
+      value: number,
+      now: Timestamp,
+      previousAnimation: Animation<TimingAnimation>
+    ): void {
+      if (
+        previousAnimation &&
+        (previousAnimation as TimingAnimation).type === 'timing' &&
+        (previousAnimation as TimingAnimation).toValue === toValue &&
+        (previousAnimation as TimingAnimation).startTime
+      ) {
+        // to maintain continuity of timing animations we check if we are starting
+        // new timing over the old one with the same parameters. If so, we want
+        // to copy animation timeline properties
+        animation.startTime = (previousAnimation as TimingAnimation).startTime;
+        animation.startValue = (previousAnimation as TimingAnimation).startValue;
+      } else {
+        animation.startTime = now;
+        animation.startValue = value;
+      }
+      animation.current = value;
+      if (typeof config.easing === 'object') {
+        animation.easing = config.easing.factory();
+      } else {
+        animation.easing = config.easing;
+      }
+    }
+
+    return {
+      type: 'timing',
+      onFrame: timing,
+      onStart: onStart as (animation: TimingAnimation, now: number) => boolean,
+      progress: 0,
+      toValue,
+      startValue: 0,
+      startTime: 0,
+      easing: () => 0,
+      current: toValue,
+      callback,
+    } as TimingAnimation;
+  });
+}

package/src/reanimated2/animation/util.ts

@@ -0,0 +1,242 @@
+import {
+  Animation,
+  AnimationObject,
+  HigherOrderAnimation,
+  NextAnimation,
+  PrimitiveValue,
+  Timestamp,
+} from './commonTypes';
+/* global _WORKLET */
+import { ParsedColorArray, convertToHSVA, isColor, toRGBA } from '../Colors';
+
+import { AnimatedStyle, SharedValue } from '../commonTypes';
+import { DelayAnimation } from './delay';
+import NativeReanimatedModule from '../NativeReanimated';
+import { RepeatAnimation } from './repeat';
+import { SequenceAnimation } from './sequence';
+import { StyleLayoutAnimation } from './styleAnimation';
+
+let IN_STYLE_UPDATER = false;
+
+export type UserUpdater = () => AnimatedStyle;
+
+export function initialUpdaterRun<T>(updater: () => T): T {
+  IN_STYLE_UPDATER = true;
+  const result = updater();
+  IN_STYLE_UPDATER = false;
+  return result;
+}
+interface RecognizedPrefixSuffix {
+  prefix?: string;
+  suffix?: string;
+  strippedValue: number;
+}
+
+function recognizePrefixSuffix(value: PrimitiveValue): RecognizedPrefixSuffix {
+  'worklet';
+  if (typeof value === 'string') {
+    const match = value.match(
+      /([A-Za-z]*)(-?\d*\.?\d*)([eE][-+]?[0-9]+)?([A-Za-z%]*)/
+    );
+    if (!match) {
+      throw Error(
+        "Couldn't parse animation value. Check if there isn't any typo."
+      );
+    }
+    const prefix = match[1];
+    const suffix = match[4];
+    // number with scientific notation
+    const number = match[2] + (match[3] ?? '');
+    return { prefix, suffix, strippedValue: parseFloat(number) };
+  } else {
+    return { strippedValue: value };
+  }
+}
+
+function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
+  animation: T
+): void {
+  'worklet';
+  if ((animation as HigherOrderAnimation).isHigherOrder) {
+    return;
+  }
+
+  const baseOnStart = (animation as Animation<AnimationObject>).onStart;
+  const baseOnFrame = (animation as Animation<AnimationObject>).onFrame;
+  const animationCopy = Object.assign({}, animation);
+  delete animationCopy.callback;
+
+  const prefNumberSuffOnStart = (
+    animation: Animation<AnimationObject>,
+    value: PrimitiveValue,
+    timestamp: number,
+    previousAnimation: Animation<AnimationObject>
+  ) => {
+    // recognize prefix, suffix, and updates stripped value on animation start
+    const { prefix, suffix, strippedValue } = recognizePrefixSuffix(value);
+    animation.__prefix = prefix;
+    animation.__suffix = suffix;
+    animation.strippedCurrent = strippedValue;
+    const { strippedValue: strippedToValue } = recognizePrefixSuffix(
+      animation.toValue as PrimitiveValue
+    );
+    animation.current = strippedValue;
+    animation.startValue = strippedValue;
+    animation.toValue = strippedToValue;
+    if (previousAnimation && previousAnimation !== animation) {
+      previousAnimation.current = previousAnimation.strippedCurrent;
+    }
+
+    baseOnStart(animation, strippedValue, timestamp, previousAnimation);
+
+    animation.current =
+      (animation.__prefix ?? '') +
+      animation.current +
+      (animation.__suffix ?? '');
+
+    if (previousAnimation && previousAnimation !== animation) {
+      previousAnimation.current =
+        (previousAnimation.__prefix ?? '') +
+        previousAnimation.current +
+        (previousAnimation.__suffix ?? '');
+    }
+  };
+  const prefNumberSuffOnFrame = (
+    animation: Animation<AnimationObject>,
+    timestamp: number
+  ) => {
+    animation.current = animation.strippedCurrent;
+    const res = baseOnFrame(animation, timestamp);
+    animation.strippedCurrent = animation.current;
+    animation.current =
+      (animation.__prefix ?? '') +
+      animation.current +
+      (animation.__suffix ?? '');
+    return res;
+  };
+
+  const tab = ['H', 'S', 'V', 'A'];
+  const colorOnStart = (
+    animation: Animation<AnimationObject>,
+    value: string | number,
+    timestamp: Timestamp,
+    previousAnimation: Animation<AnimationObject>
+  ): void => {
+    let HSVAValue: ParsedColorArray;
+    let HSVACurrent: ParsedColorArray;
+    let HSVAToValue: ParsedColorArray;
+    const res: Array<number> = [];
+    if (isColor(value)) {
+      HSVACurrent = convertToHSVA(animation.current);
+      HSVAValue = convertToHSVA(value);
+      if (animation.toValue) {
+        HSVAToValue = convertToHSVA(animation.toValue);
+      }
+    }
+    tab.forEach((i, index) => {
+      animation[i] = Object.assign({}, animationCopy);
+      animation[i].current = HSVACurrent[index];
+      animation[i].toValue = HSVAToValue ? HSVAToValue[index] : undefined;
+      animation[i].onStart(
+        animation[i],
+        HSVAValue[index],
+        timestamp,
+        previousAnimation ? previousAnimation[i] : undefined
+      );
+      res.push(animation[i].current);
+    });
+
+    animation.current = toRGBA(res as ParsedColorArray);
+  };
+
+  const colorOnFrame = (
+    animation: Animation<AnimationObject>,
+    timestamp: Timestamp
+  ): boolean => {
+    const HSVACurrent = convertToHSVA(animation.current);
+    const res: Array<number> = [];
+    let finished = true;
+    tab.forEach((i, index) => {
+      animation[i].current = HSVACurrent[index];
+      // @ts-ignore: disable-next-line
+      finished &= animation[i].onFrame(animation[i], timestamp);
+      res.push(animation[i].current);
+    });
+
+    animation.current = toRGBA(res as ParsedColorArray);
+    return finished;
+  };
+
+  animation.onStart = (
+    animation: Animation<AnimationObject>,
+    value: number,
+    timestamp: Timestamp,
+    previousAnimation: Animation<AnimationObject>
+  ) => {
+    if (isColor(value)) {
+      colorOnStart(animation, value, timestamp, previousAnimation);
+      animation.onFrame = colorOnFrame;
+      return;
+    } else if (typeof value === 'string') {
+      prefNumberSuffOnStart(animation, value, timestamp, previousAnimation);
+      animation.onFrame = prefNumberSuffOnFrame;
+      return;
+    }
+    baseOnStart(animation, value, timestamp, previousAnimation);
+  };
+}
+
+type AnimationToDecoration<
+  T extends AnimationObject | StyleLayoutAnimation
+> = T extends StyleLayoutAnimation
+  ? Record<string, unknown>
+  : T extends DelayAnimation
+  ? NextAnimation<DelayAnimation>
+  : T extends RepeatAnimation
+  ? NextAnimation<RepeatAnimation>
+  : T extends SequenceAnimation
+  ? NextAnimation<SequenceAnimation>
+  : PrimitiveValue | T;
+
+export function defineAnimation<
+  T extends AnimationObject | StyleLayoutAnimation
+>(starting: AnimationToDecoration<T>, factory: () => T): T {
+  'worklet';
+  if (IN_STYLE_UPDATER) {
+    return starting as T;
+  }
+  const create = () => {
+    'worklet';
+    const animation = factory();
+    decorateAnimation<T>(animation);
+    return animation;
+  };
+
+  if (_WORKLET || !NativeReanimatedModule.native) {
+    return create();
+  }
+  // @ts-ignore: eslint-disable-line
+  return create;
+}
+
+export function cancelAnimation<T>(sharedValue: SharedValue<T>): void {
+  'worklet';
+  // setting the current value cancels the animation if one is currently running
+  sharedValue.value = sharedValue.value; // eslint-disable-line no-self-assign
+}
+
+// TODO it should work only if there was no animation before.
+export function withStartValue(
+  startValue: PrimitiveValue,
+  animation: NextAnimation<AnimationObject>
+): Animation<AnimationObject> {
+  'worklet';
+  return defineAnimation(startValue, () => {
+    'worklet';
+    if (!_WORKLET && typeof animation === 'function') {
+      animation = animation();
+    }
+    (animation as Animation<AnimationObject>).current = startValue;
+    return animation as Animation<AnimationObject>;
+  });
+}

package/src/reanimated2/commonTypes.ts

@@ -0,0 +1,81 @@
+import {
+  PerpectiveTransform,
+  RotateTransform,
+  RotateXTransform,
+  RotateYTransform,
+  RotateZTransform,
+  ScaleTransform,
+  ScaleXTransform,
+  ScaleYTransform,
+  TranslateXTransform,
+  TranslateYTransform,
+  SkewXTransform,
+  SkewYTransform,
+  MatrixTransform,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { Animation, AnimationObject } from './animation/commonTypes';
+import { Context } from './hook/commonTypes';
+
+export type TransformProperty =
+  | PerpectiveTransform
+  | RotateTransform
+  | RotateXTransform
+  | RotateYTransform
+  | RotateZTransform
+  | ScaleTransform
+  | ScaleXTransform
+  | ScaleYTransform
+  | TranslateXTransform
+  | TranslateYTransform
+  | SkewXTransform
+  | SkewYTransform
+  | MatrixTransform;
+
+export interface StyleProps extends ViewStyle, TextStyle {
+  originX?: number;
+  originY?: number;
+  [key: string]: any;
+}
+
+export interface AnimatedStyle
+  extends Record<string, Animation<AnimationObject>> {
+  [key: string]: any;
+  transform?: Array<Record<string, Animation<AnimationObject>>>;
+}
+export interface SharedValue<T> {
+  value: T;
+}
+
+export interface WorkletFunction {
+  _closure?: Context;
+  __workletHash?: number;
+  __optimalization?: number;
+  __worklet?: boolean;
+}
+
+export interface BasicWorkletFunction<T> extends WorkletFunction {
+  (): T;
+}
+
+export interface NativeEvent<T> {
+  nativeEvent: T;
+}
+export interface ComplexWorkletFunction<A extends any[], R>
+  extends WorkletFunction {
+  (...args: A): R;
+}
+
+export interface NestedObject<T> {
+  [key: string]: NestedObjectValues<T>;
+}
+
+export type NestedObjectValues<T> =
+  | T
+  | Array<NestedObjectValues<T>>
+  | NestedObject<T>;
+
+export interface AdapterWorkletFunction extends WorkletFunction {
+  (value: NestedObject<string | number | AnimationObject>): void;
+}