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

package/lib/reanimated2/layoutReanimation/defaultAnimations/Lightspeed.js

@@ -0,0 +1,146 @@
+import { Dimensions } from 'react-native';
+import { withSequence, withTiming } from '../../animation';
+import { ComplexAnimationBuilder } from '../animationBuilder';
+const { width } = Dimensions.get('window');
+export class LightSpeedInRight extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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, Object.assign(Object.assign({}, 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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new LightSpeedInRight();
+    }
+}
+export class LightSpeedInLeft extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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, Object.assign(Object.assign({}, 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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new LightSpeedInLeft();
+    }
+}
+export class LightSpeedOutRight extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new LightSpeedOutRight();
+    }
+}
+export class LightSpeedOutLeft extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new LightSpeedOutLeft();
+    }
+}

package/lib/reanimated2/layoutReanimation/defaultAnimations/Pinwheel.js

@@ -0,0 +1,85 @@
+import { ComplexAnimationBuilder } from '../animationBuilder';
+export class PinwheelIn extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new PinwheelIn();
+    }
+}
+export class PinwheelOut extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new PinwheelOut();
+    }
+}

package/lib/reanimated2/layoutReanimation/defaultAnimations/Roll.js

@@ -0,0 +1,119 @@
+import { Dimensions } from 'react-native';
+import { ComplexAnimationBuilder } from '../animationBuilder';
+const { width } = Dimensions.get('window');
+export class RollInLeft extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new RollInLeft();
+    }
+}
+export class RollInRight extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new RollInRight();
+    }
+}
+export class RollOutLeft extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new RollOutLeft();
+    }
+}
+export class RollOutRight extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new RollOutRight();
+    }
+}

package/lib/reanimated2/layoutReanimation/defaultAnimations/Rotate.js

@@ -0,0 +1,289 @@
+import { ComplexAnimationBuilder } from '../animationBuilder';
+export class RotateInDownLeft extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new RotateInDownLeft();
+    }
+}
+export class RotateInDownRight extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new RotateInDownRight();
+    }
+}
+export class RotateInUpLeft extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new RotateInUpLeft();
+    }
+}
+export class RotateInUpRight extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new RotateInUpRight();
+    }
+}
+export class RotateOutDownLeft extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new RotateOutDownLeft();
+    }
+}
+export class RotateOutDownRight extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new RotateOutDownRight();
+    }
+}
+export class RotateOutUpLeft extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new RotateOutUpLeft();
+    }
+}
+export class RotateOutUpRight extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            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,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new RotateOutUpRight();
+    }
+}