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

package/src/reanimated2/layoutReanimation/animationBuilder/ComplexAnimationBuilder.ts

@@ -0,0 +1,169 @@
+import { withTiming, withSpring } from '../../animation';
+import {
+  AnimationFunction,
+  BaseBuilderAnimationConfig,
+  LayoutAnimationAndConfig,
+} from './commonTypes';
+import { EasingFn } from '../../Easing';
+import { BaseAnimationBuilder } from './BaseAnimationBuilder';
+export class ComplexAnimationBuilder extends BaseAnimationBuilder {
+  easingV?: EasingFn;
+  rotateV?: string;
+  type?: AnimationFunction;
+  dampingV?: number;
+  massV?: number;
+  stiffnessV?: number;
+  overshootClampingV?: number;
+  restDisplacementThresholdV?: number;
+  restSpeedThresholdV?: number;
+
+  static createInstance: () => ComplexAnimationBuilder;
+
+  static easing(easingFunction: EasingFn): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.easing(easingFunction);
+  }
+
+  easing(easingFunction: EasingFn): ComplexAnimationBuilder {
+    this.easingV = easingFunction;
+    return this;
+  }
+
+  static rotate(degree: string): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.rotate(degree);
+  }
+
+  rotate(degree: string): ComplexAnimationBuilder {
+    this.rotateV = degree;
+    return this;
+  }
+
+  static springify(): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.springify();
+  }
+
+  springify(): ComplexAnimationBuilder {
+    this.type = withSpring as AnimationFunction;
+    return this;
+  }
+
+  static damping(damping: number): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.damping(damping);
+  }
+
+  damping(damping: number): ComplexAnimationBuilder {
+    this.dampingV = damping;
+    return this;
+  }
+
+  static mass(mass: number): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.mass(mass);
+  }
+
+  mass(mass: number): ComplexAnimationBuilder {
+    this.massV = mass;
+    return this;
+  }
+
+  static stiffness(stiffness: number): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.stiffness(stiffness);
+  }
+
+  stiffness(stiffness: number): ComplexAnimationBuilder {
+    this.stiffnessV = stiffness;
+    return this;
+  }
+
+  static overshootClamping(overshootClamping: number): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.overshootClamping(overshootClamping);
+  }
+
+  overshootClamping(overshootClamping: number): ComplexAnimationBuilder {
+    this.overshootClampingV = overshootClamping;
+    return this;
+  }
+
+  static restDisplacementThreshold(
+    restDisplacementThreshold: number
+  ): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.restDisplacementThreshold(restDisplacementThreshold);
+  }
+
+  restDisplacementThreshold(
+    restDisplacementThreshold: number
+  ): ComplexAnimationBuilder {
+    this.restDisplacementThresholdV = restDisplacementThreshold;
+    return this;
+  }
+
+  static restSpeedThreshold(
+    restSpeedThreshold: number
+  ): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.restSpeedThreshold(restSpeedThreshold);
+  }
+
+  restSpeedThreshold(restSpeedThreshold: number): ComplexAnimationBuilder {
+    this.restSpeedThresholdV = restSpeedThreshold;
+    return this;
+  }
+
+  getAnimationAndConfig(): LayoutAnimationAndConfig {
+    const duration = this.durationV;
+    const easing = this.easingV;
+    const rotate = this.rotateV;
+    const type = this.type ? this.type : (withTiming as AnimationFunction);
+    const damping = this.dampingV;
+    const mass = this.massV;
+    const stiffness = this.stiffnessV;
+    const overshootClamping = this.overshootClampingV;
+    const restDisplacementThreshold = this.restDisplacementThresholdV;
+    const restSpeedThreshold = this.restSpeedThresholdV;
+
+    const animation = type;
+
+    const config: BaseBuilderAnimationConfig = {};
+
+    if (type === withTiming) {
+      if (easing) {
+        config.easing = easing;
+      }
+      if (duration) {
+        config.duration = duration;
+      }
+      if (rotate) {
+        config.rotate = rotate;
+      }
+    } else {
+      if (damping) {
+        config.damping = damping;
+      }
+      if (mass) {
+        config.mass = mass;
+      }
+      if (stiffness) {
+        config.stiffness = stiffness;
+      }
+      if (overshootClamping) {
+        config.overshootClamping = overshootClamping;
+      }
+      if (restDisplacementThreshold) {
+        config.restDisplacementThreshold = restDisplacementThreshold;
+      }
+      if (restSpeedThreshold) {
+        config.restSpeedThreshold = restSpeedThreshold;
+      }
+      if (rotate) {
+        config.rotate = rotate;
+      }
+    }
+    return [animation, config];
+  }
+}

