feat(animations): merge pull request #60 from CursedWizard/master

feat(animations): use transforms with translateX/translateY instead of dynamic margin.

Author: Luke Brandon Farrell

src/RNNDrawer.tsx

@@ -78,9 +78,14 @@ export enum DirectionType {
   top = 'top',
 }
 
+interface Point {
+    moveX: number;
+    moveY: number;
+}
+
 interface IState {
-  sideMenuOpenValue: any;
-  sideMenuOverlayOpacity: any;
+  sideMenuOpenValue: Animated.Value;
+  sideMenuOverlayOpacity: Animated.Value;
   sideMenuSwipingStarted: boolean;
   sideMenuIsDismissing: boolean;
   screenHeight: number;
@@ -97,6 +102,7 @@ interface IProps {
   fadeOpacity: number;
   drawerScreenWidth: number | string;
   drawerScreenHeight: number | string;
+  animateDrawerExpanding?: boolean;
   style: any;
 }
 
@@ -124,7 +130,7 @@ interface DrawerReverseDirectionInterface {
 }
 
 interface SwipeMoveInterface {
-  value: number;
+  value: Point;
   direction: string;
 }
 
@@ -142,13 +148,16 @@ class RNNDrawer {
       private readonly drawerWidth: number;
       private readonly drawerHeight: number;
       private readonly drawerOpenedValues: DrawerDirectionValuesInterface;
+      private readonly initialValues: DrawerDirectionValuesInterface;
       private panResponder: PanResponderInstance;
-      private animatedDrawer: any;
-      private animatedOpacity: any;
-      private unsubscribeSwipeStart: any;
-      private unsubscribeSwipeMove: any;
-      private unsubscribeSwipeEnd: any;
-      private unsubscribeDismissDrawer: any;
+      private animatedDrawer!: Animated.CompositeAnimation;
+      private animatedOpacity!: Animated.CompositeAnimation;
+      private unsubscribeSwipeStart!: () => void;
+      private unsubscribeSwipeMove!: () => void;
+      private unsubscribeSwipeEnd!: () => void;
+      private unsubscribeDismissDrawer!: () => void;
+      private panningStartedPoint: Point = { moveX: 0 , moveY: 0 };
+      private startedFromSideMenu: boolean = false;
 
       static defaultProps = {
         animationOpenTime: 300,
@@ -158,6 +167,7 @@ class RNNDrawer {
         fadeOpacity: 0.6,
         drawerScreenWidth: '80%',
         drawerScreenHeight: '100%',
+        animateDrawerExpanding: true
       };
 
       /**
@@ -186,9 +196,12 @@ class RNNDrawer {
             _evt: GestureResponderEvent,
             _gestureState: PanResponderGestureState,
           ) => {
-            const { dx } = _gestureState;
+            const { dx, dy } = _gestureState;
 
-            return Math.abs(dx) > 5;
+            if (this.props.direction === DirectionType.left || this.props.direction === DirectionType.right)
+              return Math.abs(dx) > 5;
+            else
+              return Math.abs(dy) > 5;
           },
           onMoveShouldSetPanResponderCapture: (
             _evt: GestureResponderEvent,
@@ -198,7 +211,9 @@ class RNNDrawer {
             _evt: GestureResponderEvent,
             _gestureState: PanResponderGestureState,
           ) => {
-            dispatch('SWIPE_START');
+            const { moveX, moveY } = _gestureState;
+
+            dispatch('SWIPE_START', {moveX, moveY});
           },
           onPanResponderRelease: (
             _evt: GestureResponderEvent,
@@ -221,10 +236,10 @@ class RNNDrawer {
             _evt: GestureResponderEvent,
             _gestureState: PanResponderGestureState,
           ) => {
-            const { moveX } = _gestureState;
+            const { moveX, moveY } = _gestureState;
             const direction = this.props.direction || 'left';
 
-            dispatch('SWIPE_MOVE', { value: moveX, direction });
+            dispatch('SWIPE_MOVE', { value: { moveX, moveY }, direction });
           },
         });
 
@@ -263,20 +278,20 @@ class RNNDrawer {
         this.drawerOpenedValues = {
           left: 0,
           right: this.screenWidth - this.drawerWidth,
-          top: 0,
+          top: this.drawerHeight - this.screenHeight,
           bottom: this.screenHeight - this.drawerHeight,
         };
 
-        const initialValues: DrawerDirectionValuesInterface = {
+        this.initialValues = {
           left: -this.drawerWidth,
           right: this.screenWidth,
-          top: -this.drawerHeight,
+          top: -this.screenHeight,
           bottom: this.screenHeight,
         };
 
         /** Component State */
         this.state = {
-          sideMenuOpenValue: new Animated.Value(initialValues[props.direction]),
+          sideMenuOpenValue: new Animated.Value(this.initialValues[props.direction]),
           sideMenuOverlayOpacity: new Animated.Value(0),
           sideMenuSwipingStarted: false,
           sideMenuIsDismissing: false,
@@ -310,13 +325,16 @@ class RNNDrawer {
        */
       componentDidMount() {
         /** Props */
-        const { direction, fadeOpacity } = this.props;
+        const { direction, fadeOpacity, animateDrawerExpanding } = this.props;
+
+        if (typeof animateDrawerExpanding !== 'undefined' && !animateDrawerExpanding)
+            this.startedFromSideMenu = true;
 
         // Animate side menu open
         this.animatedDrawer = Animated.timing(this.state.sideMenuOpenValue, {
           toValue: this.drawerOpenedValues[direction],
           duration: this.props.animationOpenTime,
-          useNativeDriver: false,
+          useNativeDriver: true,
         });
 
         // Animate outside side menu opacity
@@ -325,7 +343,7 @@ class RNNDrawer {
           {
             toValue: fadeOpacity,
             duration: this.props.animationOpenTime,
-            useNativeDriver: false,
+            useNativeDriver: true,
           },
         );
       }
@@ -339,7 +357,7 @@ class RNNDrawer {
         this.registerListeners();
 
         // If there has been no Swiping, and this component appears, then just start the open animations
-        if (!this.state.sideMenuSwipingStarted) {
+        if (!this.state.sideMenuSwipingStarted && this.props.animateDrawerExpanding) {
           this.animatedDrawer.start();
           this.animatedOpacity.start();
         }
@@ -356,6 +374,20 @@ class RNNDrawer {
         dispatch('DRAWER_CLOSED');
       }
 
+      onOrientationChange = ({window}: any) => {
+        const screenHeight = window.height;
+
+        this.setState({ screenHeight });
+
+        // Apply correct position if opened from right
+        if (this.props.direction === 'right') {
+          // Calculates the position of the drawer from the left side of the screen
+          const alignedMovementValue = window.width - this.drawerWidth;
+
+          this.state.sideMenuOpenValue.setValue(alignedMovementValue);
+        }
+      }
+
       /**
        * Registers all the listenrs for this component
        */
@@ -364,22 +396,13 @@ class RNNDrawer {
         const { direction, fadeOpacity } = this.props;
 
         // Adapt the drawer's size on orientation change
-        Dimensions.addEventListener('change', ({ window }) => {
-          const screenHeight = window.height;
-
-          this.setState({ screenHeight });
-
-          // Apply correct position if opened from right
-          if (this.props.direction === 'right') {
-            // Calculates the position of the drawer from the left side of the screen
-            const alignedMovementValue = window.width - this.drawerWidth;
-
-            this.state.sideMenuOpenValue.setValue(alignedMovementValue);
-          }
-        });
+        Dimensions.addEventListener('change', this.onOrientationChange);
 
         // Executes when the side of the screen interaction starts
-        this.unsubscribeSwipeStart = listen('SWIPE_START', () => {
+        this.unsubscribeSwipeStart = listen('SWIPE_START', (value: Point) => {
+          this.panningStartedPoint.moveX = value.moveX;
+          this.panningStartedPoint.moveY = value.moveY;
+
           this.setState({
             sideMenuSwipingStarted: true,
           });
@@ -389,46 +412,62 @@ class RNNDrawer {
         this.unsubscribeSwipeMove = listen(
           'SWIPE_MOVE',
           ({ value, direction: swipeDirection }: SwipeMoveInterface) => {
-            if (swipeDirection === 'left') {
-              // Calculates the position of the drawer from the left side of the screen
-              const alignedMovementValue = value - this.drawerWidth;
-              // Calculates the percetage 0 - 100 of which the drawer is open
-              const openedPercentage = Math.abs(
-                (Math.abs(alignedMovementValue) / this.drawerWidth) * 100 - 100,
-              );
-              // Calculates the opacity to set of the screen based on the percentage the drawer is open
-              const normalizedOpacity = Math.min(
-                openedPercentage / 100,
-                fadeOpacity,
-              );
-
-              // Does allow the drawer to go further than the maximum width
-              if (this.drawerOpenedValues[direction] > alignedMovementValue) {
-                // Sets the animation values, we use this so we can resume animation from any point
-                this.state.sideMenuOpenValue.setValue(alignedMovementValue);
+            // Cover special case when we are swiping from the edge of the screen
+            if (this.startedFromSideMenu) {
+              if (direction === "left" && value.moveX < this.drawerWidth) {
+                this.state.sideMenuOpenValue.setValue(value.moveX - this.drawerWidth);
+                const normalizedOpacity = Math.min(
+                    (value.moveX / this.drawerWidth) * fadeOpacity,
+                    fadeOpacity,
+                );
                 this.state.sideMenuOverlayOpacity.setValue(normalizedOpacity);
               }
+              if (direction === "right" && (this.screenWidth - value.moveX) < this.drawerWidth) {
+                this.state.sideMenuOpenValue.setValue(value.moveX);
+                const normalizedOpacity = Math.min(
+                    ((this.screenWidth - value.moveX) / this.drawerWidth) * fadeOpacity,
+                    fadeOpacity,
+                );
+                this.state.sideMenuOverlayOpacity.setValue(normalizedOpacity);
+              }
+
+              return;
+            }
+
+            // Calculates the translateX / translateY value
+            let alignedMovementValue = 0;
+            // To swap the direction if needed
+            let directionModifier = 1;
+            // Whether we use the height of the drawer or the width
+            let drawerDimension = this.drawerWidth;
+
+            if (swipeDirection === 'left') {
+              alignedMovementValue = value.moveX - this.panningStartedPoint.moveX;
             } else if (swipeDirection === 'right') {
-              // Works out the distance from right of screen to the finger position
-              const normalizedValue = this.screenWidth - value;
-              // Calculates the position of the drawer from the left side of the screen
-              const alignedMovementValue = this.screenWidth - normalizedValue;
-              // Calculates the percetage 0 - 100 of which the drawer is open
-              const openedPercentage = Math.abs(
-                (Math.abs(normalizedValue) / this.drawerWidth) * 100,
-              );
-              // Calculates the opacity to set of the screen based on the percentage the drawer is open
-              const normalizedOpacity = Math.min(
-                openedPercentage / 100,
+              alignedMovementValue = this.panningStartedPoint.moveX - value.moveX;
+              directionModifier = -1;
+            } else if (swipeDirection === 'bottom') {
+              alignedMovementValue = this.panningStartedPoint.moveY - value.moveY;
+              directionModifier = -1;
+              drawerDimension = this.drawerHeight;
+            } else if (swipeDirection === 'top') {
+              alignedMovementValue = value.moveY - this.panningStartedPoint.moveY;
+              drawerDimension = this.drawerHeight;
+            }
+
+            // Calculates the percentage 0 - 1 of which the drawer is open
+            const openedPercentage = Math.abs(drawerDimension + alignedMovementValue) / drawerDimension;
+            // Calculates the opacity to set of the screen based on the percentage the drawer is open
+            const normalizedOpacity = Math.min(
+                openedPercentage * fadeOpacity,
                 fadeOpacity,
-              );
+            );
 
-              // Does allow the drawer to go further than the maximum width
-              if (this.drawerOpenedValues[direction] < alignedMovementValue) {
-                // Sets the animation values, we use this so we can resume animation from any point
-                this.state.sideMenuOpenValue.setValue(alignedMovementValue);
-                this.state.sideMenuOverlayOpacity.setValue(normalizedOpacity);
-              }
+            // Does not allow the drawer to go further than the maximum width / height
+            if (0 > alignedMovementValue) {
+              // Sets the animation values, we use this so we can resume animation from any point
+              this.state.sideMenuOpenValue.setValue(this.drawerOpenedValues[direction] + alignedMovementValue * directionModifier);
+              this.state.sideMenuOverlayOpacity.setValue(normalizedOpacity);
             }
           },
         );
@@ -440,7 +479,11 @@ class RNNDrawer {
             const reverseDirection: DrawerReverseDirectionInterface = {
               right: 'left',
               left: 'right',
+              top: 'bottom',
+              bottom: 'top'
             };
+            // In case the drawer started by dragging the edge of the screen reset the flag
+            this.startedFromSideMenu = false;
 
             if (swipeDirection === reverseDirection[direction]) {
               this.animatedDrawer.start();
@@ -472,7 +515,7 @@ class RNNDrawer {
        * Removes all the listenrs from this component
        */
       removeListeners() {
-        Dimensions.removeEventListener('change', () => {});
+        Dimensions.removeEventListener('change', this.onOrientationChange);
         if (this.unsubscribeSwipeStart) this.unsubscribeSwipeStart();
         if (this.unsubscribeSwipeMove) this.unsubscribeSwipeMove();
         if (this.unsubscribeSwipeEnd) this.unsubscribeSwipeEnd();
@@ -494,8 +537,8 @@ class RNNDrawer {
         /** Variables */
         const animatedValue =
           direction === DirectionType.left || direction === DirectionType.right
-            ? { marginLeft: sideMenuOpenValue }
-            : { marginTop: sideMenuOpenValue };
+            ? { translateX: sideMenuOpenValue }
+            : { translateY: sideMenuOpenValue };
 
         return (
           <View
@@ -517,7 +560,9 @@ class RNNDrawer {
                 {
                   height: this.state.screenHeight,
                   width: this.drawerWidth,
-                  ...animatedValue,
+                  transform:[
+                    animatedValue
+                  ]
                 },
               ]}
             >
@@ -547,15 +592,15 @@ class RNNDrawer {
         const closeValues: DrawerDirectionValuesInterface = {
           left: -this.drawerWidth,
           right: this.screenWidth,
-          top: -this.drawerHeight,
+          top: -this.screenHeight,
           bottom: this.screenHeight,
         };
 
         // Animate side menu close
         Animated.timing(this.state.sideMenuOpenValue, {
           toValue: closeValues[direction],
           duration: this.props.animationCloseTime,
-          useNativeDriver: false,
+          useNativeDriver: true,
         }).start(() => {
           Navigation.dismissOverlay(this.props.componentId);
           this.setState({ sideMenuIsDismissing: false });
@@ -565,7 +610,7 @@ class RNNDrawer {
         Animated.timing(this.state.sideMenuOverlayOpacity, {
           toValue: 0,
           duration: this.props.animationCloseTime,
-          useNativeDriver: false,
+          useNativeDriver: true,
         }).start();
       }
     }