1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
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,
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;
|