package/src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts

@@ -2,7 +2,7 @@ import { Easing, EasingFn } from '../../Easing';
 import { withDelay, withSequence, withTiming } from '../../animation';
 import {
   AnimationFunction,
-  EntryExitAnimationBuild,
+  EntryExitAnimationFunction,
   IEntryExitAnimationBuilder,
   KeyframeProps,
 } from './commonTypes';
@@ -188,7 +188,7 @@ export class Keyframe implements IEntryExitAnimationBuilder {
         };
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delay = this.delayV;
     const delayFunction = this.getDelayFunction();
     const { keyframes, initialValues } = this.parseDefinitions();

package/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.ts

@@ -27,8 +27,6 @@ export type EntryExitAnimationFunction = (
   targetValues: EntryExitAnimationsValues
 ) => LayoutAnimation;
 
-export type EntryExitAnimationBuild = () => EntryExitAnimationFunction;
-
 export interface LayoutAnimationsValues {
   originX: number;
   originY: number;
@@ -42,14 +40,14 @@ export interface LayoutAnimationsValues {
   bheight: number;
   bglobalOriginX: number;
   bglobalOriginY: number;
+  windowWidth: number;
+  windowHeight: number;
 }
 
 export type LayoutAnimationFunction = (
   targetValues: LayoutAnimationsValues
 ) => LayoutAnimation;
 
-export type LayoutAnimationBuild = () => LayoutAnimationFunction;
-
 export interface ILayoutAnimationBuilder {
   build: () => LayoutAnimationFunction;
 }
@@ -75,10 +73,6 @@ export type LayoutAnimationAndConfig = [
   BaseBuilderAnimationConfig
 ];
 
-export interface BounceBuilderAnimationConfig {
-  duration?: number;
-}
-
 export interface IEntryExitAnimationBuilder {
-  build: EntryExitAnimationBuild;
+  build: () => EntryExitAnimationFunction;
 }

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

@@ -1,20 +1,16 @@
 export { BaseAnimationBuilder } from './BaseAnimationBuilder';
-export { BaseBounceAnimationBuilder } from './BaseBounceAnimationBuilder';
-export { LayoutAnimationBuilder, Layout } from './LayoutAnimationBuilder';
+export { ComplexAnimationBuilder } from './ComplexAnimationBuilder';
 export { Keyframe } from './Keyframe';
 export {
   LayoutAnimation,
   AnimationFunction,
   EntryExitAnimationsValues,
   EntryExitAnimationFunction,
-  EntryExitAnimationBuild,
   LayoutAnimationsValues,
   LayoutAnimationFunction,
   ILayoutAnimationBuilder,
   BaseLayoutAnimationConfig,
   BaseBuilderAnimationConfig,
   LayoutAnimationAndConfig,
-  BounceBuilderAnimationConfig,
   IEntryExitAnimationBuilder,
-  LayoutAnimationBuild,
 } from './commonTypes';

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

@@ -1,24 +1,32 @@
 import {
+  EntryExitAnimationFunction,
   IEntryExitAnimationBuilder,
-  EntryExitAnimationBuild,
 } from '../animationBuilder/commonTypes';
-import { BaseBounceAnimationBuilder } from '../animationBuilder/BaseBounceAnimationBuilder';
 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
+  extends BaseAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): BounceIn {
     return new BounceIn();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  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 () => {
@@ -30,10 +38,10 @@ export class BounceIn
               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 })
                 )
               ),
             },
@@ -49,16 +57,24 @@ export class BounceIn
 }
 
 export class BounceInDown
-  extends BaseBounceAnimationBuilder
+  extends BaseAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): BounceInDown {
     return new BounceInDown();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  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 () => {
@@ -70,10 +86,10 @@ export class BounceInDown
               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 })
                 )
               ),
             },
@@ -93,16 +109,24 @@ export class BounceInDown
 }
 
 export class BounceInUp
-  extends BaseBounceAnimationBuilder
+  extends BaseAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): BounceInUp {
     return new BounceInUp();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  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 () => {
@@ -114,10 +138,10 @@ export class BounceInUp
               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 })
                 )
               ),
             },
