Advanced Gestures

MengTo · May 10, 2019 · 60b25cd · 60b25cd
1 parent b7c5242
commit 60b25cd
Showing 1 changed file with 73 additions and 8 deletions.
diff --git a/screens/ProjectsScreen.js b/screens/ProjectsScreen.js
@@ -9,20 +9,38 @@ class ProjectsScreen extends React.Component {
   };
 
   state = {
-    pan: new Animated.ValueXY()
+    pan: new Animated.ValueXY(),
+    scale: new Animated.Value(0.9),
+    translateY: new Animated.Value(44)
   };
 
   componentWillMount() {
     this._panResponder = PanResponder.create({
+      onPanResponderGrant: () => {
+        Animated.spring(this.state.scale, { toValue: 1 }).start();
+        Animated.spring(this.state.translateY, { toValue: 0 }).start();
+      },
       onMoveShouldSetPanResponder: () => true,
       onPanResponderMove: Animated.event([
         null,
         { dx: this.state.pan.x, dy: this.state.pan.y }
       ]),
       onPanResponderRelease: () => {
-        Animated.spring(this.state.pan, {
-          toValue: { x: 0, y: 0 }
-        }).start();
+        const positionY = this.state.pan.y.__getValue();
+        // console.log(positionY);
+
+        if (positionY > 200) {
+          Animated.timing(this.state.pan, {
+            toValue: { x: this.state.pan.x, y: 1000 }
+          }).start();
+        } else {
+          Animated.spring(this.state.pan, {
+            toValue: { x: 0, y: 0 }
+          }).start();
+
+          Animated.spring(this.state.scale, { toValue: 0.9 }).start();
+          Animated.spring(this.state.translateY, { toValue: 44 }).start();
+        }
       }
     });
   }
@@ -40,10 +58,33 @@ class ProjectsScreen extends React.Component {
           {...this._panResponder.panHandlers}
         >
           <Project
-            title="Price Tag"
-            image={require("../assets/background5.jpg")}
-            author="Liu Yi"
-            text="Thanks to Design+Code, I improved my design skill and learned to do animations for my app Price Tag, a top news app in China."
+            title={projects[0].title}
+            image={projects[0].image}
+            author={projects[0].author}
+            text={projects[0].text}
+          />
+        </Animated.View>
+        <Animated.View
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            zIndex: -1,
+            width: "100%",
+            height: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+            transform: [
+              { scale: this.state.scale },
+              { translateY: this.state.translateY }
+            ]
+          }}
+        >
+          <Project
+            title={projects[1].title}
+            image={projects[1].image}
+            author={projects[1].author}
+            text={projects[1].text}
           />
         </Animated.View>
       </Container>
@@ -61,3 +102,27 @@ const Container = styled.View`
 `;
 
 const Text = styled.Text``;
+
+const projects = [
+  {
+    title: "Price Tag",
+    image: require("../assets/background5.jpg"),
+    author: "Liu Yi",
+    text:
+      "Thanks to Design+Code, I improved my design skill and learned to do animations for my app Price Tag, a top news app in China."
+  },
+  {
+    title: "The DM App - Ananoumous Chat",
+    image: require("../assets/background6.jpg"),
+    author: "Chad Goodman",
+    text:
+      "Design+Code was the first resource I used when breaking into software. I went from knowing nothing about design or code to building a production ready app from scratch. "
+  },
+  {
+    title: "Nikhiljay",
+    image: require("../assets/background7.jpg"),
+    author: "Nikhil D'Souza",
+    text:
+      "Recently finished the React course by @Mengto, and I 10/10 would recommend. I already rewrote my personal website in @reactjs and I'm very excited with it."
+  }
+];