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

package/src/reanimated2/animation/decay.ts

@@ -0,0 +1,141 @@
+import { defineAnimation } from './util';
+import {
+  Animation,
+  AnimationCallback,
+  AnimationObject,
+  PrimitiveValue,
+  Timestamp,
+} from './commonTypes';
+import { Platform } from 'react-native';
+
+interface DecayConfig {
+  deceleration?: number;
+  velocityFactor?: number;
+  clamp?: number[];
+  velocity?: number;
+}
+
+interface DefaultDecayConfig {
+  deceleration: number;
+  velocityFactor: number;
+  clamp?: number[];
+  velocity: number;
+}
+
+export interface DecayAnimation extends Animation<DecayAnimation> {
+  lastTimestamp: Timestamp;
+  startTimestamp: Timestamp;
+  initialVelocity: number;
+  velocity: number;
+  current: PrimitiveValue;
+}
+
+export interface InnerDecayAnimation
+  extends Omit<DecayAnimation, 'current'>,
+    AnimationObject {
+  current: number;
+}
+
+export function withDecay(
+  userConfig: DecayConfig,
+  callback?: AnimationCallback
+): Animation<DecayAnimation> {
+  'worklet';
+
+  return defineAnimation<DecayAnimation>(0, () => {
+    'worklet';
+    const config: DefaultDecayConfig = {
+      deceleration: 0.998,
+      velocityFactor: Platform.OS !== 'web' ? 1 : 1000,
+      velocity: 0,
+    };
+    if (userConfig) {
+      Object.keys(userConfig).forEach(
+        (key) =>
+          ((config as any)[key] = userConfig[key as keyof typeof userConfig])
+      );
+    }
+
+    const VELOCITY_EPS = Platform.OS !== 'web' ? 1 : 1 / 20;
+    const SLOPE_FACTOR = 0.1;
+
+    function decay(animation: InnerDecayAnimation, now: number): boolean {
+      const {
+        lastTimestamp,
+        startTimestamp,
+        initialVelocity,
+        current,
+        velocity,
+      } = animation;
+
+      const deltaTime = Math.min(now - lastTimestamp, 64);
+      const v =
+        velocity *
+        Math.exp(
+          -(1 - config.deceleration) * (now - startTimestamp) * SLOPE_FACTOR
+        );
+      animation.current =
+        current + (v * config.velocityFactor * deltaTime) / 1000; // /1000 because time is in ms not in s
+      animation.velocity = v;
+      animation.lastTimestamp = now;
+
+      if (config.clamp) {
+        if (initialVelocity < 0 && animation.current <= config.clamp[0]) {
+          animation.current = config.clamp[0];
+          return true;
+        } else if (
+          initialVelocity > 0 &&
+          animation.current >= config.clamp[1]
+        ) {
+          animation.current = config.clamp[1];
+          return true;
+        }
+      }
+
+      return Math.abs(v) < VELOCITY_EPS;
+    }
+
+    function validateConfig(): void {
+      if (config.clamp) {
+        if (!Array.isArray(config.clamp)) {
+          throw Error(
+            `config.clamp must be an array but is ${typeof config.clamp}`
+          );
+        }
+        if (config.clamp.length !== 2) {
+          throw Error(
+            `clamp array must contain 2 items but is given ${config.clamp.length}`
+          );
+        }
+      }
+      if (config.velocityFactor <= 0) {
+        throw Error(
+          `config.velocityFactor must be greather then 0 but is ${config.velocityFactor}`
+        );
+      }
+    }
+
+    function onStart(
+      animation: DecayAnimation,
+      value: number,
+      now: Timestamp
+    ): void {
+      animation.current = value;
+      animation.lastTimestamp = now;
+      animation.startTimestamp = now;
+      animation.initialVelocity = config.velocity;
+      validateConfig();
+    }
+
+    return {
+      onFrame: decay,
+      onStart,
+      callback,
+      velocity: config.velocity ?? 0,
+      initialVelocity: 0,
+      current: 0,
+      lastTimestamp: 0,
+      startTimestamp: 0,
+    } as DecayAnimation;
+  });
+}

