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

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

@@ -0,0 +1,333 @@
+import { ComplexAnimationBuilder } from '../animationBuilder';
+import {
+  EntryExitAnimationFunction,
+  IEntryExitAnimationBuilder,
+} from '../animationBuilder/commonTypes';
+
+export class RotateInDownLeft
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): RotateInDownLeft {
+    return new RotateInDownLeft();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return (values) => {
+      'worklet';
+      return {
+        animations: {
+          opacity: delayFunction(delay, animation(1, config)),
+          transform: [
+            { rotate: delayFunction(delay, animation('0deg', config)) },
+            { translateX: delayFunction(delay, animation(0, config)) },
+            { translateY: delayFunction(delay, animation(0, config)) },
+          ],
+        },
+        initialValues: {
+          opacity: 0,
+          transform: [
+            { rotate: '-90deg' },
+            { translateX: values.width / 2 - values.height / 2 },
+            { translateY: -(values.width / 2 - values.height / 2) },
+          ],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class RotateInDownRight
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): RotateInDownRight {
+    return new RotateInDownRight();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return (values) => {
+      'worklet';
+      return {
+        animations: {
+          opacity: delayFunction(delay, animation(1, config)),
+          transform: [
+            { rotate: delayFunction(delay, animation('0deg', config)) },
+            { translateX: delayFunction(delay, animation(0, config)) },
+            { translateY: delayFunction(delay, animation(0, config)) },
+          ],
+        },
+        initialValues: {
+          opacity: 0,
+          transform: [
+            { rotate: '90deg' },
+            { translateX: -(values.width / 2 - values.height / 2) },
+            { translateY: -(values.width / 2 - values.height / 2) },
+          ],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class RotateInUpLeft
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): RotateInUpLeft {
+    return new RotateInUpLeft();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return (values) => {
+      'worklet';
+      return {
+        animations: {
+          opacity: delayFunction(delay, animation(1, config)),
+          transform: [
+            { rotate: delayFunction(delay, animation('0deg', config)) },
+            { translateX: delayFunction(delay, animation(0, config)) },
+            { translateY: delayFunction(delay, animation(0, config)) },
+          ],
+        },
+        initialValues: {
+          opacity: 0,
+          transform: [
+            { rotate: '90deg' },
+            { translateX: values.width / 2 - values.height / 2 },
+            { translateY: values.width / 2 - values.height / 2 },
+          ],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class RotateInUpRight
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): RotateInUpRight {
+    return new RotateInUpRight();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return (values) => {
+      'worklet';
+      return {
+        animations: {
+          opacity: delayFunction(delay, animation(1, config)),
+          transform: [
+            { rotate: delayFunction(delay, animation('0deg', config)) },
+            { translateX: delayFunction(delay, animation(0, config)) },
+            { translateY: delayFunction(delay, animation(0, config)) },
+          ],
+        },
+        initialValues: {
+          opacity: 0,
+          transform: [
+            { rotate: '-90deg' },
+            { translateX: -(values.width / 2 - values.height / 2) },
+            { translateY: values.width / 2 - values.height / 2 },
+          ],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class RotateOutDownLeft
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): RotateOutDownLeft {
+    return new RotateOutDownLeft();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return (values) => {
+      'worklet';
+      return {
+        animations: {
+          opacity: delayFunction(delay, animation(0, config)),
+          transform: [
+            { rotate: delayFunction(delay, animation('90deg', config)) },
+            {
+              translateX: delayFunction(
+                delay,
+                animation(values.width / 2 - values.height / 2, config)
+              ),
+            },
+            {
+              translateY: delayFunction(
+                delay,
+                animation(values.width / 2 - values.height / 2, config)
+              ),
+            },
+          ],
+        },
+        initialValues: {
+          opacity: 1,
+          transform: [{ rotate: '0deg' }, { translateX: 0 }, { translateY: 0 }],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class RotateOutDownRight
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): RotateOutDownRight {
+    return new RotateOutDownRight();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return (values) => {
+      'worklet';
+      return {
+        animations: {
+          opacity: delayFunction(delay, animation(0, config)),
+          transform: [
+            { rotate: delayFunction(delay, animation('-90deg', config)) },
+            {
+              translateX: delayFunction(
+                delay,
+                animation(-(values.width / 2 - values.height / 2), config)
+              ),
+            },
+            {
+              translateY: delayFunction(
+                delay,
+                animation(values.width / 2 - values.height / 2, config)
+              ),
+            },
+          ],
+        },
+        initialValues: {
+          opacity: 1,
+          transform: [{ rotate: '0deg' }, { translateX: 0 }, { translateY: 0 }],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class RotateOutUpLeft
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): RotateOutUpLeft {
+    return new RotateOutUpLeft();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return (values) => {
+      'worklet';
+      return {
+        animations: {
+          opacity: delayFunction(delay, animation(0, config)),
+          transform: [
+            { rotate: delayFunction(delay, animation('-90deg', config)) },
+            {
+              translateX: delayFunction(
+                delay,
+                animation(values.width / 2 - values.height / 2, config)
+              ),
+            },
+            {
+              translateY: delayFunction(
+                delay,
+                animation(-(values.width / 2 - values.height / 2), config)
+              ),
+            },
+          ],
+        },
+        initialValues: {
+          opacity: 1,
+          transform: [{ rotate: '0deg' }, { translateX: 0 }, { translateY: 0 }],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class RotateOutUpRight
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): RotateOutUpRight {
+    return new RotateOutUpRight();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return (values) => {
+      'worklet';
+      return {
+        animations: {
+          opacity: delayFunction(delay, animation(0, config)),
+          transform: [
+            { rotate: delayFunction(delay, animation('90deg', config)) },
+            {
+              translateX: delayFunction(
+                delay,
+                animation(-(values.width / 2 - values.height / 2), config)
+              ),
+            },
+            {
+              translateY: delayFunction(
+                delay,
+                animation(-(values.width / 2 - values.height / 2), config)
+              ),
+            },
+          ],
+        },
+        initialValues: {
+          opacity: 1,
+          transform: [{ rotate: '0deg' }, { translateX: 0 }, { translateY: 0 }],
+        },
+        callback: callback,
+      };
+    };
+  };
+}

package/src/reanimated2/layoutReanimation/defaultAnimations/Slide.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 SlideInRight extends BaseAnimationBuilder {
-  static createInstance() {
+export class SlideInRight
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): SlideInRight {
     return new SlideInRight();
   }
 
-  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';
@@ -24,20 +29,24 @@ export class SlideInRight extends BaseAnimationBuilder {
         initialValues: {
           originX: values.originX + width,
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class SlideInLeft extends BaseAnimationBuilder {
-  static createInstance() {
+export class SlideInLeft
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): SlideInLeft {
     return new SlideInLeft();
   }
 
-  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';
@@ -48,20 +57,24 @@ export class SlideInLeft extends BaseAnimationBuilder {
         initialValues: {
           originX: values.originX - width,
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class SlideOutRight extends BaseAnimationBuilder {
-  static createInstance() {
+export class SlideOutRight
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): SlideOutRight {
     return new SlideOutRight();
   }
 
-  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';
@@ -69,26 +82,30 @@ export class SlideOutRight extends BaseAnimationBuilder {
         animations: {
           originX: delayFunction(
             delay,
-            animation(values.originX + width, config)
+            animation(Math.max(values.originX + width, width), config)
           ),
         },
         initialValues: {
           originX: values.originX,
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class SlideOutLeft extends BaseAnimationBuilder {
-  static createInstance() {
+export class SlideOutLeft
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): SlideOutLeft {
     return new SlideOutLeft();
   }
 
-  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';
@@ -96,26 +113,30 @@ export class SlideOutLeft extends BaseAnimationBuilder {
         animations: {
           originX: delayFunction(
             delay,
-            animation(values.originX - width, config)
+            animation(Math.min(values.originX - width, -width), config)
           ),
         },
         initialValues: {
           originX: values.originX,
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class SlideInUp extends BaseAnimationBuilder {
-  static createInstance() {
+export class SlideInUp
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): SlideInUp {
     return new SlideInUp();
   }
 
-  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';
@@ -126,20 +147,24 @@ export class SlideInUp extends BaseAnimationBuilder {
         initialValues: {
           originY: height,
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class SlideInDown extends BaseAnimationBuilder {
-  static createInstance() {
+export class SlideInDown
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): SlideInDown {
     return new SlideInDown();
   }
 
-  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';
@@ -148,22 +173,26 @@ export class SlideInDown extends BaseAnimationBuilder {
           originY: delayFunction(delay, animation(values.originY, config)),
         },
         initialValues: {
-          originY: values.originY - height,
+          originY: values.originY + height,
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class SlideOutUp extends BaseAnimationBuilder {
-  static createInstance() {
+export class SlideOutUp
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): SlideOutUp {
     return new SlideOutUp();
   }
 
-  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';
@@ -171,24 +200,28 @@ export class SlideOutUp extends BaseAnimationBuilder {
         animations: {
           originY: delayFunction(
             delay,
-            animation(values.originY - height, config)
+            animation(Math.min(values.originY - height, -height), config)
           ),
         },
-        initialValues: {},
+        initialValues: { originY: values.originY },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class SlideOutDown extends BaseAnimationBuilder {
-  static createInstance() {
+export class SlideOutDown
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): SlideOutDown {
     return new SlideOutDown();
   }
 
-  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';
@@ -196,11 +229,12 @@ export class SlideOutDown extends BaseAnimationBuilder {
         animations: {
           originY: delayFunction(
             delay,
-            animation(values.originY + height, config)
+            animation(Math.max(values.originY + height, height), config)
           ),
         },
-        initialValues: {},
+        initialValues: { originY: values.originY },
+        callback: callback,
       };
     };
-  }
+  };
 }