Animated Transition

MengTo · May 11, 2019 · b7e8011 · b7e8011
1 parent 46f6536
commit b7e8011
Showing 1 changed file with 78 additions and 8 deletions.
diff --git a/components/Project.js b/components/Project.js
@@ -1,23 +1,89 @@
 import React from "react";
 import styled from "styled-components";
+import {
+  Animated,
+  TouchableWithoutFeedback,
+  Dimensions,
+  StatusBar,
+  TouchableOpacity
+} from "react-native";
+import { Icon } from "expo";
+
+const screenWidth = Dimensions.get("window").width;
+const screenHeight = Dimensions.get("window").height;
+const tabBarHeight = 83;
 
 class Project extends React.Component {
+  state = {
+    cardWidth: new Animated.Value(315),
+    cardHeight: new Animated.Value(460),
+    titleTop: new Animated.Value(20),
+    opacity: new Animated.Value(0)
+  };
+
+  openCard = () => {
+    Animated.spring(this.state.cardWidth, { toValue: screenWidth }).start();
+    Animated.spring(this.state.cardHeight, {
+      toValue: screenHeight - tabBarHeight
+    }).start();
+    Animated.spring(this.state.titleTop, { toValue: 40 }).start();
+    Animated.timing(this.state.opacity, { toValue: 1 }).start();
+
+    StatusBar.setHidden(true);
+  };
+
+  closeCard = () => {
+    Animated.spring(this.state.cardWidth, { toValue: 315 }).start();
+    Animated.spring(this.state.cardHeight, {
+      toValue: 460
+    }).start();
+    Animated.spring(this.state.titleTop, { toValue: 20 }).start();
+    Animated.timing(this.state.opacity, { toValue: 0 }).start();
+
+    StatusBar.setHidden(false);
+  };
+
   render() {
     return (
-      <Container>
-        <Cover>
-          <Image source={this.props.image} />
-          <Title>{this.props.title}</Title>
-          <Author>by {this.props.author}</Author>
-        </Cover>
-        <Text>{this.props.text}</Text>
-      </Container>
+      <TouchableWithoutFeedback onPress={this.openCard}>
+        <AnimatedContainer
+          style={{ width: this.state.cardWidth, height: this.state.cardHeight }}
+        >
+          <Cover>
+            <Image source={this.props.image} />
+            <AnimatedTitle style={{ top: this.state.titleTop }}>
+              {this.props.title}
+            </AnimatedTitle>
+            <Author>by {this.props.author}</Author>
+          </Cover>
+          <Text>{this.props.text}</Text>
+          <TouchableOpacity
+            style={{ position: "absolute", top: 20, right: 20 }}
+            onPress={this.closeCard}
+          >
+            <AnimatedCloseView style={{ opacity: this.state.opacity }}>
+              <Icon.Ionicons name="ios-close" size={32} color="#546bfb" />
+            </AnimatedCloseView>
+          </TouchableOpacity>
+        </AnimatedContainer>
+      </TouchableWithoutFeedback>
     );
   }
 }
 
 export default Project;
 
+const CloseView = styled.View`
+  width: 32px;
+  height: 32px;
+  background: white;
+  border-radius: 16px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const AnimatedCloseView = Animated.createAnimatedComponent(CloseView);
+
 const Container = styled.View`
   width: 315px;
   height: 460px;
@@ -26,6 +92,8 @@ const Container = styled.View`
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 `;
 
+const AnimatedContainer = Animated.createAnimatedComponent(Container);
+
 const Cover = styled.View`
   height: 290px;
   border-top-left-radius: 14px;
@@ -48,6 +116,8 @@ const Title = styled.Text`
   width: 300px;
 `;
 
+const AnimatedTitle = Animated.createAnimatedComponent(Title);
+
 const Author = styled.Text`
   position: absolute;
   bottom: 20px;