package/src/reanimated2/animation/delay.ts

@@ -0,0 +1,103 @@
+import { defineAnimation } from './util';
+import {
+  Animation,
+  NextAnimation,
+  Timestamp,
+  HigherOrderAnimation,
+  PrimitiveValue,
+} from './commonTypes';
+
+export interface DelayAnimation
+  extends Animation<DelayAnimation>,
+    HigherOrderAnimation {
+  startTime: Timestamp;
+  started: boolean;
+  previousAnimation: DelayAnimation | null;
+  current: PrimitiveValue;
+}
+
+export function withDelay(
+  delayMs: number,
+  _nextAnimation: NextAnimation<DelayAnimation>
+): Animation<DelayAnimation> {
+  'worklet';
+  return defineAnimation<DelayAnimation>(_nextAnimation, () => {
+    'worklet';
+    const nextAnimation =
+      typeof _nextAnimation === 'function' ? _nextAnimation() : _nextAnimation;
+
+    function delay(animation: DelayAnimation, now: Timestamp): boolean {
+      const { startTime, started, previousAnimation } = animation;
+
+      if (now - startTime > delayMs) {
+        if (!started) {
+          nextAnimation.onStart(
+            nextAnimation,
+            animation.current,
+            now,
+            previousAnimation as DelayAnimation
+          );
+          animation.previousAnimation = null;
+          animation.started = true;
+        }
+        const finished = nextAnimation.onFrame(nextAnimation, now);
+        animation.current = nextAnimation.current;
+        return finished;
+      } else if (previousAnimation) {
+        const finished =
+          previousAnimation.finished ||
+          previousAnimation.onFrame(previousAnimation, now);
+        animation.current = previousAnimation.current;
+        if (finished) {
+          animation.previousAnimation = null;
+        }
+      }
+      return false;
+    }
+
+    function onStart(
+      animation: DelayAnimation,
+      value: PrimitiveValue,
+      now: Timestamp,
+      previousAnimation: DelayAnimation
+    ): void {
+      animation.startTime = now;
+      animation.started = false;
+      animation.current = value;
+      if (previousAnimation === animation) {
+        animation.previousAnimation = previousAnimation.previousAnimation;
+      } else {
+        animation.previousAnimation = previousAnimation;
+      }
+    }
+
+    const callback = (finished?: boolean): void => {
+      if (nextAnimation.callback) {
+        nextAnimation.callback(finished);
+      }
+    };
+
+    return {
+      isHigherOrder: true,
+      onFrame: delay,
+      onStart,
+      current: nextAnimation.current,
+      callback,
+      previousAnimation: null,
+      startTime: 0,
+      started: false,
+    };
+  });
+}
+
+/**
+ * @deprecated Kept for backward compatibility. Will be removed soon.
+ */
+export function delay(
+  delayMs: number,
+  _nextAnimation: NextAnimation<DelayAnimation>
+): Animation<DelayAnimation> {
+  'worklet';
+  console.warn('Method `delay` is deprecated. Please use `withDelay` instead');
+  return withDelay(delayMs, _nextAnimation);
+}

package/src/reanimated2/animation/index.ts

@@ -0,0 +1,16 @@
+export {
+  AnimationObject,
+  Animation,
+  HigherOrderAnimation,
+  AnimationCallback,
+  NextAnimation,
+  Timestamp,
+} from './commonTypes';
+export { cancelAnimation, defineAnimation, initialUpdaterRun } from './util';
+export { withTiming } from './timing';
+export { withSpring } from './spring';
+export { withDecay } from './decay';
+export { withDelay } from './delay';
+export { withRepeat } from './repeat';
+export { withSequence } from './sequence';
+export { withStyleAnimation } from './styleAnimation';

