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

package/lib/reanimated2/layoutReanimation/animationBuilder/ComplexAnimationBuilder.js

@@ -0,0 +1,125 @@
+import { withTiming, withSpring } from '../../animation';
+import { BaseAnimationBuilder } from './BaseAnimationBuilder';
+export class ComplexAnimationBuilder extends BaseAnimationBuilder {
+    static easing(easingFunction) {
+        const instance = this.createInstance();
+        return instance.easing(easingFunction);
+    }
+    easing(easingFunction) {
+        this.easingV = easingFunction;
+        return this;
+    }
+    static rotate(degree) {
+        const instance = this.createInstance();
+        return instance.rotate(degree);
+    }
+    rotate(degree) {
+        this.rotateV = degree;
+        return this;
+    }
+    static springify() {
+        const instance = this.createInstance();
+        return instance.springify();
+    }
+    springify() {
+        this.type = withSpring;
+        return this;
+    }
+    static damping(damping) {
+        const instance = this.createInstance();
+        return instance.damping(damping);
+    }
+    damping(damping) {
+        this.dampingV = damping;
+        return this;
+    }
+    static mass(mass) {
+        const instance = this.createInstance();
+        return instance.mass(mass);
+    }
+    mass(mass) {
+        this.massV = mass;
+        return this;
+    }
+    static stiffness(stiffness) {
+        const instance = this.createInstance();
+        return instance.stiffness(stiffness);
+    }
+    stiffness(stiffness) {
+        this.stiffnessV = stiffness;
+        return this;
+    }
+    static overshootClamping(overshootClamping) {
+        const instance = this.createInstance();
+        return instance.overshootClamping(overshootClamping);
+    }
+    overshootClamping(overshootClamping) {
+        this.overshootClampingV = overshootClamping;
+        return this;
+    }
+    static restDisplacementThreshold(restDisplacementThreshold) {
+        const instance = this.createInstance();
+        return instance.restDisplacementThreshold(restDisplacementThreshold);
+    }
+    restDisplacementThreshold(restDisplacementThreshold) {
+        this.restDisplacementThresholdV = restDisplacementThreshold;
+        return this;
+    }
+    static restSpeedThreshold(restSpeedThreshold) {
+        const instance = this.createInstance();
+        return instance.restSpeedThreshold(restSpeedThreshold);
+    }
+    restSpeedThreshold(restSpeedThreshold) {
+        this.restSpeedThresholdV = restSpeedThreshold;
+        return this;
+    }
+    getAnimationAndConfig() {
+        const duration = this.durationV;
+        const easing = this.easingV;
+        const rotate = this.rotateV;
+        const type = this.type ? this.type : withTiming;
+        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 = {};
+        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/lib/reanimated2/layoutReanimation/animationBuilder/Keyframe.js

@@ -0,0 +1,193 @@
+import { Easing } from '../../Easing';
+import { withDelay, withSequence, withTiming } from '../../animation';
+export class Keyframe {
+    /*
+      Keyframe definition should be passed in the constructor as the map
+      which keys are between range 0 - 100 (%) and correspond to the point in the animation progress.
+    */
+    constructor(definitions) {
+        this.build = () => {
+            const delay = this.delayV;
+            const delayFunction = this.getDelayFunction();
+            const { keyframes, initialValues } = this.parseDefinitions();
+            const callback = this.callbackV;
+            return (_targetValues) => {
+                'worklet';
+                const animations = {};
+                /*
+                      For each style property, an animations sequence is created that corresponds with its key points.
+                      Transform style properties require special handling because of their nested structure.
+                */
+                const addAnimation = (key) => {
+                    var _a;
+                    const keyframePoints = keyframes[key];
+                    // in case if property was only passed as initial value
+                    if (keyframePoints.length === 0)
+                        return;
+                    const animation = delayFunction(delay, keyframePoints.length === 1
+                        ? withTiming(keyframePoints[0].value, {
+                            duration: keyframePoints[0].duration,
+                            easing: keyframePoints[0].easing
+                                ? keyframePoints[0].easing
+                                : Easing.linear,
+                        })
+                        : withSequence.apply(this, keyframePoints.map((keyframePoint) => withTiming(keyframePoint.value, {
+                            duration: keyframePoint.duration,
+                            easing: keyframePoint.easing
+                                ? keyframePoint.easing
+                                : Easing.linear,
+                        }))));
+                    if (key.includes('transform')) {
+                        if (!('transform' in animations)) {
+                            animations.transform = [];
+                        }
+                        (_a = animations.transform) === null || _a === void 0 ? void 0 : _a.push({
+                            [key.split(':')[1]]: animation,
+                        });
+                    }
+                    else {
+                        animations[key] = animation;
+                    }
+                };
+                Object.keys(initialValues).forEach((key) => {
+                    if (key.includes('transform')) {
+                        initialValues[key].forEach((transformProp, index) => {
+                            Object.keys(transformProp).forEach((transformPropKey) => {
+                                addAnimation(index.toString() + '_transform:' + transformPropKey);
+                            });
+                        });
+                    }
+                    else {
+                        addAnimation(key);
+                    }
+                });
+                return {
+                    animations: animations,
+                    initialValues: initialValues,
+                    callback: callback,
+                };
+            };
+        };
+        this.definitions = definitions;
+    }
+    parseDefinitions() {
+        /*
+            Each style property contain an array with all their key points:
+            value, duration of transition to that value, and optional easing function (defaults to Linear)
+        */
+        const parsedKeyframes = {};
+        /*
+          Parsing keyframes 'from' and 'to'.
+        */
+        if (this.definitions.from) {
+            if (this.definitions['0']) {
+                throw Error("You cannot provide both keyframe 0 and 'from' as they both specified initial values");
+            }
+            this.definitions['0'] = this.definitions.from;
+            delete this.definitions.from;
+        }
+        if (this.definitions.to) {
+            if (this.definitions['100']) {
+                throw Error("You cannot provide both keyframe 100 and 'to' as they both specified values at the end of the animation.");
+            }
+            this.definitions['100'] = this.definitions.to;
+            delete this.definitions.to;
+        }
+        /*
+           One of the assumptions is that keyframe  0 is required to properly set initial values.
+           Every other keyframe should contain properties from the set provided as initial values.
+        */
+        if (!this.definitions['0']) {
+            throw Error("Please provide 0, or 'from' keyframe with initial state of your object.");
+        }
+        const initialValues = this.definitions['0'];
+        /*
+          Initialize parsedKeyframes for properties provided in initial keyframe
+        */
+        Object.keys(initialValues).forEach((styleProp) => {
+            var _a;
+            if (styleProp === 'transform') {
+                (_a = initialValues[styleProp]) === null || _a === void 0 ? void 0 : _a.forEach((transformStyle, index) => {
+                    Object.keys(transformStyle).forEach((transformProp) => {
+                        parsedKeyframes[index.toString() + '_transform:' + transformProp] = [];
+                    });
+                });
+            }
+            else {
+                parsedKeyframes[styleProp] = [];
+            }
+        });
+        const duration = this.durationV ? this.durationV : 500;
+        const animationKeyPoints = Array.from(Object.keys(this.definitions));
+        const getAnimationDuration = (key, currentKeyPoint) => {
+            const maxDuration = (currentKeyPoint / 100) * duration;
+            const currentDuration = parsedKeyframes[key].reduce((acc, value) => acc + value.duration, 0);
+            return maxDuration - currentDuration;
+        };
+        /*
+           Other keyframes can't contain properties that were not specified in initial keyframe.
+        */
+        const addKeyPoint = ({ key, value, currentKeyPoint, easing, }) => {
+            if (!(key in parsedKeyframes)) {
+                throw Error("Keyframe can contain only that set of properties that were provide with initial values (keyframe 0 or 'from')");
+            }
+            parsedKeyframes[key].push({
+                duration: getAnimationDuration(key, currentKeyPoint),
+                value: value,
+                easing: easing,
+            });
+        };
+        animationKeyPoints
+            .filter((value) => parseInt(value) !== 0)
+            .sort((a, b) => parseInt(a) - parseInt(b))
+            .forEach((keyPoint) => {
+            if (parseInt(keyPoint) < 0 || parseInt(keyPoint) > 100) {
+                throw Error('Keyframe should be in between range 0 - 100.');
+            }
+            const keyframe = this.definitions[keyPoint];
+            const easing = keyframe.easing;
+            delete keyframe.easing;
+            const addKeyPointWith = (key, value) => addKeyPoint({
+                key,
+                value,
+                currentKeyPoint: parseInt(keyPoint),
+                easing,
+            });
+            Object.keys(keyframe).forEach((key) => {
+                var _a;
+                if (key === 'transform') {
+                    (_a = keyframe[key]) === null || _a === void 0 ? void 0 : _a.forEach((transformStyle, index) => {
+                        Object.keys(transformStyle).forEach((transformProp) => {
+                            addKeyPointWith(index.toString() + '_transform:' + transformProp, transformStyle[transformProp]);
+                        });
+                    });
+                }
+                else {
+                    addKeyPointWith(key, keyframe[key]);
+                }
+            });
+        });
+        return { initialValues: initialValues, keyframes: parsedKeyframes };
+    }
+    duration(durationMs) {
+        this.durationV = durationMs;
+        return this;
+    }
+    delay(delayMs) {
+        this.delayV = delayMs;
+        return this;
+    }
+    withCallback(callback) {
+        this.callbackV = callback;
+        return this;
+    }
+    getDelayFunction() {
+        const delay = this.delayV;
+        return delay
+            ? withDelay
+            : (_, animation) => {
+                'worklet';
+                return animation;
+            };
+    }
+}

package/lib/reanimated2/layoutReanimation/animationBuilder/commonTypes.js

@@ -0,0 +1 @@
+export {};

package/lib/reanimated2/layoutReanimation/animationBuilder/index.js

@@ -0,0 +1,3 @@
+export { BaseAnimationBuilder } from './BaseAnimationBuilder';
+export { ComplexAnimationBuilder } from './ComplexAnimationBuilder';
+export { Keyframe } from './Keyframe';