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

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

@@ -1,20 +1,33 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import { BaseBounceAnimationBuilder } from '../defaultAnimationsBuilder';
-import { withSequence, withTiming } from '../../animations';
+import {
+  EntryExitAnimationFunction,
+  IEntryExitAnimationBuilder,
+} from '../animationBuilder/commonTypes';
+import { withSequence, withTiming } from '../../animation';
 import { Dimensions } from 'react-native';
+import { BaseAnimationBuilder } from '../animationBuilder/BaseAnimationBuilder';
 
 const { width, height } = Dimensions.get('window');
 
-export class BounceIn extends BaseBounceAnimationBuilder {
-  static createInstance() {
+export class BounceIn
+  extends BaseAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): BounceIn {
     return new BounceIn();
   }
 
-  build() {
+  static getDuration(): number {
+    return 600;
+  }
+
+  getDuration(): number {
+    return this.durationV ?? 600;
+  }
+
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
-    const delay = this.delayV;
-    const duration = this.durationV ? this.durationV : 250;
+    const delay = this.getDelay();
+    const duration = this.getDuration();
+    const callback = this.callbackV;
 
     return () => {
       'worklet';
@@ -25,10 +38,10 @@ export class BounceIn extends BaseBounceAnimationBuilder {
               scale: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(1.2, { duration: duration }),
-                  withTiming(0.9, { duration: (duration * 100) / 250 }),
-                  withTiming(1.1, { duration: (duration * 100) / 250 }),
-                  withTiming(1, { duration: (duration * 100) / 250 })
+                  withTiming(1.2, { duration: duration * 0.55 }),
+                  withTiming(0.9, { duration: duration * 0.15 }),
+                  withTiming(1.1, { duration: duration * 0.15 }),
+                  withTiming(1, { duration: duration * 0.15 })
                 )
               ),
             },
@@ -37,22 +50,34 @@ export class BounceIn extends BaseBounceAnimationBuilder {
         initialValues: {
           transform: [{ scale: 0 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class BounceInDown extends BaseBounceAnimationBuilder {
-  static createInstance() {
+export class BounceInDown
+  extends BaseAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): BounceInDown {
     return new BounceInDown();
   }
 
-  build() {
+  static getDuration(): number {
+    return 600;
+  }
+
+  getDuration(): number {
+    return this.durationV ?? 600;
+  }
+
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
-    const delay = this.delayV;
-    const duration = this.durationV ? this.durationV : 250;
+    const delay = this.getDelay();
+    const duration = this.getDuration();
+    const callback = this.callbackV;
 
-    return (targetValues) => {
+    return () => {
       'worklet';
       return {
         animations: {
@@ -61,10 +86,10 @@ export class BounceInDown extends BaseBounceAnimationBuilder {
               translateY: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(-20, { duration: duration }),
-                  withTiming(10, { duration: (duration * 100) / 250 }),
-                  withTiming(-10, { duration: (duration * 100) / 250 }),
-                  withTiming(5, { duration: (duration * 100) / 250 })
+                  withTiming(-20, { duration: duration * 0.55 }),
+                  withTiming(10, { duration: duration * 0.15 }),
+                  withTiming(-10, { duration: duration * 0.15 }),
+                  withTiming(0, { duration: duration * 0.15 })
                 )
               ),
             },
@@ -73,26 +98,38 @@ export class BounceInDown extends BaseBounceAnimationBuilder {
         initialValues: {
           transform: [
             {
-              translateY: targetValues.originY + height,
+              translateY: height,
             },
           ],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class BounceInUp extends BaseBounceAnimationBuilder {
-  static createInstance() {
+export class BounceInUp
+  extends BaseAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): BounceInUp {
     return new BounceInUp();
   }
 
-  build() {
+  static getDuration(): number {
+    return 600;
+  }
+
+  getDuration(): number {
+    return this.durationV ?? 600;
+  }
+
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
-    const delay = this.delayV;
-    const duration = this.durationV ? this.durationV : 250;
+    const delay = this.getDelay();
+    const duration = this.getDuration();
+    const callback = this.callbackV;
 
-    return (targetValues) => {
+    return () => {
       'worklet';
       return {
         animations: {
@@ -101,34 +138,46 @@ export class BounceInUp extends BaseBounceAnimationBuilder {
               translateY: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(20, { duration: duration }),
-                  withTiming(-10, { duration: (duration * 100) / 250 }),
-                  withTiming(10, { duration: (duration * 100) / 250 }),
-                  withTiming(0, { duration: (duration * 100) / 250 })
+                  withTiming(20, { duration: duration * 0.55 }),
+                  withTiming(-10, { duration: duration * 0.15 }),
+                  withTiming(10, { duration: duration * 0.15 }),
+                  withTiming(0, { duration: duration * 0.15 })
                 )
               ),
             },
           ],
         },
         initialValues: {
-          transform: [{ translateY: targetValues.originY - height }],
+          transform: [{ translateY: -height }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class BounceInLeft extends BaseBounceAnimationBuilder {
-  static createInstance() {
+export class BounceInLeft
+  extends BaseAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): BounceInLeft {
     return new BounceInLeft();
   }
 
-  build() {
+  static getDuration(): number {
+    return 600;
+  }
+
+  getDuration(): number {
+    return this.durationV ?? 600;
+  }
+
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
-    const delay = this.delayV;
-    const duration = this.durationV ? this.durationV : 250;
+    const delay = this.getDelay();
+    const duration = this.getDuration();
+    const callback = this.callbackV;
 
-    return (targetValues) => {
+    return () => {
       'worklet';
       return {
         animations: {
@@ -137,34 +186,46 @@ export class BounceInLeft extends BaseBounceAnimationBuilder {
               translateX: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(20, { duration: duration }),
-                  withTiming(-10, { duration: (duration * 100) / 250 }),
-                  withTiming(10, { duration: (duration * 100) / 250 }),
-                  withTiming(0, { duration: (duration * 100) / 250 })
+                  withTiming(20, { duration: duration * 0.55 }),
+                  withTiming(-10, { duration: duration * 0.15 }),
+                  withTiming(10, { duration: duration * 0.15 }),
+                  withTiming(0, { duration: duration * 0.15 })
                 )
               ),
             },
           ],
         },
         initialValues: {
-          transform: [{ translateX: targetValues.originX - width }],
+          transform: [{ translateX: -width }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class BounceInRight extends BaseBounceAnimationBuilder {
-  static createInstance() {
+export class BounceInRight
+  extends BaseAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): BounceInRight {
     return new BounceInRight();
   }
 
-  build() {
+  static getDuration(): number {
+    return 600;
+  }
+
+  getDuration(): number {
+    return this.durationV ?? 600;
+  }
+
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
-    const delay = this.delayV;
-    const duration = this.durationV ? this.durationV : 250;
+    const delay = this.getDelay();
+    const duration = this.getDuration();
+    const callback = this.callbackV;
 
-    return (targetValues) => {
+    return () => {
       'worklet';
       return {
         animations: {
@@ -173,32 +234,44 @@ export class BounceInRight extends BaseBounceAnimationBuilder {
               translateX: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(-20, { duration: duration }),
-                  withTiming(10, { duration: (duration * 100) / 250 }),
-                  withTiming(-10, { duration: (duration * 100) / 250 }),
-                  withTiming(0, { duration: (duration * 100) / 250 })
+                  withTiming(-20, { duration: duration * 0.55 }),
+                  withTiming(10, { duration: duration * 0.15 }),
+                  withTiming(-10, { duration: duration * 0.15 }),
+                  withTiming(0, { duration: duration * 0.15 })
                 )
               ),
             },
           ],
         },
         initialValues: {
-          transform: [{ translateX: targetValues.originX + width }],
+          transform: [{ translateX: width }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class BounceOut extends BaseBounceAnimationBuilder {
-  static createInstance() {
+export class BounceOut
+  extends BaseAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): BounceOut {
     return new BounceOut();
   }
 
-  build() {
+  static getDuration(): number {
+    return 600;
+  }
+
+  getDuration(): number {
+    return this.durationV ?? 600;
+  }
+
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
-    const delay = this.delayV;
-    const duration = this.durationV ? this.durationV : 250;
+    const delay = this.getDelay();
+    const duration = this.getDuration();
+    const callback = this.callbackV;
 
     return () => {
       'worklet';
@@ -209,10 +282,10 @@ export class BounceOut extends BaseBounceAnimationBuilder {
               scale: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(1.1, { duration: (duration * 100) / 250 }),
-                  withTiming(0.9, { duration: (duration * 100) / 250 }),
-                  withTiming(1.2, { duration: (duration * 100) / 250 }),
-                  withTiming(0, { duration: duration })
+                  withTiming(1.1, { duration: duration * 0.15 }),
+                  withTiming(0.9, { duration: duration * 0.15 }),
+                  withTiming(1.2, { duration: duration * 0.15 }),
+                  withTiming(0, { duration: duration * 0.55 })
                 )
               ),
             },
@@ -221,22 +294,34 @@ export class BounceOut extends BaseBounceAnimationBuilder {
         initialValues: {
           transform: [{ scale: 1 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class BounceOutDown extends BaseBounceAnimationBuilder {
-  static createInstance() {
+export class BounceOutDown
+  extends BaseAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): BounceOutDown {
     return new BounceOutDown();
   }
 
-  build() {
+  static getDuration(): number {
+    return 600;
+  }
+
+  getDuration(): number {
+    return this.durationV ?? 600;
+  }
+
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
-    const delay = this.delayV;
-    const duration = this.durationV ? this.durationV : 250;
+    const delay = this.getDelay();
+    const duration = this.getDuration();
+    const callback = this.callbackV;
 
-    return (targetValues) => {
+    return () => {
       'worklet';
       return {
         animations: {
@@ -245,11 +330,11 @@ export class BounceOutDown extends BaseBounceAnimationBuilder {
               translateY: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(-10, { duration: (duration * 100) / 250 }),
-                  withTiming(10, { duration: (duration * 100) / 250 }),
-                  withTiming(-20, { duration: (duration * 100) / 250 }),
-                  withTiming(targetValues.originY + height, {
-                    duration: duration,
+                  withTiming(-10, { duration: duration * 0.15 }),
+                  withTiming(10, { duration: duration * 0.15 }),
+                  withTiming(-20, { duration: duration * 0.15 }),
+                  withTiming(height, {
+                    duration: duration * 0.55,
                   })
                 )
               ),
@@ -257,24 +342,36 @@ export class BounceOutDown extends BaseBounceAnimationBuilder {
           ],
         },
         initialValues: {
-          originY: 0,
+          transform: [{ translateY: 0 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class BounceOutUp extends BaseBounceAnimationBuilder {
-  static createInstance() {
+export class BounceOutUp
+  extends BaseAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): BounceOutUp {
     return new BounceOutUp();
   }
 
-  build() {
+  static getDuration(): number {
+    return 600;
+  }
+
+  getDuration(): number {
+    return this.durationV ?? 600;
+  }
+
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
-    const delay = this.delayV;
-    const duration = this.durationV ? this.durationV : 250;
+    const delay = this.getDelay();
+    const duration = this.getDuration();
+    const callback = this.callbackV;
 
-    return (targetValues) => {
+    return () => {
       'worklet';
       return {
         animations: {
@@ -283,11 +380,11 @@ export class BounceOutUp extends BaseBounceAnimationBuilder {
               translateY: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(10, { duration: (duration * 100) / 250 }),
-                  withTiming(-10, { duration: (duration * 100) / 250 }),
-                  withTiming(20, { duration: (duration * 100) / 250 }),
-                  withTiming(targetValues.originY - height, {
-                    duration: duration,
+                  withTiming(10, { duration: duration * 0.15 }),
+                  withTiming(-10, { duration: duration * 0.15 }),
+                  withTiming(20, { duration: duration * 0.15 }),
+                  withTiming(-height, {
+                    duration: duration * 0.55,
                   })
                 )
               ),
@@ -297,22 +394,34 @@ export class BounceOutUp extends BaseBounceAnimationBuilder {
         initialValues: {
           transform: [{ translateY: 0 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class BounceOutLeft extends BaseBounceAnimationBuilder {
-  static createInstance() {
+export class BounceOutLeft
+  extends BaseAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): BounceOutRight {
     return new BounceOutLeft();
   }
 
-  build() {
+  static getDuration(): number {
+    return 600;
+  }
+
+  getDuration(): number {
+    return this.durationV ?? 600;
+  }
+
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
-    const delay = this.delayV;
-    const duration = this.durationV ? this.durationV : 250;
+    const delay = this.getDelay();
+    const duration = this.getDuration();
+    const callback = this.callbackV;
 
-    return (targetValues) => {
+    return () => {
       'worklet';
       return {
         animations: {
@@ -321,11 +430,11 @@ export class BounceOutLeft extends BaseBounceAnimationBuilder {
               translateX: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(10, { duration: (duration * 100) / 250 }),
-                  withTiming(-10, { duration: (duration * 100) / 250 }),
-                  withTiming(20, { duration: (duration * 100) / 250 }),
-                  withTiming(targetValues.originX - width, {
-                    duration: duration,
+                  withTiming(10, { duration: duration * 0.15 }),
+                  withTiming(-10, { duration: duration * 0.15 }),
+                  withTiming(20, { duration: duration * 0.15 }),
+                  withTiming(-width, {
+                    duration: duration * 0.55,
                   })
                 )
               ),
@@ -335,22 +444,34 @@ export class BounceOutLeft extends BaseBounceAnimationBuilder {
         initialValues: {
           transform: [{ translateX: 0 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }
 
-export class BounceOutRight extends BaseBounceAnimationBuilder {
-  static createInstance() {
+export class BounceOutRight
+  extends BaseAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): BounceOutRight {
     return new BounceOutRight();
   }
 
-  build() {
+  static getDuration(): number {
+    return 600;
+  }
+
+  getDuration(): number {
+    return this.durationV ?? 600;
+  }
+
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
-    const delay = this.delayV;
-    const duration = this.durationV ? this.durationV : 250;
+    const delay = this.getDelay();
+    const duration = this.getDuration();
+    const callback = this.callbackV;
 
-    return (targetValues) => {
+    return () => {
       'worklet';
       return {
         animations: {
@@ -359,11 +480,11 @@ export class BounceOutRight extends BaseBounceAnimationBuilder {
               translateX: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(-10, { duration: (duration * 100) / 250 }),
-                  withTiming(10, { duration: (duration * 100) / 250 }),
-                  withTiming(-20, { duration: (duration * 100) / 250 }),
-                  withTiming(targetValues.originX + width, {
-                    duration: duration,
+                  withTiming(-10, { duration: duration * 0.15 }),
+                  withTiming(10, { duration: duration * 0.15 }),
+                  withTiming(-20, { duration: duration * 0.15 }),
+                  withTiming(width, {
+                    duration: duration * 0.55,
                   })
                 )
               ),
@@ -373,7 +494,8 @@ export class BounceOutRight extends BaseBounceAnimationBuilder {
         initialValues: {
           transform: [{ translateX: 0 }],
         },
+        callback: callback,
       };
     };
-  }
+  };
 }

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

@@ -0,0 +1,43 @@
+import {
+  LayoutAnimationFunction,
+  EntryExitAnimationFunction,
+} from '../animationBuilder/commonTypes';
+
+export const DefaultLayout: LayoutAnimationFunction = (values) => {
+  'worklet';
+  return {
+    initialValues: {
+      originX: values.originX,
+      originY: values.originY,
+      width: values.width,
+      height: values.height,
+    },
+    animations: {},
+  };
+};
+
+export const DefaultEntering: EntryExitAnimationFunction = (targetValues) => {
+  'worklet';
+  return {
+    initialValues: {
+      originX: targetValues.originX,
+      originY: targetValues.originY,
+      width: targetValues.width,
+      height: targetValues.height,
+    },
+    animations: {},
+  };
+};
+
+export const DefaultExiting: EntryExitAnimationFunction = (startValues) => {
+  'worklet';
+  return {
+    initialValues: {
+      originX: startValues.originX,
+      originY: startValues.originY,
+      width: startValues.width,
+      height: startValues.height,
+    },
+    animations: {},
+  };
+};