package/src/reanimated2/animation/repeat.ts

@@ -0,0 +1,128 @@
+import { defineAnimation } from './util';
+import {
+  Animation,
+  AnimationCallback,
+  NextAnimation,
+  PrimitiveValue,
+  Timestamp,
+  HigherOrderAnimation,
+} from './commonTypes';
+
+export interface RepeatAnimation
+  extends Animation<RepeatAnimation>,
+    HigherOrderAnimation {
+  reps: number;
+  startValue: PrimitiveValue;
+  toValue?: PrimitiveValue;
+  previousAnimation?: RepeatAnimation;
+}
+
+export interface InnerRepeatAnimation
+  extends Omit<RepeatAnimation, 'toValue' | 'startValue'> {
+  toValue: number;
+  startValue: number;
+}
+
+export function withRepeat(
+  _nextAnimation: NextAnimation<RepeatAnimation>,
+  numberOfReps = 2,
+  reverse = false,
+  callback?: AnimationCallback
+): Animation<RepeatAnimation> {
+  'worklet';
+
+  return defineAnimation<RepeatAnimation>(_nextAnimation, () => {
+    'worklet';
+
+    const nextAnimation: RepeatAnimation =
+      typeof _nextAnimation === 'function' ? _nextAnimation() : _nextAnimation;
+
+    function repeat(animation: InnerRepeatAnimation, now: Timestamp): boolean {
+      const finished = nextAnimation.onFrame(nextAnimation, now);
+      animation.current = nextAnimation.current;
+      if (finished) {
+        animation.reps += 1;
+        // call inner animation's callback on every repetition
+        // as the second argument the animation's current value is passed
+        if (nextAnimation.callback) {
+          nextAnimation.callback(true /* finished */, animation.current);
+        }
+        if (numberOfReps > 0 && animation.reps >= numberOfReps) {
+          return true;
+        }
+
+        const startValue = reverse
+          ? (nextAnimation.current as number)
+          : animation.startValue;
+        if (reverse) {
+          nextAnimation.toValue = animation.startValue;
+          animation.startValue = startValue;
+        }
+        nextAnimation.onStart(
+          nextAnimation,
+          startValue,
+          now,
+          nextAnimation.previousAnimation as RepeatAnimation
+        );
+        return false;
+      }
+      return false;
+    }
+
+    const repCallback = (finished: boolean): void => {
+      if (callback) {
+        callback(finished);
+      }
+      // when cancelled call inner animation's callback
+      if (!finished && nextAnimation.callback) {
+        nextAnimation.callback(false /* finished */);
+      }
+    };
+
+    function onStart(
+      animation: RepeatAnimation,
+      value: PrimitiveValue,
+      now: Timestamp,
+      previousAnimation: RepeatAnimation
+    ): void {
+      animation.startValue = value;
+      animation.reps = 0;
+      nextAnimation.onStart(nextAnimation, value, now, previousAnimation);
+    }
+
+    return {
+      isHigherOrder: true,
+      onFrame: repeat,
+      onStart,
+      reps: 0,
+      current: nextAnimation.current,
+      callback: repCallback,
+      startValue: 0,
+    } as RepeatAnimation;
+  });
+}
+
+/**
+ * @deprecated Kept for backward compatibility. Will be removed soon.
+ */
+export function repeat(
+  _nextAnimation: NextAnimation<RepeatAnimation>,
+  numberOfReps = 2,
+  reverse = false,
+  callback?: AnimationCallback
+): Animation<RepeatAnimation> {
+  'worklet';
+  console.warn(
+    'Method `repeat` is deprecated. Please use `withRepeat` instead'
+  );
+  return withRepeat(_nextAnimation, numberOfReps, reverse, callback);
+}
+
+export function loop(
+  nextAnimation: NextAnimation<RepeatAnimation>,
+  numberOfLoops = 1
+): Animation<RepeatAnimation> {
+  'worklet';
+  console.warn('Method `loop` is deprecated. Please use `withRepeat` instead');
+  return repeat(nextAnimation, Math.round(numberOfLoops * 2), true);
+}

