react-native-reanimated 2.3.0-alpha.3 → 2.3.0-beta.4

package/src/reanimated2/layoutReanimation/defaultAnimations/Zoom.ts

@@ -1,23 +1,23 @@
 import {
   IEntryExitAnimationBuilder,
-  EntryExitAnimationBuild,
+  EntryExitAnimationFunction,
 } from '../animationBuilder/commonTypes';
-import { BaseAnimationBuilder } from '../animationBuilder/BaseAnimationBuilder';
 import { Dimensions } from 'react-native';
+import { ComplexAnimationBuilder } from '../animationBuilder';
 
 const { width, height } = Dimensions.get('window');
 
 export class ZoomIn
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomIn {
     return new ZoomIn();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -36,16 +36,16 @@ export class ZoomIn
 }
 
 export class ZoomInRotate
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomInRotate {
     return new ZoomInRotate();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const rotate = this.rotateV ? this.rotateV : '0.3';
     const callback = this.callbackV;
 
@@ -68,16 +68,16 @@ export class ZoomInRotate
 }
 
 export class ZoomInLeft
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomInLeft {
     return new ZoomInLeft();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -99,16 +99,16 @@ export class ZoomInLeft
 }
 
 export class ZoomInRight
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomInRight {
     return new ZoomInRight();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -130,16 +130,16 @@ export class ZoomInRight
 }
 
 export class ZoomInUp
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomInUp {
     return new ZoomInUp();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -161,16 +161,16 @@ export class ZoomInUp
 }
 
 export class ZoomInDown
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomInDown {
     return new ZoomInDown();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -192,16 +192,16 @@ export class ZoomInDown
 }
 
 export class ZoomInEasyUp
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomInEasyUp {
     return new ZoomInEasyUp();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (values) => {
@@ -223,16 +223,16 @@ export class ZoomInEasyUp
 }
 
 export class ZoomInEasyDown
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomInEasyDown {
     return new ZoomInEasyDown();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (values) => {
@@ -254,16 +254,16 @@ export class ZoomInEasyDown
 }
 
 export class ZoomOut
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomOut {
     return new ZoomOut();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -282,16 +282,16 @@ export class ZoomOut
 }
 
 export class ZoomOutRotate
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomOutRotate {
     return new ZoomOutRotate();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const rotate = this.rotateV ? this.rotateV : '0.3';
     const callback = this.callbackV;
 
@@ -314,16 +314,16 @@ export class ZoomOutRotate
 }
 
 export class ZoomOutLeft
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomOutLeft {
     return new ZoomOutLeft();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -345,16 +345,16 @@ export class ZoomOutLeft
 }
 
 export class ZoomOutRight
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomOutRight {
     return new ZoomOutRight();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -376,16 +376,16 @@ export class ZoomOutRight
 }
 
 export class ZoomOutUp
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomOutUp {
     return new ZoomOutUp();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -407,16 +407,16 @@ export class ZoomOutUp
 }
 
 export class ZoomOutDown
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomOutDown {
     return new ZoomOutDown();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -438,16 +438,16 @@ export class ZoomOutDown
 }
 
 export class ZoomOutEasyUp
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomOutEasyUp {
     return new ZoomOutEasyUp();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (values) => {
@@ -474,16 +474,16 @@ export class ZoomOutEasyUp
 }
 
 export class ZoomOutEasyDown
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): ZoomOutEasyDown {
     return new ZoomOutEasyDown();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (values) => {

package/src/reanimated2/layoutReanimation/defaultTransitions/CurvedTransition.ts

@@ -0,0 +1,104 @@
+import {
+  ILayoutAnimationBuilder,
+  LayoutAnimationFunction,
+} from '../animationBuilder/commonTypes';
+import { BaseAnimationBuilder } from '../animationBuilder';
+import { EasingFn, Easing } from '../../Easing';
+import { withTiming } from '../../animation';
+
+export class CurvedTransition
+  extends BaseAnimationBuilder
+  implements ILayoutAnimationBuilder {
+  easingXV: EasingFn = Easing.in(Easing.ease);
+  easingYV: EasingFn = Easing.out(Easing.ease);
+  easingWidthV: EasingFn = Easing.in(Easing.exp);
+  easingHeightV: EasingFn = Easing.out(Easing.exp);
+  static createInstance(): CurvedTransition {
+    return new CurvedTransition();
+  }
+
+  static easingX(easing: EasingFn): CurvedTransition {
+    const instance = this.createInstance();
+    return instance.easingX(easing);
+  }
+
+  easingX(easing: EasingFn): CurvedTransition {
+    this.easingXV = easing;
+    return this;
+  }
+
+  static easingY(easing: EasingFn): CurvedTransition {
+    const instance = this.createInstance();
+    return instance.easingY(easing);
+  }
+
+  easingY(easing: EasingFn): CurvedTransition {
+    this.easingYV = easing;
+    return this;
+  }
+
+  static easingWidth(easing: EasingFn): CurvedTransition {
+    const instance = this.createInstance();
+    return instance.easingWidth(easing);
+  }
+
+  easingWidth(easing: EasingFn): CurvedTransition {
+    this.easingWidthV = easing;
+    return this;
+  }
+
+  static easingHeight(easing: EasingFn): CurvedTransition {
+    const instance = this.createInstance();
+    return instance.easingHeight(easing);
+  }
+
+  easingHeight(easing: EasingFn): CurvedTransition {
+    this.easingHeightV = easing;
+    return this;
+  }
+
+  build = (): LayoutAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const callback = this.callbackV;
+    const delay = this.getDelay();
+    const duration = this.durationV ?? 300;
+    const easing = {
+      easingX: this.easingXV,
+      easingY: this.easingYV,
+      easingWidth: this.easingWidthV,
+      easingHeight: this.easingHeightV,
+    };
+
+    return (values) => {
+      'worklet';
+
+      return {
+        initialValues: {
+          originX: values.boriginX,
+          originY: values.boriginY,
+          width: values.bwidth,
+          height: values.bheight,
+        },
+        animations: {
+          originX: delayFunction(
+            delay,
+            withTiming(values.originX, { duration, easing: easing.easingX })
+          ),
+          originY: delayFunction(
+            delay,
+            withTiming(values.originY, { duration, easing: easing.easingY })
+          ),
+          width: delayFunction(
+            delay,
+            withTiming(values.width, { duration, easing: easing.easingWidth })
+          ),
+          height: delayFunction(
+            delay,
+            withTiming(values.height, { duration, easing: easing.easingHeight })
+          ),
+        },
+        callback: callback,
+      };
+    };
+  };
+}

package/src/reanimated2/layoutReanimation/defaultTransitions/EntryExitTransition.ts

@@ -0,0 +1,213 @@
+import {
+  ILayoutAnimationBuilder,
+  LayoutAnimationsValues,
+  LayoutAnimationFunction,
+} from '../animationBuilder/commonTypes';
+import { BaseAnimationBuilder } from '../animationBuilder';
+import { AnimationObject, withSequence, withTiming } from '../../animation';
+import { FadeIn, FadeOut } from '../defaultAnimations/Fade';
+import { StyleProps, TransformProperty } from '../../commonTypes';
+
+export class EntryExitTransition
+  extends BaseAnimationBuilder
+  implements ILayoutAnimationBuilder {
+  enteringV: BaseAnimationBuilder | typeof BaseAnimationBuilder = FadeIn;
+
+  exitingV: BaseAnimationBuilder | typeof BaseAnimationBuilder = FadeOut;
+
+  static createInstance(): EntryExitTransition {
+    return new EntryExitTransition();
+  }
+
+  static entering(
+    animation: BaseAnimationBuilder | typeof BaseAnimationBuilder
+  ): EntryExitTransition {
+    const instance = this.createInstance();
+    return instance.entering(animation);
+  }
+
+  entering(
+    animation: BaseAnimationBuilder | typeof BaseAnimationBuilder
+  ): EntryExitTransition {
+    this.enteringV = animation;
+    return this;
+  }
+
+  static exiting(
+    animation: BaseAnimationBuilder | typeof BaseAnimationBuilder
+  ): EntryExitTransition {
+    const instance = this.createInstance();
+    return instance.exiting(animation);
+  }
+
+  exiting(
+    animation: BaseAnimationBuilder | typeof BaseAnimationBuilder
+  ): EntryExitTransition {
+    this.exitingV = animation;
+    return this;
+  }
+
+  build = (): LayoutAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const callback = this.callbackV;
+    const delay = this.getDelay();
+    const enteringAnimation = this.enteringV.build();
+    const exitingAnimation = this.exitingV.build();
+    const exitingDuration = this.exitingV.getDuration();
+
+    return (values) => {
+      'worklet';
+      const enteringValues = enteringAnimation(values);
+      const exitingValues = exitingAnimation(values);
+      const animations: StyleProps = {
+        transform: [],
+      };
+
+      for (const prop of Object.keys(exitingValues.animations)) {
+        if (prop === 'transform') {
+          exitingValues.animations[prop]?.forEach((value, index) => {
+            for (const transformProp of Object.keys(value)) {
+              animations.transform?.push({
+                [transformProp]: delayFunction(
+                  delay,
+                  withSequence(
+                    value[transformProp as keyof TransformProperty],
+                    withTiming(
+                      exitingValues.initialValues.transform
+                        ? exitingValues.initialValues.transform[index][
+                            transformProp as keyof TransformProperty
+                          ]
+                        : 0,
+                      { duration: 0 }
+                    )
+                  )
+                ),
+              } as TransformProperty);
+            }
+          });
+        } else {
+          const sequence =
+            enteringValues.animations[prop] !== undefined
+              ? [
+                  exitingValues.animations[prop],
+                  withTiming(enteringValues.initialValues[prop], {
+                    duration: 0,
+                  }),
+                  enteringValues.animations[prop],
+                ]
+              : [
+                  exitingValues.animations[prop],
+                  withTiming(
+                    Object.keys(values).includes(prop)
+                      ? values[prop as keyof LayoutAnimationsValues]
+                      : exitingValues.initialValues[prop],
+                    { duration: 0 }
+                  ),
+                ];
+
+          animations[prop] = delayFunction(delay, withSequence(...sequence));
+        }
+      }
+      for (const prop of Object.keys(enteringValues.animations)) {
+        if (prop === 'transform') {
+          enteringValues.animations[prop]?.forEach((value, index) => {
+            for (const transformProp of Object.keys(value)) {
+              animations.transform?.push({
+                [transformProp]: delayFunction(
+                  delay + exitingDuration,
+                  withSequence(
+                    withTiming(
+                      enteringValues.initialValues.transform
+                        ? enteringValues.initialValues.transform[index][
+                            transformProp as keyof TransformProperty
+                          ]
+                        : 0,
+                      { duration: exitingDuration }
+                    ),
+                    value[transformProp as keyof TransformProperty]
+                  )
+                ),
+              } as TransformProperty);
+            }
+          });
+        } else if (animations[prop] !== undefined) {
+          // it was already added in the previous loop
+          continue;
+        } else {
+          animations[prop] = delayFunction(
+            delay,
+            withSequence(
+              withTiming(enteringValues.initialValues[prop], { duration: 0 }),
+              enteringValues.animations[prop]
+            )
+          );
+        }
+      }
+
+      const mergedTransform = (
+        exitingValues.initialValues.transform ?? []
+      ).concat(
+        (enteringValues.animations.transform ?? []).map((value) => {
+          for (const transformProp of Object.keys(value)) {
+            const current = (value[
+              transformProp as keyof TransformProperty
+            ] as AnimationObject).current;
+            if (typeof current === 'string') {
+              if (current.includes('deg'))
+                return ({
+                  [transformProp]: '0deg',
+                } as unknown) as TransformProperty;
+              else
+                return ({
+                  [transformProp]: '0',
+                } as unknown) as TransformProperty;
+            } else if (transformProp.includes('translate')) {
+              return ({ [transformProp]: 0 } as unknown) as TransformProperty;
+            } else {
+              return ({ [transformProp]: 1 } as unknown) as TransformProperty;
+            }
+          }
+          return value;
+        })
+      );
+
+      return {
+        initialValues: {
+          ...exitingValues.initialValues,
+          originX: values.boriginX,
+          originY: values.boriginY,
+          width: values.bwidth,
+          height: values.bheight,
+          transform: mergedTransform,
+        },
+        animations: {
+          originX: delayFunction(
+            delay + exitingDuration,
+            withTiming(values.originX, { duration: exitingDuration })
+          ),
+          originY: delayFunction(
+            delay + exitingDuration,
+            withTiming(values.originY, { duration: exitingDuration })
+          ),
+          width: delayFunction(
+            delay + exitingDuration,
+            withTiming(values.width, { duration: exitingDuration })
+          ),
+          height: delayFunction(
+            delay + exitingDuration,
+            withTiming(values.height, { duration: exitingDuration })
+          ),
+          ...animations,
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export function combineTransition(
+  exiting: BaseAnimationBuilder | typeof BaseAnimationBuilder,
+  entering: BaseAnimationBuilder | typeof BaseAnimationBuilder
+): EntryExitTransition {
+  return EntryExitTransition.entering(entering).exiting(exiting);
+}

package/src/reanimated2/layoutReanimation/defaultTransitions/FadingTransition.ts

@@ -0,0 +1,60 @@
+import { withSequence, withTiming } from '../../animation';
+import {
+  ILayoutAnimationBuilder,
+  LayoutAnimationFunction,
+} from '../animationBuilder/commonTypes';
+import { BaseAnimationBuilder } from '../animationBuilder';
+
+export class FadingTransition
+  extends BaseAnimationBuilder
+  implements ILayoutAnimationBuilder {
+  static createInstance(): FadingTransition {
+    return new FadingTransition();
+  }
+
+  build = (): LayoutAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const callback = this.callbackV;
+    const delay = this.getDelay();
+    const duration = this.durationV ?? 500;
+
+    return (values) => {
+      'worklet';
+      return {
+        initialValues: {
+          opacity: 1,
+          originX: values.boriginX,
+          originY: values.boriginY,
+          width: values.bwidth,
+          height: values.bheight,
+        },
+        animations: {
+          opacity: delayFunction(
+            delay,
+            withSequence(
+              withTiming(0, { duration: duration }),
+              withTiming(1, { duration: duration })
+            )
+          ),
+          originX: delayFunction(
+            delay + duration,
+            withTiming(values.originX, { duration: 50 })
+          ),
+          originY: delayFunction(
+            delay + duration,
+            withTiming(values.originY, { duration: 50 })
+          ),
+          width: delayFunction(
+            delay + duration,
+            withTiming(values.width, { duration: 50 })
+          ),
+          height: delayFunction(
+            delay + duration,
+            withTiming(values.height, { duration: 50 })
+          ),
+        },
+        callback: callback,
+      };
+    };
+  };
+}