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

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

@@ -1,19 +1,24 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import { BaseAnimationBuilder } from '../defaultAnimationsBuilder';
+import {
+  IEntryExitAnimationBuilder,
+  EntryExitAnimationFunction,
+} from '../animationBuilder/commonTypes';
 import { Dimensions } from 'react-native';
+import { ComplexAnimationBuilder } from '../animationBuilder';
 
 const { width, height } = Dimensions.get('window');
 
-export class ZoomIn extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomIn
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomIn {
     return new ZoomIn();
   }
 
-  build() {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
+    const callback = this.callbackV;
 
     return () => {
       'worklet';
@@ -24,21 +29,25 @@ export class ZoomIn extends BaseAnimationBuilder {
         initialValues: {
           transform: [{ scale: 0 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomInRotate extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomInRotate
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomInRotate {
     return new ZoomInRotate();
   }
 
-  build() {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
-    const rotate = this.rotateV ? this.rotateV : 0.3;
+    const delay = this.getDelay();
+    const rotate = this.rotateV ? this.rotateV : '0.3';
+    const callback = this.callbackV;
 
     return () => {
       'worklet';
@@ -52,174 +61,210 @@ export class ZoomInRotate extends BaseAnimationBuilder {
         initialValues: {
           transform: [{ scale: 0 }, { rotate: rotate }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomInLeft extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomInLeft
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomInLeft {
     return new ZoomInLeft();
   }
 
-  build() {
+  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) => {
+    return () => {
       'worklet';
       return {
         animations: {
-          transform: [{ scale: delayFunction(delay, animation(1, config)) }],
-          originX: delayFunction(delay, animation(values.originX, config)),
+          transform: [
+            { translateX: delayFunction(delay, animation(0, config)) },
+            { scale: delayFunction(delay, animation(1, config)) },
+          ],
         },
         initialValues: {
-          transform: [{ scale: 0 }],
-          originX: values.originX - width,
+          transform: [{ translateX: -width }, { scale: 0 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomInRight extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomInRight
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomInRight {
     return new ZoomInRight();
   }
 
-  build() {
+  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) => {
+    return () => {
       'worklet';
       return {
         animations: {
-          transform: [{ scale: delayFunction(delay, animation(1, config)) }],
-          originX: delayFunction(delay, animation(values.originX, config)),
+          transform: [
+            { translateX: delayFunction(delay, animation(0, config)) },
+            { scale: delayFunction(delay, animation(1, config)) },
+          ],
         },
         initialValues: {
-          transform: [{ scale: 0 }],
-          originX: values.originX + width,
+          transform: [{ translateX: width }, { scale: 0 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomInUp extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomInUp
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomInUp {
     return new ZoomInUp();
   }
 
-  build() {
+  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) => {
+    return () => {
       'worklet';
       return {
         animations: {
-          transform: [{ scale: delayFunction(delay, animation(1, config)) }],
-          originY: delayFunction(delay, animation(0, config)),
+          transform: [
+            { translateY: delayFunction(delay, animation(0, config)) },
+            { scale: delayFunction(delay, animation(1, config)) },
+          ],
         },
         initialValues: {
-          transform: [{ scale: 0 }],
-          originY: values.originY - height,
+          transform: [{ translateY: -height }, { scale: 0 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomInDown extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomInDown
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomInDown {
     return new ZoomInDown();
   }
 
-  build() {
+  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) => {
+    return () => {
       'worklet';
       return {
         animations: {
-          transform: [{ scale: delayFunction(delay, animation(1, config)) }],
-          originY: delayFunction(delay, animation(0, config)),
+          transform: [
+            { translateY: delayFunction(delay, animation(0, config)) },
+            { scale: delayFunction(delay, animation(1, config)) },
+          ],
         },
         initialValues: {
-          transform: [{ scale: 0 }],
-          originY: values.originY + height,
+          transform: [{ translateY: height }, { scale: 0 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomInEasyUp extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomInEasyUp
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomInEasyUp {
     return new ZoomInEasyUp();
   }
 
-  build() {
+  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) => {
       'worklet';
       return {
         animations: {
-          transform: [{ scale: delayFunction(delay, animation(1, config)) }],
-          originY: delayFunction(delay, animation(0, config)),
+          transform: [
+            { translateY: delayFunction(delay, animation(0, config)) },
+            { scale: delayFunction(delay, animation(1, config)) },
+          ],
         },
         initialValues: {
-          transform: [{ scale: 0 }],
-          originY: -values.height,
+          transform: [{ translateY: -values.height }, { scale: 0 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomInEasyDown extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomInEasyDown
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomInEasyDown {
     return new ZoomInEasyDown();
   }
 
-  build() {
+  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) => {
       'worklet';
       return {
         animations: {
-          transform: [{ scale: delayFunction(delay, animation(1, config)) }],
-          originY: delayFunction(delay, animation(0, config)),
+          transform: [
+            { translateY: delayFunction(delay, animation(0, config)) },
+            { scale: delayFunction(delay, animation(1, config)) },
+          ],
         },
         initialValues: {
-          transform: [{ scale: 0 }],
-          originY: values.height,
+          transform: [{ translateY: values.height }, { scale: 0 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomOut extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomOut
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomOut {
     return new ZoomOut();
   }
 
-  build() {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
+    const callback = this.callbackV;
 
     return () => {
       'worklet';
@@ -230,21 +275,25 @@ export class ZoomOut extends BaseAnimationBuilder {
         initialValues: {
           transform: [{ scale: 1 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomOutRotate extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomOutRotate
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomOutRotate {
     return new ZoomOutRotate();
   }
 
-  build() {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
-    const rotate = this.rotateV ? this.rotateV : 0.3;
+    const delay = this.getDelay();
+    const rotate = this.rotateV ? this.rotateV : '0.3';
+    const callback = this.callbackV;
 
     return () => {
       'worklet';
@@ -256,175 +305,206 @@ export class ZoomOutRotate extends BaseAnimationBuilder {
           ],
         },
         initialValues: {
-          transform: [{ scale: 1 }, { rotate: 0 }],
+          transform: [{ scale: 1 }, { rotate: '0' }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomOutLeft extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomOutLeft
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomOutLeft {
     return new ZoomOutLeft();
   }
 
-  build() {
+  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) => {
+    return () => {
       'worklet';
       return {
         animations: {
-          transform: [{ scale: delayFunction(delay, animation(0, config)) }],
-          originX: delayFunction(
-            delay,
-            animation(values.originX - width, config)
-          ),
+          transform: [
+            { translateX: delayFunction(delay, animation(-width, config)) },
+            { scale: delayFunction(delay, animation(0, config)) },
+          ],
         },
         initialValues: {
-          transform: [{ scale: 1 }],
-          originX: values.originX,
+          transform: [{ translateX: 0 }, { scale: 1 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomOutRight extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomOutRight
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomOutRight {
     return new ZoomOutRight();
   }
 
-  build() {
+  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) => {
+    return () => {
       'worklet';
       return {
         animations: {
-          transform: [{ scale: delayFunction(delay, animation(0, config)) }],
-          originX: delayFunction(
-            delay,
-            animation(values.originX + width, config)
-          ),
+          transform: [
+            { translateX: delayFunction(delay, animation(width, config)) },
+            { scale: delayFunction(delay, animation(0, config)) },
+          ],
         },
         initialValues: {
-          transform: [{ scale: 1 }],
-          originX: values.originX,
+          transform: [{ translateX: 0 }, { scale: 1 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomOutUp extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomOutUp
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomOutUp {
     return new ZoomOutUp();
   }
 
-  build() {
+  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) => {
+    return () => {
       'worklet';
       return {
         animations: {
-          transform: [{ scale: delayFunction(delay, animation(0, config)) }],
-          originY: delayFunction(
-            delay,
-            animation(values.originY - height, config)
-          ),
+          transform: [
+            { translateY: delayFunction(delay, animation(-height, config)) },
+            { scale: delayFunction(delay, animation(0, config)) },
+          ],
         },
         initialValues: {
-          transform: [{ scale: 1 }],
-          originY: 0,
+          transform: [{ translateY: 0 }, { scale: 1 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomOutDown extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomOutDown
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomOutDown {
     return new ZoomOutDown();
   }
 
-  build() {
+  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) => {
+    return () => {
       'worklet';
       return {
         animations: {
-          transform: [{ scale: delayFunction(delay, animation(0, config)) }],
-          originY: delayFunction(
-            delay,
-            animation(values.originY + height, config)
-          ),
+          transform: [
+            { translateY: delayFunction(delay, animation(height, config)) },
+            { scale: delayFunction(delay, animation(0, config)) },
+          ],
         },
         initialValues: {
-          transform: [{ scale: 1 }],
-          originY: 0,
+          transform: [{ translateY: 0 }, { scale: 1 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomOutEasyUp extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomOutEasyUp
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomOutEasyUp {
     return new ZoomOutEasyUp();
   }
 
-  build() {
+  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) => {
       'worklet';
       return {
         animations: {
-          transform: [{ scale: delayFunction(delay, animation(0, config)) }],
-          originY: delayFunction(delay, animation(-values.height, config)),
+          transform: [
+            {
+              translateY: delayFunction(
+                delay,
+                animation(-values.height, config)
+              ),
+            },
+            { scale: delayFunction(delay, animation(0, config)) },
+          ],
         },
         initialValues: {
-          transform: [{ scale: 1 }],
-          originY: 0,
+          transform: [{ translateY: 0 }, { scale: 1 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class ZoomOutEasyDown extends BaseAnimationBuilder {
-  static createInstance() {
+export class ZoomOutEasyDown
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): ZoomOutEasyDown {
     return new ZoomOutEasyDown();
   }
 
-  build() {
+  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) => {
       'worklet';
       return {
         animations: {
-          transform: [{ scale: delayFunction(delay, animation(0, config)) }],
-          originY: delayFunction(delay, animation(values.height, config)),
+          transform: [
+            {
+              translateY: delayFunction(
+                delay,
+                animation(values.height, config)
+              ),
+            },
+            { scale: delayFunction(delay, animation(0, config)) },
+          ],
         },
         initialValues: {
-          transform: [{ scale: 1 }],
-          originY: 0,
+          transform: [{ translateY: 0 }, { scale: 1 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }

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

@@ -4,3 +4,7 @@ export * from './Fade';
 export * from './Slide';
 export * from './Zoom';
 export * from './Bounce';
+export * from './Lightspeed';
+export * from './Pinwheel';
+export * from './Rotate';
+export * from './Roll';