package/src/reanimated2/animation/sequence.ts

@@ -0,0 +1,110 @@
+import { defineAnimation } from './util';
+import {
+  Animation,
+  Timestamp,
+  NextAnimation,
+  PrimitiveValue,
+  HigherOrderAnimation,
+  AnimationObject,
+} from './commonTypes';
+
+export interface SequenceAnimation
+  extends Animation<SequenceAnimation>,
+    HigherOrderAnimation {
+  animationIndex: number;
+}
+
+export function withSequence(
+  ..._animations: NextAnimation<AnimationObject>[]
+): Animation<SequenceAnimation> {
+  'worklet';
+  return defineAnimation<SequenceAnimation>(
+    _animations[0] as SequenceAnimation,
+    () => {
+      'worklet';
+      const animations = _animations.map((a) => {
+        const result = typeof a === 'function' ? a() : a;
+        result.finished = false;
+        return result;
+      });
+      const firstAnimation = animations[0];
+
+      const callback = (finished: boolean): void => {
+        if (finished) {
+          // we want to call the callback after every single animation
+          // not after all of them
+          return;
+        }
+        // this is going to be called only if sequence has been cancelled
+        animations.forEach((animation) => {
+          if (typeof animation.callback === 'function' && !animation.finished) {
+            animation.callback(finished);
+          }
+        });
+      };
+
+      function sequence(animation: SequenceAnimation, now: Timestamp): boolean {
+        const currentAnim = animations[animation.animationIndex];
+        const finished = currentAnim.onFrame(currentAnim, now);
+        animation.current = currentAnim.current;
+        if (finished) {
+          // we want to call the callback after every single animation
+          if (currentAnim.callback) {
+            currentAnim.callback(true /* finished */);
+          }
+          currentAnim.finished = true;
+          animation.animationIndex += 1;
+          if (animation.animationIndex < animations.length) {
+            const nextAnim = animations[animation.animationIndex];
+            nextAnim.onStart(nextAnim, currentAnim.current, now, currentAnim);
+            return false;
+          }
+          return true;
+        }
+        return false;
+      }
+
+      function onStart(
+        animation: SequenceAnimation,
+        value: PrimitiveValue,
+        now: Timestamp,
+        previousAnimation: SequenceAnimation
+      ): void {
+        if (animations.length === 1) {
+          throw Error(
+            'withSequence() animation require more than one animation as argument'
+          );
+        }
+        animation.animationIndex = 0;
+        if (previousAnimation === undefined) {
+          previousAnimation = animations[
+            animations.length - 1
+          ] as SequenceAnimation;
+        }
+        firstAnimation.onStart(firstAnimation, value, now, previousAnimation);
+      }
+
+      return {
+        isHigherOrder: true,
+        onFrame: sequence,
+        onStart,
+        animationIndex: 0,
+        current: firstAnimation.current,
+        callback,
+      } as SequenceAnimation;
+    }
+  );
+}
+
+/**
+ * @deprecated Kept for backward compatibility. Will be removed soon.
+ */
+export function sequence(
+  ..._animations: NextAnimation<SequenceAnimation>[]
+): Animation<SequenceAnimation> {
+  'worklet';
+  console.warn(
+    'Method `sequence` is deprecated. Please use `withSequence` instead'
+  );
+  return withSequence(..._animations);
+}

package/src/reanimated2/animation/spring.ts

