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

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

@@ -0,0 +1,179 @@
+import { Dimensions } from 'react-native';
+import { withSequence, withTiming } from '../../animation';
+import { ComplexAnimationBuilder } from '../animationBuilder';
+import {
+  EntryExitAnimationFunction,
+  IEntryExitAnimationBuilder,
+} from '../animationBuilder/commonTypes';
+
+const { width } = Dimensions.get('window');
+
+export class LightSpeedInRight
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): LightSpeedInRight {
+    return new LightSpeedInRight();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const duration = this.getDuration();
+    const callback = this.callbackV;
+
+    return () => {
+      'worklet';
+      return {
+        animations: {
+          opacity: delayFunction(delay, withTiming(1, { duration: duration })),
+          transform: [
+            {
+              translateX: delayFunction(
+                delay,
+                animation(0, { ...config, duration: duration * 0.7 })
+              ),
+            },
+            {
+              skewX: delayFunction(
+                delay,
+                withSequence(
+                  withTiming('10deg', { duration: duration * 0.7 }),
+                  withTiming('-5deg', { duration: duration * 0.15 }),
+                  withTiming('0deg', { duration: duration * 0.15 })
+                )
+              ),
+            },
+          ],
+        },
+        initialValues: {
+          opacity: 0,
+          transform: [{ translateX: width }, { skewX: '-45deg' }],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class LightSpeedInLeft
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): LightSpeedInLeft {
+    return new LightSpeedInLeft();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const duration = this.getDuration();
+    const callback = this.callbackV;
+
+    return () => {
+      'worklet';
+      return {
+        animations: {
+          opacity: delayFunction(delay, withTiming(1, { duration: duration })),
+          transform: [
+            {
+              translateX: delayFunction(
+                delay,
+                animation(0, { ...config, duration: duration * 0.7 })
+              ),
+            },
+            {
+              skewX: delayFunction(
+                delay,
+                withSequence(
+                  withTiming('-10deg', { duration: duration * 0.7 }),
+                  withTiming('5deg', { duration: duration * 0.15 }),
+                  withTiming('0deg', { duration: duration * 0.15 })
+                )
+              ),
+            },
+          ],
+        },
+        initialValues: {
+          opacity: 0,
+          transform: [{ translateX: -width }, { skewX: '45deg' }],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class LightSpeedOutRight
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): LightSpeedOutRight {
+    return new LightSpeedOutRight();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return () => {
+      'worklet';
+      return {
+        animations: {
+          opacity: delayFunction(delay, animation(0, config)),
+          transform: [
+            {
+              translateX: delayFunction(delay, animation(width, config)),
+            },
+            {
+              skewX: delayFunction(delay, animation('-45deg', config)),
+            },
+          ],
+        },
+        initialValues: {
+          opacity: 1,
+          transform: [{ translateX: 0 }, { skewX: '0deg' }],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class LightSpeedOutLeft
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): LightSpeedOutLeft {
+    return new LightSpeedOutLeft();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return () => {
+      'worklet';
+      return {
+        animations: {
+          opacity: delayFunction(delay, animation(0, config)),
+          transform: [
+            {
+              translateX: delayFunction(delay, animation(-width, config)),
+            },
+            {
+              skewX: delayFunction(delay, animation('45deg', config)),
+            },
+          ],
+        },
+        initialValues: {
+          opacity: 1,
+          transform: [{ translateX: 0 }, { skewX: '0deg' }],
+        },
+        callback: callback,
+      };
+    };
+  };
+}

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

@@ -0,0 +1,93 @@
+import { ComplexAnimationBuilder } from '../animationBuilder';
+import {
+  EntryExitAnimationFunction,
+  IEntryExitAnimationBuilder,
+} from '../animationBuilder/commonTypes';
+
+export class PinwheelIn
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): PinwheelIn {
+    return new PinwheelIn();
+  }
+
+  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: [
+            {
+              scale: delayFunction(delay, animation(1, config)),
+            },
+            {
+              rotate: delayFunction(delay, animation('0', config)),
+            },
+          ],
+        },
+        initialValues: {
+          opacity: 0,
+          transform: [
+            {
+              scale: 0,
+            },
+            {
+              rotate: '5',
+            },
+          ],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class PinwheelOut
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): PinwheelOut {
+    return new PinwheelOut();
+  }
+
+  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: [
+            {
+              scale: delayFunction(delay, animation(0, config)),
+            },
+            {
+              rotate: delayFunction(delay, animation('5', config)),
+            },
+          ],
+        },
+        initialValues: {
+          opacity: 1,
+          transform: [
+            {
+              scale: 1,
+            },
+            {
+              rotate: '0',
+            },
+          ],
+        },
+        callback: callback,
+      };
+    };
+  };
+}

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

@@ -0,0 +1,132 @@
+import { Dimensions } from 'react-native';
+import { ComplexAnimationBuilder } from '../animationBuilder';
+import {
+  EntryExitAnimationFunction,
+  IEntryExitAnimationBuilder,
+} from '../animationBuilder/commonTypes';
+
+const { width } = Dimensions.get('window');
+
+export class RollInLeft
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): RollInLeft {
+    return new RollInLeft();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return () => {
+      'worklet';
+      return {
+        animations: {
+          transform: [
+            { translateX: delayFunction(delay, animation(0), config) },
+            { rotate: delayFunction(delay, animation('0deg', config)) },
+          ],
+        },
+        initialValues: {
+          transform: [{ translateX: -width }, { rotate: '-180deg' }],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class RollInRight
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): RollInRight {
+    return new RollInRight();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return () => {
+      'worklet';
+      return {
+        animations: {
+          transform: [
+            { translateX: delayFunction(delay, animation(0, config)) },
+            { rotate: delayFunction(delay, animation('0deg', config)) },
+          ],
+        },
+        initialValues: {
+          transform: [{ translateX: width }, { rotate: '180deg' }],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class RollOutLeft
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): RollOutLeft {
+    return new RollOutLeft();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return () => {
+      'worklet';
+      return {
+        animations: {
+          transform: [
+            { translateX: delayFunction(delay, animation(-width, config)) },
+            { rotate: delayFunction(delay, animation('-180deg', config)) },
+          ],
+        },
+        initialValues: {
+          transform: [{ translateX: 0 }, { rotate: '0deg' }],
+        },
+        callback: callback,
+      };
+    };
+  };
+}
+
+export class RollOutRight
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder {
+  static createInstance(): RollOutRight {
+    return new RollOutRight();
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction();
+    const [animation, config] = this.getAnimationAndConfig();
+    const delay = this.getDelay();
+    const callback = this.callbackV;
+
+    return () => {
+      'worklet';
+      return {
+        animations: {
+          transform: [
+            { translateX: delayFunction(delay, animation(width, config)) },
+            { rotate: delayFunction(delay, animation('180deg', config)) },
+          ],
+        },
+        initialValues: {
+          transform: [{ translateX: 0 }, { rotate: '0deg' }],
+        },
+        callback: callback,
+      };
+    };
+  };
+}