1 files changed, 122 insertions, 14 deletions

diff --git a/App.js b/App.js
index 181f3ce..06d204f 100644
--- a/App.js
+++ b/App.js
@@ -1,21 +1,129 @@
-import { StatusBar } from 'expo-status-bar';
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
+import React, { Component } from "react";
+import { Animated, Text, View, StyleSheet, Button } from "react-native";
+
+const force0 = 10; // px/ms
+const alpha = 89 * (Math.PI / 180);
+const g = .1;
+const t = 2000;
+
+class App extends Component {
+  // fadeAnim will be used as the value for opacity. Initial Value: 0
+  state = {
+    yAnim: new Animated.Value(0),
+    xAnim: new Animated.Value(0),
+    v: new Animated.Value(force0 * Math.sin(alpha))
+  };
+
+  fadeIn = () => {
+    // move in x-axis
+    const vx = force0 * Math.cos(alpha);
+    Animated.timing(this.state.xAnim, {
+      toValue: vx * t,
+      duration: t,
+      useNativeDriver:true,
+    }).start();
+
+    // move in y-axis
+    Animated.timing(this.state.v, {
+      toValue: force0 * Math.sin(alpha) - g/2*t,
+      duration: t,
+      useNativeDriver: true,
+    }).start();
+    Animated.timing(this.state.yAnim, {
+      toValue: Animated.multiply(this.state.v, t),
+      duration: t,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  //funkcja ustawiająca zmianę wartości stanu fadeAnim z bieżącej na 0 w ciągu 5s i startująca tą zmianę
+  fadeOut = () => {
+    // Will change fadeAnim value to 0 in 5 seconds
+    Animated.timing(this.state.xAnim, {
+      toValue: -150,
+      duration: t,
+      useNativeDriver:true,
+    }).start();
+    Animated.timing(this.state.yAnim, {
+      toValue: 0,
+      duration: t,
+      useNativeDriver:true,
+    }).start();
+    Animated.timing(this.state.v, { toValue: force0 * Math.sin(alpha), duration: t })
+  };
+
+  //funkcja ustawiająca zmianę wartości stanu fadeAnim z bieżącej na 0 w ciągu 5s i startująca tą zmianę
+  fadeStop = () => {
+    Animated.timing(this.state.xAnim).stop();
+    Animated.timing(this.state.yAnim).stop();
+  };
+
+
+  render() {
+    return (
+      <View style={styles.container}>
+
+      {/*komponent animacyjny*/}
+        <Animated.View
+          style={[
+            styles.fadingContainer,
+            {
+              transform:
+              [{
+
+                translateY: this.state.yAnim.interpolate({
+                                inputRange: [0, 300],
+                                outputRange: [0, -300],
+                                extrapolate: 'clamp'
+                            }),
+              },
+              {translateX:this.state.xAnim.interpolate({
+                                inputRange: [-150, 150],
+                                outputRange: [-150, 150],
+                                extrapolate: 'clamp'
+                            }),},
+
+            ],
+            }
+          ]}
+        >
+
+
+        </Animated.View>
+
+        {/*komponent statyczny*/}
+        <View style={styles.buttonRow}>
+          <Button title="Fade In" onPress={this.fadeIn} />
+          <Button title="Fade Out" onPress={this.fadeOut} />
+          <Button title="Fade Stop" onPress={this.fadeStop} />
+
+        </View>
+      </View>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  fadingContainer: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    backgroundColor: "powderblue",
+    opacity: 1,
   },
+  fadingText: {
+    fontSize: 28,
+    textAlign: "center",
+    margin: 10
+  },
+  buttonRow: {
+    flexDirection: "row",
+    marginVertical: 16
+  }
 });
+
+export default App;