@@ -0,0 +1,165 @@
+import { defineAnimation } from './util';
+import {
+  Animation,
+  AnimationCallback,
+  PrimitiveValue,
+  Timestamp,
+} from './commonTypes';
+
+interface SpringConfig {
+  // [key: string]: any;
+  mass?: number;
+  stiffness?: number;
+  overshootClamping?: boolean;
+  restDisplacementThreshold?: number;
+  restSpeedThreshold?: number;
+  velocity?: number;
+  damping?: number;
+}
+
+export interface SpringAnimation extends Animation<SpringAnimation> {
+  current: PrimitiveValue;
+  toValue: PrimitiveValue;
+  velocity: number;
+  lastTimestamp: Timestamp;
+}
+
+export interface InnerSpringAnimation
+  extends Omit<SpringAnimation, 'toValue' | 'current'> {
+  toValue: number;
+  current: number;
+}
+
+export function withSpring(
+  toValue: PrimitiveValue,
+  userConfig?: SpringConfig,
+  callback?: AnimationCallback
+): Animation<SpringAnimation> {
+  'worklet';
+
+  return defineAnimation<SpringAnimation>(toValue, () => {
+    'worklet';
+
+    // TODO: figure out why we can't use spread or Object.assign here
+    // when user config is "frozen object" we can't enumerate it (perhaps
+    // something is wrong with the object prototype).
+    const config: Required<SpringConfig> = {
+      damping: 10,
+      mass: 1,
+      stiffness: 100,
+      overshootClamping: false,
+      restDisplacementThreshold: 0.01,
+      restSpeedThreshold: 2,
+      velocity: 0,
+    };
+    if (userConfig) {
+      Object.keys(userConfig).forEach(
+        (key) =>
+          ((config as any)[key] = userConfig[key as keyof typeof userConfig])
+      );
+    }
+
+    function spring(animation: InnerSpringAnimation, now: Timestamp): boolean {
+      const { toValue, lastTimestamp, current, velocity } = animation;
+
+      const deltaTime = Math.min(now - lastTimestamp, 64);
+      animation.lastTimestamp = now;
+
+      const c = config.damping;
+      const m = config.mass;
+      const k = config.stiffness;
+
+      const v0 = -velocity;
+      const x0 = toValue - current;
+
+      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 = 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 =
+        toValue - criticallyDampedEnvelope * (x0 + (v0 + omega0 * x0) * t);
+
+      const criticallyDampedVelocity =
+        criticallyDampedEnvelope *
+        (v0 * (t * omega0 - 1) + t * x0 * omega0 * omega0);
+
+      const isOvershooting = () => {
+        if (config.overshootClamping && config.stiffness !== 0) {
+          return current < toValue
+            ? animation.current > toValue
+            : animation.current < toValue;
+        } else {
+          return false;
+        }
+      };
+
+      const isVelocity = Math.abs(velocity) < config.restSpeedThreshold;
+      const isDisplacement =
+        config.stiffness === 0 ||
+        Math.abs(toValue - current) < config.restDisplacementThreshold;
+
+      if (zeta < 1) {
+        animation.current = underDampedPosition;
+        animation.velocity = underDampedVelocity;
+      } else {
+        animation.current = criticallyDampedPosition;
+        animation.velocity = criticallyDampedVelocity;
+      }
+
+      if (isOvershooting() || (isVelocity && isDisplacement)) {
+        if (config.stiffness !== 0) {
+          animation.velocity = 0;
+          animation.current = toValue;
+        }
+        return true;
+      }
+      return false;
+    }
+
+    function onStart(
+      animation: SpringAnimation,
+      value: number,
+      now: Timestamp,
+      previousAnimation: SpringAnimation
+    ): void {
+      animation.current = value;
+      if (previousAnimation) {
+        animation.velocity =
+          previousAnimation.velocity || animation.velocity || 0;
+        animation.lastTimestamp = previousAnimation.lastTimestamp || now;
+      } else {
+        animation.lastTimestamp = now;
+      }
+    }
+
+    return {
+      onFrame: spring,
+      onStart,
+      toValue,
+      velocity: config.velocity || 0,
+      current: toValue,
+      callback,
+      lastTimestamp: 0,
+    } as SpringAnimation;
+  });
+}