animationProgress -> obliczanie pozycji HEAD master

Pozycja obliczana jest za pomocą "procentu" postępu animacji. Dla 0
będzie pozycja początkowa, a dla 1 pozycja końcowa.

1 files changed, 45 insertions, 60 deletions

diff --git a/App.js b/App.js
index 06d204f..2de413e 100644
--- a/App.js
+++ b/App.js
@@ -1,61 +1,39 @@
 import React, { Component } from "react";
-import { Animated, Text, View, StyleSheet, Button } from "react-native";
+import { Animated, TextInput, Text, View, StyleSheet, Button } from "react-native";
 
-const force0 = 10; // px/ms
-const alpha = 89 * (Math.PI / 180);
-const g = .1;
-const t = 2000;
+const force0 = 100; // px/ms
+const g = 10;
+const t = 1000;
 
 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))
+    animationProgress: new Animated.Value(0),
+    alpha: 70,
   };
 
   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();
+    //start animation
+    Animated.sequence([
+      Animated.timing(this.state.animationProgress, {
+        toValue: 1,
+        duration: t,
+        useNativeDriver: true
+      }),
+      Animated.timing(this.state.animationProgress, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver: true
+      }),
+      Animated.timing(this.state.animationProgress, {
+        toValue: 0,
+        duration: 500,
+        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();
+    Animated.timing(this.state.animationProgress).stop();
   };
 
 
@@ -64,6 +42,7 @@ class App extends Component {
       <View style={styles.container}>
 
       {/*komponent animacyjny*/}
+
         <Animated.View
           style={[
             styles.fadingContainer,
@@ -71,17 +50,19 @@ class App extends Component {
               transform:
               [{
 
-                translateY: this.state.yAnim.interpolate({
-                                inputRange: [0, 300],
-                                outputRange: [0, -300],
-                                extrapolate: 'clamp'
-                            }),
+                translateY: Animated.subtract(0, Animated.multiply(Animated.subtract(force0 * Math.sin(this.state.alpha * Math.PI / 180), Animated.multiply(g, this.state.animationProgress.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [0, 10],
+                            }))), this.state.animationProgress.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [0, 10],
+                            }))),
+
               },
-              {translateX:this.state.xAnim.interpolate({
-                                inputRange: [-150, 150],
-                                outputRange: [-150, 150],
-                                extrapolate: 'clamp'
-                            }),},
+              {translateX: Animated.multiply(force0 * Math.cos(this.state.alpha * Math.PI / 180), this.state.animationProgress.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [0, 10],
+                            })),},
 
             ],
             }
@@ -91,13 +72,17 @@ class App extends Component {
 
         </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} />
+          <Button title="Rzut" onPress={this.fadeIn} />
+          <Button title="Stop" onPress={this.fadeStop} />
 
         </View>
+        <View>
+          <Text>Be nice, give me int</Text>
+          <TextInput onChangeText={value => this.setState({ alpha: Number(value) })} value={this.state.alpha}/>
+        </View>
       </View>
     );
   }