@@ -133,16 +157,24 @@ export class BounceInUp
 }
 
 export class BounceInLeft
-  extends BaseBounceAnimationBuilder
+  extends BaseAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): BounceInLeft {
     return new BounceInLeft();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  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 () => {
@@ -154,10 +186,10 @@ export class BounceInLeft
               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 })
                 )
               ),
             },
@@ -173,16 +205,24 @@ export class BounceInLeft
 }
 
 export class BounceInRight
-  extends BaseBounceAnimationBuilder
+  extends BaseAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): BounceInRight {
     return new BounceInRight();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  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 () => {
@@ -194,10 +234,10 @@ export class BounceInRight
               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 })
                 )
               ),
             },
@@ -213,16 +253,24 @@ export class BounceInRight
 }
 
 export class BounceOut
-  extends BaseBounceAnimationBuilder
+  extends BaseAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): BounceOut {
     return new BounceOut();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  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 () => {
@@ -234,10 +282,10 @@ export class BounceOut
               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 })
                 )
               ),
             },
@@ -253,16 +301,24 @@ export class BounceOut
 }
 
 export class BounceOutDown
-  extends BaseBounceAnimationBuilder
+  extends BaseAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): BounceOutDown {
     return new BounceOutDown();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  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 () => {
@@ -274,11 +330,11 @@ export class BounceOutDown
               translateY: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(-10, { duration: (duration * 100) / 250 }),
-                  withTiming(10, { duration: (duration * 100) / 250 }),
-                  withTiming(-20, { duration: (duration * 100) / 250 }),
+                  withTiming(-10, { duration: duration * 0.15 }),
+                  withTiming(10, { duration: duration * 0.15 }),
+                  withTiming(-20, { duration: duration * 0.15 }),
                   withTiming(height, {
-                    duration: duration,
+                    duration: duration * 0.55,
                   })
                 )
               ),
@@ -295,16 +351,24 @@ export class BounceOutDown
 }
 
 export class BounceOutUp
-  extends BaseBounceAnimationBuilder
+  extends BaseAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): BounceOutUp {
     return new BounceOutUp();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  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 () => {
@@ -316,11 +380,11 @@ export class BounceOutUp
               translateY: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(10, { duration: (duration * 100) / 250 }),
-                  withTiming(-10, { duration: (duration * 100) / 250 }),
-                  withTiming(20, { duration: (duration * 100) / 250 }),
+                  withTiming(10, { duration: duration * 0.15 }),
+                  withTiming(-10, { duration: duration * 0.15 }),
+                  withTiming(20, { duration: duration * 0.15 }),
                   withTiming(-height, {
-                    duration: duration,
+                    duration: duration * 0.55,
                   })
                 )
               ),
@@ -337,16 +401,24 @@ export class BounceOutUp
 }
 
 export class BounceOutLeft
-  extends BaseBounceAnimationBuilder
+  extends BaseAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): BounceOutRight {
     return new BounceOutLeft();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  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 () => {
@@ -358,11 +430,11 @@ export class BounceOutLeft
               translateX: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(10, { duration: (duration * 100) / 250 }),
-                  withTiming(-10, { duration: (duration * 100) / 250 }),
-                  withTiming(20, { duration: (duration * 100) / 250 }),
+                  withTiming(10, { duration: duration * 0.15 }),
+                  withTiming(-10, { duration: duration * 0.15 }),
+                  withTiming(20, { duration: duration * 0.15 }),
                   withTiming(-width, {
-                    duration: duration,
+                    duration: duration * 0.55,
                   })
                 )
               ),
@@ -379,16 +451,24 @@ export class BounceOutLeft
 }
 
 export class BounceOutRight
-  extends BaseBounceAnimationBuilder
+  extends BaseAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): BounceOutRight {
     return new BounceOutRight();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  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 () => {
@@ -400,11 +480,11 @@ export class BounceOutRight
               translateX: delayFunction(
                 delay,
                 withSequence(
-                  withTiming(-10, { duration: (duration * 100) / 250 }),
-                  withTiming(10, { duration: (duration * 100) / 250 }),
-                  withTiming(-20, { duration: (duration * 100) / 250 }),
+                  withTiming(-10, { duration: duration * 0.15 }),
+                  withTiming(10, { duration: duration * 0.15 }),
+                  withTiming(-20, { duration: duration * 0.15 }),
                   withTiming(width, {
-                    duration: duration,
+                    duration: duration * 0.55,
                   })
                 )
               ),